Mostrar variantes como produtos separados na colecao

Mostrar variantes como produtos separados na colecao
Mostrar variantes como produtos separados na colecao do Shopify com swatches de cor

Uma bolsa vendida em 5 cores. Na pagina de colecao do Shopify, aparece apenas um card. O cliente rola a pagina, ve um unico card com a foto da cor padrao. Nao sabe que existem mais 4 cores. Precisa entrar na pagina do produto para descobrir.

Muitos lojistas querem que cada cor apareca de forma visivel na colecao. Ou como cards separados, ou como swatches dentro do card. Este artigo mostra as duas abordagens, como configurar cada uma e qual funciona melhor para diferentes cenarios.

Neste artigo

O problema: variantes invisiveis na colecao

O Shopify trabalha no nivel do produto na pagina de colecao. Se um produto tem 10 variantes de cor, a colecao mostra um unico card. Normalmente com a primeira imagem. O cliente so descobre as outras cores se clicar no card e entrar na pagina do produto.

Isso e especialmente problematico em categorias onde a cor e o fator principal de decisao. Moda, acessorios, decoracao, capas de celular. O cliente navega visualmente. Se nao ve a cor que quer, sai.

Nao e um bug. E como o Shopify funciona. A solucao e estrutural: criar cada cor como produto separado e depois conectar tudo com combined listings.

Abordagem 1: cada cor como card separado

Cada cor e um produto separado no Shopify. Todos sao adicionados a colecao. 5 cores = 5 cards.

Vantagens:

  • Cada cor tem sua propria imagem e titulo no card.
  • Filtros funcionam corretamente. “Azul” mostra apenas produtos azuis.
  • Cada cor tem vantagens de SEO com URL propria.

Desvantagem: muitos cards na pagina. 10 modelos x 5 cores = 50 cards. Pode ficar confuso para o cliente. E os produtos nao mostram que pertencem ao mesmo grupo.

Abordagem 2: card unico com swatches

Um card na colecao para cada modelo. Embaixo (ou em cima) do card, pequenos swatches de cor. O cliente clica em um swatch e vai para a pagina daquela cor. Ao passar o mouse, a imagem do card muda.

Essa abordagem mantem a colecao limpa. 10 modelos = 10 cards + swatches. O cliente ve todas as opcoes sem poluicao visual.

Rubik Combined Listings suporta as duas abordagens. Voce agrupa produtos separados e define como eles aparecem na colecao. Ambas usam produtos separados como base, entao o beneficio de SEO e o mesmo.

Como configurar

Quatro passos:

  1. Crie os produtos. Cada cor como produto separado no Shopify. Dentro de cada produto, tamanhos podem ser variantes.
  2. Instale o Rubik Combined Listings e ative o app embed no editor de temas.
  3. Agrupe. Crie um grupo manualmente ou use o agrupamento em massa para agrupar por padrao de titulo.
  4. Escolha o preset de colecao. 8 presets disponiveis. Defina posicao, tamanho e estilo dos swatches.

Passo a passo completo: combined listings setup guide.

Presets de exibicao na colecao

O Rubik oferece 8 presets de layout para swatches na colecao:

  • Embaixo do card (padrao)
  • Em cima do card
  • Sobre a imagem (overlay)
  • Visivel apenas no hover

Swatches podem ser circulos de cor, quadrados, imagens em miniatura ou texto. Mais de 70 opcoes de personalizacao. Guia completo: como personalizar swatches.

Ao passar o mouse em um swatch, a imagem do card muda para mostrar aquela cor. O cliente ve o resultado antes de clicar.

Filtros de colecao e cores

Filtros do Shopify tem um problema com variantes de cor. O cliente filtra por “Azul”. O Shopify mostra produtos que tem variante azul. Mas o card pode exibir a imagem da cor padrao (preta, por exemplo). Porque o filtro funciona no nivel do produto, nao da variante.

Com combined listings, cores sao produtos separados. Filtrar por “Azul” mostra apenas produtos azuis, com imagens azuis. Sem confusao. Mais detalhes: combined listings e filtros de colecao.

Impacto no SEO

A forma como as cores aparecem na colecao nao afeta o SEO diretamente. O que afeta e a estrutura: cada cor como produto separado com URL, title tag e schema proprios.

Google Shopping mostra cada cor como item individual no feed. “Bolsa Vermelha” aparece com foto vermelha. “Bolsa Azul” com foto azul. Cliques mais qualificados.

Para filtrar imagens de variantes dentro de um produto (ex: mostrar somente fotos do tamanho selecionado), use o Rubik Variant Images.

Video

Veja como swatches aparecem na colecao:

Perguntas frequentes

O Shopify mostra variantes como cards separados na colecao?

Nao. O Shopify mostra um card por produto na colecao. Para que cada cor apareca separadamente, voce precisa criar produtos separados e agrupa-los com combined listings.

Os swatches funcionam em qualquer tema?

Sim. Rubik Combined Listings usa o sistema de app embed do Shopify. Compativel com todos os temas Online Store 2.0, incluindo Dawn, Sense, Craft e outros.

A imagem do card muda ao passar o mouse no swatch?

Sim. Ao passar o mouse sobre um swatch na colecao, a imagem do card muda para a imagem do produto daquela cor. O cliente pre-visualiza o resultado.

Posso limitar quantos swatches aparecem no card?

Sim. Voce pode definir um maximo e exibir “+3 mais” quando houver mais cores do que o limite.

Preciso do Shopify Plus?

Nao. Rubik Combined Listings funciona em qualquer plano. Free ($0, 5 grupos), Starter ($10/mes, 100 grupos), Advanced ($30/mes, 500 grupos), Premium ($50/mes, 5.000 grupos).

Posso usar agrupamento em massa para criar os grupos?

Sim. O app analisa os titulos dos produtos e detecta padroes. “Bolsa Couro – Preta” e “Bolsa Couro – Vermelha” sao agrupadas automaticamente. Detalhes: agrupamento em massa.

Leitura relacionada