Como personalizar amostras de cores no Shopify
Você instalou um app de amostras de cores e os swatches apareceram. Funcionam. Mas são círculos genéricos que não combinam com o visual da sua loja. A fonte é diferente, o tamanho destoa, as bordas não seguem o padrão do tema. Parece um elemento colado de outro site.
Personalizar as amostras faz diferença. Swatches que combinam com o tema transmitem profissionalismo. O cliente nem percebe que são gerados por um app. Neste artigo, você aprende como ajustar formato, tamanho, bordas e estilo dos swatches na sua loja Shopify.
Neste artigo
- Formatos de swatch disponíveis
- Ajustando o tamanho
- Bordas e indicador de seleção
- Definindo cores com código hexadecimal
- Usando thumbnails como swatches
- Tipos mistos por opção
- Tooltip ao passar o mouse
- Variantes esgotadas
- Perguntas frequentes
- Leitura complementar
Formatos de swatch disponíveis
O Rubik Variant Images oferece três formatos de swatch. Cada um serve para um tipo de opção:
Círculos de cor. O formato mais popular para opções de cor. Um círculo preenchido com a cor sólida ou com uma imagem de textura. Funciona bem quando as cores são distintas e fáceis de identificar visualmente.
Thumbnails de produto. Miniaturas com a foto do produto na variante correspondente. Ideais para roupas, bolsas e produtos onde o visual muda significativamente entre variantes. O cliente vê o produto, não só a cor.
Botões pill. Retângulos arredondados com texto. Perfeitos para tamanho (P, M, G, GG), material (algodão, poliéster) e qualquer opção que não tem representação visual.
A escolha do formato depende do tipo de opção. Um produto pode usar círculos para cor e pills para tamanho ao mesmo tempo. Veja mais sobre tipos mistos de swatch.
Ajustando o tamanho
O tamanho padrão dos swatches funciona para a maioria dos temas. Mas se os elementos ficam grandes demais ou pequenos demais no contexto da sua página, você pode ajustar.
No painel de configuração do Rubik Variant Images, o campo de tamanho controla o diâmetro dos círculos e a altura dos botões pill. O valor é em pixels. Para telas mobile, o app ajusta proporcionalmente.
Uma boa referência: swatches entre 28px e 40px funcionam bem na maioria dos layouts. Abaixo de 24px ficam difíceis de tocar no celular. Acima de 48px dominam a seção de opções e tiram a atenção das imagens do produto.
Bordas e indicador de seleção
O cliente precisa saber qual swatch está selecionado. O indicador padrão é uma borda mais escura ao redor do swatch ativo. Você pode personalizar a cor e espessura dessa borda.
Para swatches de cor clara (branco, bege, creme), uma borda sutil em cinza claro evita que o swatch “desapareça” no fundo da página. Sem essa borda, um swatch branco em fundo branco fica invisível.
O estado de hover (quando o mouse passa por cima) também pode ter um estilo diferente. Uma sombra leve ou uma mudança sutil de opacidade indicam ao cliente que o elemento é clicável.
Definindo cores com código hexadecimal
Para swatches de cor sólida, você define a cor usando o código hexadecimal. “Azul Marinho” pode ser #1B3A5C. “Vermelho” pode ser #CC0000. O app aceita qualquer código hex válido.
Dica: use a cor real do produto, não uma aproximação genérica. Se o “Azul Petróleo” do seu produto é #1A5276, use esse código. O cliente vai comparar o swatch com a foto e espera que batam. Uma cor genérica pode gerar confusão e devoluções.
Para cores com textura (mármoreado, tie-dye, xadrez), use uma imagem de amostra no lugar do código hex. Suba uma imagem pequena com o padrão e defina como swatch de imagem para aquele valor.
Usando thumbnails como swatches
Thumbnails são poderosos porque mostram o produto real. Em vez de um círculo azul, o cliente vê uma miniatura da camiseta azul. Isso reduz incerteza e acelera a decisão.
O Rubik Variant Images gera thumbnails automaticamente a partir da primeira imagem vinculada a cada variante. Se a primeira foto da variante “Azul” é a camiseta azul de frente, esse será o thumbnail do swatch.
Para melhores resultados, use a foto mais representativa como primeira imagem de cada variante. Uma foto de frente com fundo limpo funciona melhor que uma foto de detalhe ou ambientação.
Tipos mistos por opção
O Rubik permite configurar tipos diferentes de swatch para cada opção do produto. Um exemplo prático: um produto com opções de Cor, Tamanho e Material pode ter círculos de cor para Cor, pills para Tamanho e pills para Material. Tudo no mesmo produto, na mesma página.
Essa flexibilidade é importante porque nem toda opção faz sentido como swatch visual. “Tamanho G” não tem cor. “Algodão” não tem imagem. Usar o formato certo para cada opção deixa a interface limpa e intuitiva.
Tooltip ao passar o mouse
Swatches de cor são visuais, mas nem sempre o nome é óbvio. “Azul Petróleo” e “Azul Marinho” podem parecer similares no swatch. Um tooltip que aparece ao passar o mouse resolve: o cliente vê o nome da cor sem precisar clicar.
No mobile, o tooltip aparece ao manter o dedo pressionado. É um detalhe pequeno que reduz incerteza e melhora a experiência de navegação.
Variantes esgotadas
O que acontece com o swatch quando a variante está esgotada? O Rubik oferece opções: ocultar o swatch, mostrar com um risco diagonal, ou mostrar com opacidade reduzida. A escolha depende da sua estratégia.
Se você aceita pré-encomendas, manter o swatch visível (com indicação de “esgotado”) faz sentido. Se o produto não vai voltar ao estoque, ocultar o swatch evita frustração. Saiba mais sobre como lidar com swatches de variantes esgotadas.
Perguntas frequentes
Posso mudar o formato dos swatches de círculo para quadrado?
Sim. O Rubik Variant Images permite escolher entre círculos e quadrados (com bordas arredondadas) nas configurações do app.
Como defino a cor exata do meu produto no swatch?
Use o código hexadecimal da cor real do produto. No painel do app, insira o hex code no campo de cor do swatch correspondente. Use ferramentas como o conta-gotas do navegador para capturar a cor diretamente da foto.
Os swatches funcionam em temas de terceiros?
Sim. O Rubik renderiza os swatches via Shadow DOM, o que evita conflitos de CSS com qualquer tema Online Store 2.0.
Posso usar imagem de textura como swatch?
Sim. Para padrões como xadrez, listrado ou tie-dye, suba uma imagem pequena com o padrão e defina-a como swatch de imagem no painel do app.
O que acontece com swatches de variantes esgotadas?
Você escolhe: ocultar, mostrar com risco diagonal ou mostrar com opacidade reduzida. A configuração fica nas opções do app.
Os swatches aparecem na página de coleção?
O Rubik Variant Images mostra swatches na página do produto. Para amostras na página de coleção, use o Rubik Combined Listings.
Preciso de conhecimento em CSS para personalizar?
Não. O painel do app oferece opções visuais para formato, tamanho, cor de borda e estilo. Para personalizações avançadas, CSS customizado é possível, mas não obrigatório.
Leitura complementar
