Ao criar um produto configurável, as opções de cor aparecerão no site como um botão como o nome da cor para o cliente escolher.
Mas também é possível colocar a imagem da cor ao invés do nome
Para isso, vá em Catálogo > Atributos > Gerenciar Atributos.
Aparecerá uma lista com todos os atributos.
Clique no atributo Cor (provavelmente o terceiro atributo da lista)
IMPORTANTE: Não altere as “Propriedades” do atributo Cor, pois estas já estão configuradas corretamente por padrão
Em Informações do Atributo, clique na aba “Gerenciar Descrição/Opções”
Nesta aba aparecerá todas as opções de cores cadastradas, sendo possível facilmente adicionar outras cores clicando em “Adicionar Opção” ou excluí-las clicando em excluir
Há 3 colunas, “Admin”, “Default Store View” e “Posição”.
A coluna “Posição” refere-se à ordem que a opção de cor aparecerá no site.
A coluna “Default Store View” refere-se ao nome da cor que aparecerá no site para os clientes.
A coluna “Admin” refere-se ao nome da cor para o painel administrativo (não aparecerá no site), e é a esta coluna que precisaremos prestar atenção nesse momento.
Os nomes das cores colocados nessa coluna não devem possuir acentos ou caracteres especiais, ou não será possível “relacionar” o nome da cor com a imagem que subiremos posteriormente.
Por exemplo, a cor Rosa Bebê deve ser preenchida como Rosa Bebe na coluna “Admin”.
Além disso, o nome da imagem deve ser igual ao nome da cor, mas em letras minúsculas e substituindo os espaços por traços, ou seja, nesse caso, a imagem deve se chamar rosa-bebe (junto com a extensão, ficando rosa-bebe.png, por exemplo). Vale lembrar que a imagem precisa estar no formato png para que apareça.
Para que possamos cadastrar uma imagem para esta cor, precisamos ir em CMS > Blocos Estáticos
Clique em qualquer bloco, o bloco escolhido não é importante pois apenas o usaremos como um “caminho” para cadastrar as imagens
Dentro do bloco, clique em “Show/Hide Editor” e depois em “Insert Image..”
Abrirá a tela de carregamento de imagens. Nela haverá uma pasta chama “swatches”.
Se a pasta não existir precisaremos criá-la clicando em “Criar Pasta..” e nomeando-a como “swatches”.
Clique nessa pasta. É dentro dela que vamos carregar as imagens que serão utilizadas como cores
IMPORTANTE: Observe que o nome de todas as imagens são iguais aos nomes das cores (azul.png, por exemplo), não deve conter espaços ou caracteres especiais (podem conter traços) e deve ser igual ao nome preenchido na coluna “Admin” do atributo cor, em letras minúsculas, substituindo os espaços por traços, como dito anteriormente.
Além disso, o arquivo da imagem deve ser png.
Para adicionar uma imagem, clique em “Procurar Arquivos”, selecione o(s) arquivo(s) em seu computador e clique em “Enviar arquivos”
Após fazer isso, basta voltar e a imagem cadastrada aparecerá no lugar do nome da respectiva cor no site