Ferramentas do usuário


Color Swatch Magento

A função Color Swatches permite que o seu cliente selecione as cores, tamanhos, texturas ou qualquer outro atributo dos produtos configuráveis através de um ícone ilustrativo que ao ser clicado altera a imagem de exibição do produto. Segue ilustração:

O Magento 1.9.1 já possui esta função por padrão, caso sua versão seja anterior a esta, será necessário adquirir um módulo para este fim.

Configurações

Caso sua loja Magento já possua esta função por padrão, siga o passo a passo abaixo para habilitar e configurar o seu Color Swatch.

Acesse a administração do Magento, navegue até Sistema → Configurações → Catálogo → Configurable Swatches. Será aberta a página de configuração, como mostra a figura abaixo:

Para habilitar selecione Sim no campo Habilitado. No campo a seguir defina os atributos que serão utilizados pelo Color Swatch. Neste campo estarão disponíveis apenas os atributos que, no momento de sua criação, forem selecionados para serem utilizados por produtos configuráveis. Saiba mais sobre os atributos no Magento clicando aqui.

O último campo da aba Configurações Gerais permite que o atributo ali selecionado apareça na listagem ao efetuar uma busca. Por exemplo, selecionando o atributo de cor, ao buscar, na vitrine da loja, por uma das cores será retornado os produtos que possuírem a cor pesquisada. Segue ilustração:

As próximas abas referem-se às dimensões (largura e a altura em pixels) do Swatch, que será exibido nas páginas do produto, na listagem de produtos e no menu de filtros. Recomendamos que permaneçam com as dimensões padrões do Magento. A ilustração a seguir exibe as configurações citadas:

Terminadas as configurações, clique sobre o botão Salvar, localizado à direita, na parte superior da página.

Swatches Baseadas em Texto

Na página do produto, os swatches podem ser usados para indicar as combinações de cor e tamanho atualmente disponíveis. Se não houver uma imagem disponível para uma amostra, o valor do atributo aparecerá como texto. Um swatch com base em um texto é como um botão com uma etiqueta de texto e se comporta da mesma maneira que uma amostra com uma imagem.

Na ilustração a seguir, a amostra de cor é identificada com um rótulo de texto para o nome da cor, assim como as amostras de tamanho têm um rótulo de texto para o tamanho. Se os valores de atributo de tamanho fossem “Pequeno”, “Médio” e “Grande”, em vez de números, esse texto seria exibido nas amostras.

Swatches Baseadas em Imagem

Existem dois métodos diferentes para criar swatches de imagem para seus produtos.

  • O método padrão é criar imagens globais que representem uma cor simples e carregá-las no Armazenamento de Mídia.
  • O outro é criar imagens personalizadas que ilustram uma malha ou textura e adicioná-las em um produto específico.

Importante: As imagens que são carregadas no Armazenamento de Mídia estão disponíveis globalmente e podem ser usadas por qualquer produto da loja, já as imagens personalizadas que são enviadas diretamente para a galeria de miniaturas de um produto específico, são exibidas somente na página de detalhes daquele produto, e elas não aparecerão na listagem de produtos, e nem na navegação em camadas.

Upload de Imagens no Armazenamento de Mídia

Para criar as imagens das cores, escolha o editor de sua preferência. Lembrando que as dimensões de cada imagem deve seguir as dimensões definidas nas configurações do Color Swatch. Caso mantenha as dimensões padrões, cada imagem deverá ter o tamanho de 21×21 pixels.

Outro ponto de atenção é o nome das imagens criadas para cada cor. Cada imagem deverá ter exatamente o mesmo nome que a cor possui no atributo cor. Além disso, o nome das imagens, não podem ter espaços entre uma palavra e outra, nem acento, ou qualquer tipo de caractere especial e as letras deverão ser minúsculas. Nos casos em que o nome da cor possua qualquer uma das especificações proibidas acima, estas deverão ser substituída por traço (-). Por exemplo:

Vamos supor que vocês possuam na administração uma cor com o nome Açafrão, a imagem png deverá ser nomeada da seguinte forma a-afr-o.png, outro exemplo, Acqua Marine = acqua-marine. Segue imagem de exemplo:

Para nomear as imagens das cores, verifique as cores cadastradas no atributo cor de sua loja. Para isso acesse a administração do Magento, navegue até AtributosGerenciar atributos. Na página do atributo, no campo código do atributo, busque o atributo. Caso sua loja utilize o atributo cor que vem por padrão no Magento, busque pelo código Color. Segue ilustração das configurações acima:

Em seguida, na página do atributo, navegue até Gerenciar Descrição/Opção, neste menu você poderá observar todas as cores cadastradas na loja. Segue ilustração das configurações acima:

Publicando as Imagens no Magento

Para subirem as imagens para a loja acesse a administração da loja, navegue até CMSpáginas → escolha qualquer página → vá até o menu Conteúdo → selecione o botão insert image. Será aberto um pop up que permite criar pastas e também subir as imagens. Primeiro selecione o botão Criar Pasta, no canto superior esquerdo da sua tela, e nomeie a sua pasta como swatches (importante que o nome da pasta seja este), finalize clicando sobre OK. Segue ilustrações com o passo a passo descito acima:

Após criada a pasta suba as imagens das cores para ela. Para isso selecione a pasta swatches → em seguida clique o botão Browse Files → e selecione as imagens desejadas → finalize, selecionando o botão Upload Files. Segue ilustração das configurações acima:

Após seguir os passos acima, limpe os caches do Magento e verifique as alterações na página do produto da sual loja. Lembrando que o Color Swatch aplica-se apenas aos produtos configuráveis.

Importante: Para os demais atributos utilizados pelo Color Swatch, caso queira personalizá-los com imagens, siga o passo a passo acima.

Upload de Imagens na Galeria do Produto

Essa opção é mais utilizada, quando o lojista quer apresentar no lugar da cor uma imagem que mostre o tecido, a textura, ou até mesmo a foto do produto já produzido naquela variável. Para inserir a imagem no produto específico, navegue até CatálogoGerenciar Produtos.

Em seguida, busque o produto configurável desejado, clique sobre ele para visualizar seu cadastro, e no menu lateral, vá até a aba Imagens. Feito isso, clique sobre o botão Procurar Arquivos, selecione o arquivo da imagem que deseja fazer o upload, e clique no botão Enviar Arquivos. A ilustração a seguir exibe as configurações citadas:

Quando a imagem já estiver na galeria do produto, é hora de inserir o rótulo que vai identificar a imagem como uma swatch associada a uma variação daquele produto. Você deve acrescentar o nome da cor, seguido por um hífen e a palavra swatch, assim como mostra a ilustração a seguir:

Feito isso, para salvar suas configurações clique sobre o botão Salvar no canto superior direito da tela. Para visualizar suas alterações na vitrine, pode ser necessária a limpeza dos caches.

Importante: Não é necessário marcar a caixa de seleção Excluir, porque, por padrão, as imagens utilizadas como Swatch não aparecem na galeria de miniaturas na página do produto.

A ilustração a seguir exibe como a imagem aparecerá no Color Swatch, na página do produto:

Swatches Exibindo Imagens Dinâmicas

É possível ainda exibir a imagem do produto de forma dinâmica ao selecionar a cor desejada. Para isso, basta que os produtos simples associados ao produto configurável possuam imagem cadastrada.

Dica: Os quadradinhos de cores são facilmente encontrados em pesquisa no Google. Realize buscas direcionadas, como por exemplo “color swatch pink”. Busque utilizando os termos de pesquisa em inglês, assim obterá melhores resultados. Seguem ilustrações:

Aproveite esta ferramenta e deixe o seu produto ainda mais comercial!


Ferramentas da página