A extensão "Amostras de Cor, Sabor ou Tamanho" está disponível para a contratação em nossa loja de extensões.


Veja como ela funciona:


Produtos configuráveis normalmente utilizam caixas de seleção do tipo dropdown para que o usuário configure a sua compra:




Porém, em alguns casos é mais interessante exibir, ao invés de um dropdown, uma imagem, uma cor, um simplesmente textos explicativos para que fique mais claro para o cliente quais são as opções:




Para isto servem os Color Swatches. Para cadastrar os Color Swatches, basta seguir os seguintes passos:


  1. Primeiramente é preciso cadastrar o produto configurável. Caso você ainda não saiba como fazer isto, basta seguir este tutorial.

  2. Após criar o produto configurável, na área administrativa da sua loja virtual clique em Catálogo -> Color Swatches:



  3. Na próxima tela será exibida uma lista com todos os produtos configuráveis cadastrados em sua loja virtual. Clique no produto para o qual deseja criar os color swatches:




  4. Na tela de edição dos color swatches do produto são apresentados os atributos configuráveis. Clique no atributo para o qual deseja criar os color swatches, e depois em Habilitar amostras:



  5. Será exibido um formulário contendo as opções do atributo configurável. Para cada opção, você poderá cadastrar um color Swatch. Existem três tipos de color swatches: Texto, onde é apresentada uma representação textual da opção; Cor, onde é exibido um pequeno quadrado com uma cor para cada opção e Imagem, onde é possível fazer o upload de uma imagem para descrever aquela opção. No nosso caso, vamos utilizar Color Swatches do tipo Cor. É importante ressaltar que as imagens precisam ser quadradas para que funcione sem problemas.



  6. Observe que na parte esquerda da configuração do color swatch de cada opção estão listadas as imagens dos produtos. Isto serve para que você associe cada opção do atributo configuráveil a uma imagem. Desta forma, quando os clientes da sua loja virtual selecionarem, por exemplo, a cor vermelha, verão a imagem correspondente à versão vermelha da camiseta. Basta você clicar em cima da imagem que deseja associar à opção para que a associação seja feita.



  7. Pronto! Após isto, os seus color swatches já estão criados. Agora falta apenas definir aonde eles irão aparecer. Para isto, existem 3 checkboxes na parte superior do formulário, :



    Cada checkbox habilitará uma funcionalidade dos Color Swatches. São elas:


     - Exibir nas páginas dos produtos: Substituirá o dropdown de configuração do produto configurável pelos color swatches

     - Exibir nas páginas de categorias: Exibirá uma versão pequena do color swatch nas listas de produtos. Quando o cliente clicar sobre um color swatch na lista de produtos, a imagem do produto será substituída pela relacionada àquela opção

     - Alterar imagem do produto no carrinho: Exibirá a imagem associada à opção do produto configurável quando o cliente adicioná-la ao carrinho de compras, ao invés da imagem base do produto. Por exemplo, se o cliente comprou uma camiseta verde, a imagem associada à opção verde será exibida no carrinho de compras:

  8. Após finalizado este cadastro, basta clicar no botão salvar no canto superior direito da tela, e o color swatch estará criado!