- Como fazer para que apareça a imagem da cor, ao invés do nome no site

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 dela 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