Amostras de cores ou dropdown no Shopify: qual escolher?
O Shopify exibe variantes como dropdown por padrão. O cliente clica, abre uma lista de nomes de cores, escolhe “Azul Petróleo” e torce para que pareça com o que imaginou. Nenhuma prévia visual. Nenhum tom de cor. Só texto.
Amostras de cores (swatches) mostram cada opção na hora. Um círculo vermelho é vermelho. Um thumbnail mostra o produto na cor vermelha. O cliente entende o que vai receber antes de clicar. Menos incerteza, mais vendas.
Mas qual a diferença real nos números? Neste artigo, comparamos os dois formatos com dados e exemplos práticos.
Neste artigo
- O problema com dropdowns
- O que as amostras fazem melhor
- Os números: 14,6% mais pedidos
- Vantagem no celular
- Menos cliques, decisão mais rápida
- Prévia visual e devoluções
- Três tipos de swatch
- Como implementar no Shopify
- Perguntas frequentes
- Leitura complementar
O problema com dropdowns
O Shopify mostra opções de variante como menus dropdown por padrão. Cor, tamanho, material, qualquer opção aparece como um campo fechado com o valor selecionado. Para ver as alternativas, o cliente precisa clicar.
Três problemas aparecem na hora. Primeiro: as opções ficam escondidas. Um visitante que chega pela primeira vez não percebe que o produto existe em 8 cores. Ele vê “Preto” no dropdown. Talvez clique, talvez não. Para produtos visuais como roupas e decoração, isso é potencial perdido.
Segundo: nenhuma referência visual. “Azul Marinho” e “Azul Escuro” parecem a mesma coisa. Qual é a diferença? O cliente só descobre quando seleciona a variante e a imagem do produto muda. Com dropdown, toda escolha de cor vira adivinhação.
Terceiro: no celular, dropdowns são especialmente ruins. O elemento select nativo abre um menu do sistema que ocupa metade da tela. Com 12 cores, o cliente rola por uma lista enorme de nomes. Não parece experiência de compra.
O que as amostras fazem melhor
Amostras de cores substituem o dropdown por elementos visuais. Círculos pequenos com a cor real. Ou thumbnails com uma foto do produto. Ou botões pill com texto. O ponto central: tudo fica visível na hora.
O cliente chega na página do produto e vê 8 círculos de cor lado a lado. Percebe na hora quantas cores existem. Compara Azul Marinho com Azul Escuro visualmente. Clica na que interessa e a galeria atualiza. Leva segundos, não meio minuto fuçando em dropdown.
Marcas grandes como Nike, Zara e Renner usam swatches há anos. Nenhuma delas usa dropdown para seleção de cor. E isso tem motivo.
Os números: 14,6% mais pedidos
O MECLABS, instituto de pesquisa em otimização de conversão, realizou um teste A/B. Resultado: páginas de produto com opções visuais de seleção (swatches, prévias de produto) geraram 14,6% mais pedidos que páginas com dropdowns de texto. Mesmos produtos. Mesmo preço. Mesmo tráfego. Só a apresentação das opções era diferente.
Por que funciona? Dois fatores. Primeiro: carga cognitiva reduzida. O cérebro processa imagens 60.000 vezes mais rápido que texto. O cliente não precisa converter “Azul Petróleo” em um tom na cabeça. Ele vê o tom direto. Segundo: menos cliques até a decisão de compra. Cada clique extra é uma oportunidade de desistir.
14,6% parece pouco. Multiplique pelo seu faturamento. Em R$ 100.000 de faturamento mensal, são R$ 14.600 a mais. Todo mês. Por uma mudança que leva 10 minutos.
Vantagem no celular
Mais de 70% do tráfego no Shopify vem de dispositivos móveis. Em uma tela de 6 polegadas, cada interação custa mais. Abrir um dropdown, rolar, encontrar a opção, selecionar, o menu fecha, a imagem carrega. São 4 a 5 passos para uma única seleção de cor.
Amostras de cores precisam de um passo: tocar. A cor muda na hora. Sem overlay, sem scroll, sem menu do sistema. Para produtos com muitas opções, a economia de tempo é perceptível.
Além disso, swatches mostram na hora quantas opções existem. O cliente vê 8 círculos e sabe: tem variedade. Com dropdown, ele vê “Preto” e precisa clicar para descobrir as outras 7 cores. Muitos não fazem isso.
Menos cliques, decisão mais rápida
No e-commerce, cada clique conta. Não porque cliques sejam ruins, mas porque cada clique é uma decisão. E cada decisão é uma chance de abandonar.
Com dropdown, o cliente precisa de 3 cliques para trocar de cor: abrir o dropdown, selecionar a opção, confirmar (em alguns dispositivos). Com swatch: 1 clique. Em um produto com 3 opções (cor, tamanho, material), isso economiza até 6 cliques por configuração.
Mais importante: swatches permitem comparação visual. O cliente pode olhar entre Vermelho e Bordô sem disparar nenhuma interação. Com dropdown, ele precisa abrir e fechar o menu para cada comparação.
Prévia visual e devoluções
22% das devoluções online acontecem porque o produto “não parecia assim”. Os motivos mais comuns: cor diferente, material com aspecto diferente, estampa não corresponde.
Amostras de cores ajudam nos dois primeiros pontos. Um círculo de cor com o tom real mostra ao cliente exatamente o que vai receber. Melhor ainda: thumbnails do produto como swatches. O cliente vê direto como a variante vermelha fica no produto antes de selecionar.
Combinado com galeria filtrada por variante (só fotos da variante selecionada), o cliente tem uma visão completa. Frente, costas, detalhe, ambientação. Menos surpresas na entrega. Menos devoluções significam margem maior por pedido.
Três tipos de swatch
Nem todo tipo de swatch serve para toda opção. Aqui vão os três formatos mais usados:
Swatches de cor. Círculos ou quadrados com uma cor sólida. Ideais para opções em que a cor é clara: vermelho, azul, preto, branco. Menos indicados para estampas ou designs multicoloridos.
Swatches de imagem. Thumbnails com uma foto do produto na variante. Perfeitos para roupas, móveis e tudo onde o corte ou a estampa muda conforme a cor. O cliente vê o produto, não só a cor.
Botões pill. Retângulos arredondados com texto. Funcionam para tamanho (P, M, G, GG), material (algodão, linho, seda) e opções que não têm representação visual.
A melhor solução: tipos diferentes por opção. Círculos de cor para “Cor”, pills para “Tamanho”, thumbnails para “Design”. O Rubik Variant Images suporta tipos mistos por produto e filtra a galeria ao mesmo tempo.
Como implementar no Shopify
O Shopify não entrega amostras de cores prontas. O tema Dawn mostra dropdown ou botões pill, mas não círculos de cor nem thumbnails. Para swatches visuais de verdade, você precisa de um app.
Rubik Variant Images substitui o dropdown padrão por amostras visuais e filtra a galeria por variante ao mesmo tempo. A configuração é rápida:
- Instale o app e ative o App Embed no editor de temas.
- Escolha o tipo de swatch para cada opção (cor, tamanho, material).
- Vincule as imagens. De 3 a 10 fotos por variante. Ou use o recurso de Auto-Assign com IA.
- Salve e teste. A galeria filtra na hora ao trocar de variante.
Para amostras de cores em páginas de coleção (swatches nos cards de produto), use o Rubik Combined Listings. Saiba mais sobre amostras na página de coleção.
Perguntas frequentes
O Shopify mostra amostras de cores sem app?
De forma limitada. Alguns temas mostram botões pill para opções, mas não exibem círculos de cor nem thumbnails de produto. Para swatches visuais com filtragem de galeria, é necessário um app como o Rubik Variant Images.
Qual a diferença de conversão entre swatches e dropdowns?
O MECLABS mediu 14,6% mais pedidos em páginas com opções visuais comparado a dropdowns de texto. A diferença é maior em produtos com muitas cores e no acesso mobile.
Amostras de cores deixam a loja mais lenta?
Não com o Rubik. Os dados dos swatches ficam em metafields do Shopify e carregam junto com a página. Sem chamadas externas de API. O Shadow DOM evita conflitos de CSS.
Posso usar tipos diferentes de swatch por opção?
Sim. Com o Rubik Variant Images, você pode usar círculos de cor para a opção “Cor”, botões pill para “Tamanho” e thumbnails para “Estampa”, tudo no mesmo produto.
E as amostras na página de coleção?
O Rubik Variant Images funciona na página do produto. Para swatches nos cards de coleção, use o Rubik Combined Listings, um app separado que conecta produtos com amostras visuais.
Funciona com temas de terceiros?
Sim. O app é compatível com todos os temas Online Store 2.0 do Shopify, tanto os oficiais quanto os de terceiros.
Preciso configurar cada produto manualmente?
Não necessariamente. O recurso de Auto-Assign com IA vincula imagens automaticamente às variantes. Para os swatches de cor, basta configurar uma vez por valor de opção e o app aplica em todos os produtos.
Leitura complementar
