A extensão Color Swatches Pro é uma ferramenta eficaz para apresentar produtos configuráveis em um estilo vívido e envolvente. O plug-in torna as páginas de seus produtos fáceis de usar e realmente amigáveis para os compradores.




Caso tiver feito o procedimento corretamente e tiver dando algum bug, exemplo: não exibindo o preço do produto filho ou não exibindo a miniatura, pode se tratar de conflito - verifique se a loja usa o antigo módulo de swatch: Configurar Swatch - caso tiver o módulo este precisa ser desabilitado e desligado para sanar o conflito, para desligar o módulo  pelo painel ir em: Sistema - Configuração - Avançado - Avançado e desabilite o módulo: Mage_ConfigurableSwatches


1 - Fazer Configurar Atributo para que seja exibido como Swatch

2 - Inserindo a miniatura/swatch

3 - Configurações Gerais


1 - Amostras

Como fazer upload de imagens/miniaturas para os atributos?

*****Para que seja possível inserir miniatura nos valores do atributo, é preciso verificar se o atributo esta com as seguintes configurações: Escopo - Todas as Lojas, Formato de Campo p/ Lojista - Combobox, Utilizar Para Criar Produtos Configuráveis - Sim.

 Vá para Catálogo → Atributos → Gerenciar Atributos , filtre o referido atributo  e clique nele.


Defina os valores deste atributo em: Gerenciar Descrição/Opções e clique em Salvar

Se o atributo tiver com a configuração conforme passada acima, será exibida uma guia chamada Atribuir Images.



Marque a caixa de seleção: Use imagens para seleção de opções de produtos configuráveis 

Você pode especificar o tamanho das amostras de cores nas páginas de produtos e categorias.


Se você não especificar uma cor ou não fazer o Upload, será mostrada o valor do Atributo em Swatch - exemplo abaixo


2.A - Caso a miniatura for padrão - exemplo todo produto com a cor vermelha terá a mesma miniatura 



Upload Image - Carregar Imagem - Para definir a imagem de atributo, você pode carregá-la ou simplesmente arrastá-la e soltá-la no local.


Caso você precise de uma cor sólida para qualquer atributo do produto, você pode usar nossa opção Color Picker com uma paleta de cores.


Após escolher as cores ou subir as imagens - clique em salvar - Pode ser necessário o gerenciamento de cache ou de índice.

2.B - Caso a miniatura for personalizada - Exemplo cada miniatura do produto vai ter uma imagem específica

Imagens de produtos associados/filhos para amostras


A extensão permite que você use imagens de produtos associados/filhos para amostras de um atributo. Por exemplo, você pode usar as imagens do produto para a cor do atributo.

Exemplo: Você gostaria que a miniatura exibisse uma camiseta branca ao clicar na cor branca

  • Para isso, vá no Catálogo de Produtos e clique para Editar um produto Configurável e abra a guia Produtos Associados .
  • Marque Usar imagem do produto ao lado do atributo para o qual você gostaria de usar as imagens de produtos simples como amostras - irá exibir como miniatura a imagem  que foi definida como base no produto filho.
  • Esta opção será habilitada somente caso você tenha marcado a caixa de seleção Usar imagens para seleção de opções de produto configuráveis .


Note que há duas opções - utilizar padrão - se selecionada esta opção irá exibir as imagens configuradas no passo mais acima acima, ou usar image do produto (irá usar a imagem base do produto filho - necessário inserir imagem no produto filho).




Desta forma será mostrada como miniatura a imagem do produto



3 - Configurações Gerais

Você pode encontrar as configurações da extensão no painel de administração → Sistema → Configuração → Amasty Extensions - Color Swatches Pro.



Ocultar listas suspensas de configuração - Defina como Sim para usar apenas amostras para seleção de opções de produto configuráveis.

Se ocultar irá somente a amostra da imagem

(sem ocultar)                                                                 

ocultando

Mostrar todas as opções de atributo - Exibe todas as opções de uma vez. Se definido como Não , apenas as opções especificadas nas configurações serão exibidas.

Recarregar informações do produto - Escolha elementos de informações do produto configuráveis que devem ser substituídos por informações simples do produto. Os elementos serão atualizados sem recarregar a página inteira, enquanto os clientes selecionam opções. A seleção múltipla está disponível.



***Aqui irá selecionar os atributos que ao clicar no swatch será atualizada a informação - exemplo ao clicar na variação do produto irá recarregar o sku - sendo exibido o sku do produto que foi selecionado


Mostrar opção 'Redefinir configuração' - Exibe o botão Redefinir configuração na seção de opções de uma página de produto.



Recarregar Imagens ao Selecionar o Primeiro Atributo - Se a opção estiver habilitada, as imagens do produto serão recarregadas assim que o primeiro atributo for selecionado (serão escolhidos os primeiros valores dos demais atributos).

Selecionar automaticamente atributos que têm um único valor - Se um produto tiver apenas um atributo configurável no menu suspenso, ele será selecionado automaticamente.

Exibir Opções de produtos esgotados como riscados - Defina a opção como Sim para exibir as opções de produtos esgotados como riscados.


Ativar controle deslizante (slider) para amostras - Ative/desative o controle deslizante de amostras nas páginas de visualização do produto.




Configurações de preço

Usar Preço de Produtos Simples - Se você escolher Sim para Todos os Produtos , os preços dos produtos configuráveis serão automaticamente retirados dos produtos simples. Escolha Não para definir manualmente cada preço para o produto configurável.. Escolha Para Produtos Especificados para definir manualmente os produtos em que os preços dos produtos configuráveis serão obtidos automaticamente de produtos simples. Nesse caso, você deve marcar a caixa de seleção Usar preço de produtos simples na página de configurações do produto ( setar o atributo abaixo).


Preço de Exibição - Se você mostrar opções simples de produtos configuráveis em menus suspensos, poderá ativar a exibição de preços para eles. Escolha se deseja mostrar os preços reais para cada configuração ou a diferença de preço.


Exibir preço de produtos simples em listas suspensas - Exibir preços em listas suspensas no modo Preço real ou com diferença de preço . Selecione Não Mostrar Preço para desabilitar.

Exibir preço de produtos simples no título Swatch - Defina a opção como Sim se você não usar menus suspensos para mostrar opções simples. Caso a opção esteja habilitada, os preços das opções simples serão exibidos em um título de amostra.





Exibir amostras em uma página de categoria


Exibir amostras de cores nas páginas da lista de produtos - Defina esta opção como Sim para mostrar amostras de cores e permitir que os clientes as selecionem nas páginas de categorias e resultados de pesquisa. Escolha o modo AJAX para acelerar o download das páginas da categoria.

Use índices para melhor desempenho - Para melhorar o desempenho das páginas de categoria, defina o recurso de reindexação como Sim .

Largura e altura da miniatura do produto- Especifique o tamanho da miniatura do produto em pixels.

Mostrar quantidade limitada de amostras - Defina a opção como Sim para limitar o número de amostras visíveis nas páginas de categoria.

Quantidade de amostras visíveis - Especifique o número de amostras/imagens visíveis em uma página de categoria.

Configurações de tamanho de imagem

Configure as dimensões para a imagem de visualização.



Zoom

Ativar recurso de zoom - Se Ativar recurso de “zoom” estiver definido como Sim , o efeito de zoom será ativado para imagens de produtos no front-end.

Tipo de Zoom - Existem três tipos de zoom disponíveis: Externo, Interno e Lente. Escolha Zoom externo para mostrar a imagem do produto ampliada em uma janela separada. O Inside Zoom exibirá elementos ampliados das imagens do produto diretamente na janela principal da imagem do produto.




Configurações do Zoomer


Escolha a posição da janela Zoom e insira o número da posição correspondente no campo.

Dependendo do tipo de Zoom selecionado irá aparecer algumas configurações relativas ao tipo de zoom

Dimensões para zoom externo, dentre outras configurações.


Configurações para zoom Interno


Configurações e dimensão para zoom Lente

Light Box

Ativar recurso Lightbox - Defina esse recurso como Sim para ativar o efeito lightbox quando os clientes abrirem imagens em tamanho real.

Caixa de luz circular - Com a caixa de luz circular, os clientes podem visualizar imagens de produtos em círculos ininterruptos.

Enable Thumbnail Helper - Se definir esta opção como Sim , o ajudante de miniaturas aparecerá em um lightbox. O auxiliar mostra miniaturas de todas as imagens de produtos disponíveis.



Para desabilitar o efeito de Lightbox & Zoom, defina:

  • Ative o recurso “Zoom” para NÃO
  • Ação para Desativar a Alteração da Imagem Principal
  • Ative o recurso “Lightbox” para NÃO
  • Ative o recurso “Carrossel” para NÃO

Isso redefinirá as configurações para o tema padrão com Zoom .

Carrossel

Ativar Recurso Carrossel - Defina Ativar Recurso "Carrossel" como Sim para mostrar miniaturas de produtos em um carrossel atraente.

Uma amostra de um carrossel ativado

Contagem de itens visíveis no carrossel - Escolha quantos itens devem estar visíveis no carrossel ao mesmo tempo.

Carrossel circular - Este recurso ativa o carrossel circular. Isso significa que os clientes poderão listar infinitas miniaturas de produtos no carrossel.

Usar paginação - Esta opção permite exibir a paginação logo abaixo do carrossel de miniaturas.


Configurações para Rótulo/Label de imagem




Exibir rótulo da imagem - Defina a opção como Sim para exibir um rótulo de texto para imagens ampliadas.

Posição - Escolha a posição superior ou inferior para um rótulo de texto.

Cor de fundo - Defina as configurações de exibição como opacidade, texto e cor de fundo.

Mostrar rótulos de texto junto com imagens ampliadas.