Como mostrar só as imagens da variante selecionada
O cliente entra na sua loja, seleciona a camiseta na cor branca e encontra 20 fotos na galeria. Fotos da versão preta, da azul, da verde. Tudo misturado. Ele precisa rolar e descobrir quais fotos são da variante que escolheu. Isso não deveria acontecer.
O comportamento padrão do Shopify é mostrar todas as imagens do produto na galeria, independente da variante selecionada. Quando o cliente troca de variante, o Shopify rola até a imagem vinculada, mas não esconde as outras. O resultado é uma galeria poluída que confunde o comprador.
Neste artigo, você aprende como filtrar a galeria para mostrar apenas as fotos da variante ativa.
Neste artigo
- O comportamento padrão do Shopify
- Por que filtrar a galeria importa
- Como funciona a filtragem com metafields
- Configurando no Rubik Variant Images
- E as imagens compartilhadas entre variantes?
- Antes e depois
- Perguntas frequentes
- Leitura complementar
O comportamento padrão do Shopify
Quando você cadastra um produto no Shopify e sobe 20 fotos, todas aparecem na galeria da página do produto. Se o produto tem 5 variantes de cor, cada uma com 4 fotos, o cliente vê as 20 de uma vez.
O Shopify permite vincular uma imagem a cada variante. Quando o cliente seleciona “Azul”, a galeria rola até a foto vinculada. Mas as fotos da versão preta, vermelha e verde continuam ali. Visíveis. Confundindo.
Esse comportamento faz sentido para produtos com poucas variantes e poucas fotos. Para lojas de moda, acessórios ou decoração, onde cada variante tem múltiplos ângulos, a galeria fica inutilizável.
Por que filtrar a galeria importa
Uma galeria filtrada faz três coisas. Primeiro, reduz a confusão. O cliente vê apenas fotos do que selecionou. Frente, costas, detalhe e ambientação da variante azul. Nada mais.
Segundo, acelera a decisão. Em vez de rolar por 20 fotos tentando identificar quais são da variante escolhida, o cliente vê 4 fotos relevantes. O tempo na página diminui, mas a taxa de conversão sobe. Parece contraditório, mas faz sentido: o cliente encontra o que precisa mais rápido.
Terceiro, reduz devoluções. Quando o cliente vê apenas fotos da variante que vai comprar, a chance de confundir cores e receber algo inesperado diminui. Pesquisas indicam que 22% das devoluções online são por aparência diferente do esperado.
Como funciona a filtragem com metafields
O Shopify não oferece filtragem de galeria nativa. A única forma de conseguir isso é via app. O Rubik Variant Images resolve isso usando metafields do Shopify.
O app salva a relação entre cada variante e suas imagens em um metafield JSON vinculado ao produto. Quando o cliente seleciona uma variante, o JavaScript do app lê esse metafield e atualiza a galeria. Só aparecem as fotos atribuídas àquela variante.
Como os metafields carregam junto com a página (não precisam de chamadas externas de API), a troca é instantânea. O cliente clica em “Azul” e a galeria atualiza na hora, sem delay perceptível.
Configurando no Rubik Variant Images
O processo é direto. Depois de instalar o app e ativar o App Embed no editor de temas:
- Abra o produto no painel do Rubik Variant Images.
- Veja todas as variantes listadas à esquerda e as imagens disponíveis à direita.
- Arraste as imagens para cada variante. Se a camiseta azul tem 4 fotos (frente, costas, detalhe, look), arraste as 4 para a variante “Azul”.
- Repita para cada variante. Ou use o Auto-Assign com IA para atribuir automaticamente.
- Salve. Acesse a página do produto na loja e teste trocando de variante.
A galeria agora mostra apenas as fotos da variante selecionada. Ao trocar de cor, as imagens atualizam instantaneamente.
E as imagens compartilhadas entre variantes?
Nem toda foto é exclusiva de uma variante. Uma imagem de tabela de medidas, por exemplo, vale para todas as cores. Uma foto de embalagem também. O Rubik permite vincular a mesma imagem a múltiplas variantes.
Basta arrastar a foto para todas as variantes que devem exibi-la. Assim, quando o cliente seleciona qualquer cor, a tabela de medidas aparece na galeria junto com as fotos específicas daquela variante.
Você também pode reordenar as imagens dentro de cada variante. A primeira foto da lista será a imagem principal quando aquela variante estiver selecionada.
Antes e depois
Antes (sem filtragem): o cliente seleciona “Branco” e vê 20 fotos. Precisa identificar quais são da versão branca. Confusão, tempo perdido, chance de comprar achando que é uma cor e receber outra.
Depois (com Rubik): o cliente seleciona “Branco” e vê 4 fotos. Todas da versão branca. Frente, costas, detalhe, ambientação. Decisão rápida e confiante.
Combinado com amostras de cores visuais no lugar de dropdowns, a experiência de compra fica no nível de grandes marcas. O cliente vê as opções, escolhe visualmente e confere apenas as fotos relevantes.
Perguntas frequentes
O Shopify filtra a galeria por variante nativamente?
Não. O Shopify rola até a imagem vinculada à variante, mas não esconde as outras fotos. Todas continuam visíveis na galeria.
Preciso editar código Liquid para filtrar a galeria?
Não. O Rubik Variant Images funciona via App Embed. Você ativa no editor de temas e configura tudo pelo painel do app, sem tocar em código.
Quantas imagens posso vincular por variante?
Sem limite definido. O recomendado é entre 3 e 8 fotos por variante para uma galeria objetiva e informativa.
A filtragem funciona no celular?
Sim. A galeria filtra da mesma forma em desktop e mobile. No celular, a experiência melhora ainda mais porque o cliente não precisa rolar por dezenas de fotos em uma tela pequena.
Posso manter algumas imagens visíveis em todas as variantes?
Sim. Imagens como tabela de medidas ou fotos de embalagem podem ser vinculadas a todas as variantes. Elas aparecem na galeria independente da variante selecionada.
A filtragem afeta o SEO das imagens?
Não. Todas as imagens continuam no HTML da página e são indexadas normalmente. A filtragem acontece apenas visualmente via JavaScript.
Funciona com vídeos na galeria?
O Rubik Variant Images filtra as imagens da galeria. Vídeos do Shopify permanecem visíveis conforme o comportamento padrão do tema.
Leitura complementar
