Como mostrar a foto de cada cor ou variante na ficha de produto do PrestaShop
· 3 min de leitura
Uma lista pendente com «Azul, Vermelho, Verde» obriga o cliente a adivinhar como é cada versão. Explicamos como aproveitar as imagens que as suas combinações já têm para mostrar cada opção com a sua foto, o que rever no catálogo e no tema e como o Variantes por atributo o faz sem programar.
O problema: escolher uma variante às cegas
Em muitas lojas PrestaShop a cor ou o acabamento escolhe-se numa lista pendente com nomes: «Azul, Vermelho, Verde», «Nogueira, Carvalho». O cliente tem de imaginar cada um ou ir clicando nas opções e esperar que a foto principal mude.
- Alguns cansam-se e saem.
- Outros escolhem a variante errada e devolvem-na, com o custo de envio e gestão que isso implica.
- No telemóvel, as listas pendentes são ainda mais incómodas.
O curioso é que as fotos já existem: estão atribuídas a cada combinação no catálogo. Só falta mostrá-las onde o cliente decide.
A solução: uma fila de miniaturas com a foto real
1. Atribua uma imagem a cada combinação
Na ficha do produto, no separador de combinações, marque para cada combinação a imagem que a representa. Sem isso, nenhuma solução consegue mostrar a foto certa. Reveja sobretudo os produtos mais vendidos.
2. Escolha o atributo principal
Normalmente é a cor, mas pode ser o acabamento, o material ou o padrão. As miniaturas devem agrupar por esse atributo: se um produto tem cores e tamanhos, mostra-se uma miniatura por cor, não uma por combinação.
3. Mostre as miniaturas junto ao seletor
O melhor sítio é logo abaixo do seletor de atributos, antes do botão «Adicionar ao carrinho». Ao clicar numa miniatura deve selecionar-se essa opção no seletor nativo do tema, para que o preço, o stock e o carrinho continuem a funcionar igual.
4. Cuide do tamanho e da acessibilidade
Use uma versão de imagem do PrestaShop de tamanho parecido com a miniatura para que não fique desfocada nem pese demasiado. Acrescente o nome da opção como texto alternativo e destaque a variante escolhida.
Os temas que trazem «amostras de cor» costumam mostrar apenas um quadrado da cor do atributo, não a foto real do produto nessa cor, que é o que realmente ajuda a decidir.
Como o Variantes por atributo o ajuda
Variantes por atributo é o nosso módulo para PrestaShop 1.6.1 a 9.2 (PHP 7.1 a 8.4) que coloca a foto real de cada opção na ficha de produto:
| Necessidade | O que faz o módulo |
|---|---|
| Fotos reais | Uma miniatura por cada valor do atributo escolhido, com a imagem já atribuída à sua combinação. Sem carregar nada novo. |
| Um clique | A miniatura seleciona a opção no seletor de atributos nativo do tema: preços, stock e carrinho não mudam. |
| Qualquer atributo | Cor, acabamento, material, padrão… o grupo de atributos que indicar. |
| Tamanho | Miniaturas de 24 a 200 px e a versão de imagem que escolher, validado para nunca ficarem desfocadas. |
| Clareza | Variante atual destacada e nome da opção como texto flutuante e alternativo. Só aparece se o produto tiver dois ou mais valores. |
| Posição | Funciona ao instalar no hook padrão displayProductAdditionalInfo; para o pôr logo a seguir ao seletor basta uma linha no modelo, explicada no separador Ajuda. |
| Leve | Só a sua folha de estilos e o seu script, sem pedidos externos nem tabelas extra. Ao desinstalar não deixa rasto. |
Escolhe o grupo de atributos e o tamanho, guarda e os seus clientes já veem cada opção antes de escolher.