Amostras de cores na página de coleção do Shopify
Você instalou um app de imagens de variantes. A página do produto ficou perfeita: swatches bonitos, galeria filtrada por variante. Mas na página de coleção, nada mudou. Os cards de produto continuam mostrando uma imagem só, sem nenhuma amostra de cor.
Isso não é um bug. Apps de imagens de variantes e amostras em páginas de coleção são coisas diferentes. Funcionam com dados diferentes, resolvem problemas diferentes e geralmente vêm de apps diferentes. Neste artigo, você entende por que são separados e como ter os dois na sua loja.
Neste artigo
- Por que são coisas diferentes
- O que o app de variantes faz (página do produto)
- O que amostras na coleção fazem
- Duas abordagens para swatches na coleção
- Como funciona o Rubik Combined Listings
- Configurando os dois
- Perguntas frequentes
- Leitura complementar
Por que são coisas diferentes
Na página do produto, o app trabalha com os dados completos do produto: todas as variantes, todas as imagens, todos os metafields. Ele tem acesso a tudo que precisa para filtrar a galeria e mostrar swatches.
Na página de coleção, o contexto é diferente. O Shopify carrega uma lista de produtos com dados resumidos. Cada card de produto tem: título, preço, imagem principal e (em alguns temas) as opções de variante. Mas não tem os metafields do app de imagens, nem o mapeamento completo de imagens por variante.
Por isso, um app que funciona perfeitamente na página do produto simplesmente não tem os dados necessários para funcionar na página de coleção. São problemas diferentes que precisam de soluções diferentes.
O que o app de variantes faz (página do produto)
O Rubik Variant Images atua na página do produto. Suas funções:
- Vincula múltiplas imagens a cada variante.
- Filtra a galeria para mostrar só as fotos da variante selecionada.
- Substitui dropdowns por swatches visuais (cor, thumbnail, pill).
- Usa metafields para velocidade (sem chamadas externas).
Tudo isso acontece quando o cliente já está na página de um produto específico. O app tem acesso ao contexto completo do produto.
O que amostras na coleção fazem
Amostras na página de coleção aparecem nos cards de produto (aquela grade com vários produtos). Cada card mostra pequenos swatches de cor. Quando o cliente clica ou passa o mouse sobre um swatch, a imagem do card muda para mostrar o produto naquela cor.
Esse recurso ajuda o cliente a explorar cores sem precisar entrar na página de cada produto. Em uma coleção com 40 camisetas, ele vê as opções de cor direto no grid. Isso acelera a navegação e aumenta o engajamento.
Para funcionar, o app de coleção precisa de dados acessíveis no contexto da lista de produtos, não do produto individual. A técnica mais usada é o Combined Listings do Shopify, que conecta produtos separados como variantes de cor.
Duas abordagens para swatches na coleção
Abordagem 1: Combined Listings. O Shopify oferece o recurso nativo de Combined Listings, que agrupa produtos individuais (cada um com sua cor) em uma listagem combinada. Um app como o Rubik Combined Listings adiciona swatches visuais a esses agrupamentos.
Abordagem 2: Theme customization. Alguns temas permitem exibir swatches de variantes nos cards de coleção via código Liquid. Essa abordagem requer edição de código e é limitada aos dados que o tema tem acesso.
A primeira abordagem (Combined Listings) é mais robusta e não depende de edição de código. É também a recomendada pelo Shopify para produtos que existem em múltiplas cores.
Como funciona o Rubik Combined Listings
O Rubik Combined Listings usa o recurso nativo de Combined Listings do Shopify e adiciona uma camada visual: swatches de cor nos cards de produto, tanto na página de coleção quanto na página do produto.
O conceito: em vez de ter um produto “Camiseta Básica” com 8 variantes de cor, você cria 8 produtos separados (Camiseta Básica Preta, Camiseta Básica Azul, etc.) e os conecta via Combined Listings. Na loja, eles aparecem como um único produto com swatches de cor.
Essa abordagem tem vantagens. Cada produto tem seu próprio URL, suas próprias imagens e seu próprio SEO. O Google indexa cada cor separadamente. E nas páginas de coleção, os swatches aparecem nos cards sem necessidade de código custom.
Configurando os dois
Para ter a experiência completa, você pode usar os dois apps juntos:
- Rubik Variant Images para a página do produto: múltiplas imagens por variante, galeria filtrada, swatches personalizados.
- Rubik Combined Listings para as páginas de coleção: swatches de cor nos cards de produto, troca de imagem no hover.
Os dois apps funcionam de forma independente. O Variant Images usa metafields do produto para a galeria. O Combined Listings usa a estrutura de Combined Listings do Shopify para os cards de coleção.
Veja também o guia de configuração de imagens de variantes e a comparação entre amostras e dropdowns.
Perguntas frequentes
Por que o Rubik Variant Images não mostra swatches na página de coleção?
Porque apps de imagens de variantes funcionam na página do produto, onde têm acesso aos dados completos do produto. Na página de coleção, o contexto de dados é diferente e requer uma abordagem específica.
O que são Combined Listings do Shopify?
É um recurso nativo do Shopify que permite agrupar produtos individuais em uma listagem combinada. Cada produto tem suas próprias imagens e URL, mas aparecem como um único produto com opções de cor na loja.
Preciso dos dois apps (Variant Images e Combined Listings)?
Depende da sua necessidade. Se você quer apenas filtragem de galeria na página do produto, o Variant Images basta. Se também quer swatches nas páginas de coleção, precisa do Combined Listings como complemento.
Os swatches na coleção afetam a velocidade da loja?
O Rubik Combined Listings é otimizado para performance. Os swatches são renderizados com dados que já carregam junto com a página de coleção, sem chamadas extras de API.
Posso ter swatches de cor no card E galeria filtrada na página do produto?
Sim. Use o Rubik Combined Listings para swatches nos cards de coleção e o Rubik Variant Images para galeria filtrada e swatches na página do produto. Os dois funcionam juntos sem conflito.
Funciona com qualquer tema do Shopify?
Sim, ambos os apps são compatíveis com temas Online Store 2.0 do Shopify, incluindo temas oficiais e de terceiros.
O Combined Listings melhora o SEO?
Sim. Como cada cor é um produto separado com seu próprio URL e imagens, o Google indexa cada variante de cor individualmente. Isso pode gerar mais tráfego orgânico comparado a um produto único com variantes.
Leitura complementar
