Personalizar o Tema do Widget de Garantia na PDP

Use este guia quando os temas padrão estão perto, mas não chegam lá. Cada exemplo abaixo traz um conjunto de CSS personalizado pronto para colar.

A forma mais rápida é copiar um dos temas de exemplo, colar na sua ferramenta de IA favorita e pedir ajustes como “Deixe menos arredondado, a cor primária deve ser roxa.”

Primeiros Passos

1. No painel do Shopify, vá em Loja Virtual > Temas.
2. Clique em Personalizar no tema que deseja editar.
3. Abra um template de produto.
4. Adicione o bloco Seleção de Garantia PDP perto do formulário do produto.
5. Salve as alterações.
6. Pré-visualize a página do produto e confirme que as opções de garantia aparecem onde você espera.

Melhor caminho de início rápido: escolha primeiro um dos temas integrados, depois use variáveis CSS personalizadas somente se quiser mais controle.

Referência de Configurações

Tema

Escolha um dos presets integrados. Padrão: Minimal.

• Minimal
• Ambar
• Dark
• Brand Colors
• Mint
• Ocean
• Caramel Latte
• Valentine
• Retro

Brand Colors puxa automaticamente os valores de cor do seu tema Shopify. Ele lê variáveis do tema como --color-accent-1, --color-accent-2, --color-background e --color-foreground. Não é necessário colar esses valores nas variáveis CSS personalizadas.

Arredondamento

Controla o estilo geral dos cantos do widget. Padrão: 12px. Essa configuração alimenta automaticamente os valores de raio de cartão, opção, cobertura e badge do widget.

Exibir badge ‘Mais Popular’

Exibe ou oculta o badge Mais Popular nas opções já marcadas como mais populares nos dados do seu plano de garantia. Padrão: ativado. Se essa opção estiver ativa mas nenhuma opção estiver marcada como mais popular, o badge não aparecerá.

Descrição da garantia

Controla o texto descritivo exibido abaixo do cabeçalho do widget. Padrão: Estenda sua garantia e desfrute de tranquilidade com cobertura abrangente.

Exibir benefícios

Exibe ou oculta a área de benefícios para cada opção. Padrão: ativado. Quando ativado, os clientes podem ver os detalhes de cobertura dos planos selecionados.

Título dos benefícios

Controla o texto do título exibido acima da lista de benefícios. Padrão: O que está Coberto?.

Estilo da lista de benefícios

Controla como cada benefício é exibido. Padrão: Marcas de verificação.

• Marcas de verificação
• Pontos
• Traços

Exibir badge ‘Oferta Especial’

Exibe ou oculta o badge superior no cabeçalho do widget. Padrão: ativado.

Texto do badge Oferta Especial

Controla o texto exibido dentro do badge Oferta Especial. Padrão: Oferta Especial.

Variáveis CSS personalizadas

Use este campo para estilização avançada. Insira apenas declarações de variáveis CSS separadas por ponto e vírgula. Blocos CSS completos não são suportados.

--cv-primary: #0f766e; --cv-border: #99f6e4; --cv-badge-special-bg: #0f766e;

Importante:

• Use apenas variáveis --cv-* neste campo.
• Não cole seletores CSS completos ou blocos de regras.
• Nomes não suportados são ignorados.

Exemplos de Personalização

Terracotta Warmth

& {
  --cv-primary: #c2410c;
  --cv-border: #f97316;
  --cv-border-muted: #fdba74;
  --cv-background: #fffbf5;
  --cv-background-gradient: linear-gradient(180deg, #fffbf5 0%, #ffedd5 60%, #fed7aa 100%);
  --cv-card-shadow: 0 10px 18px -8px rgb(140 60 10 / 0.18), 0 4px 8px -6px rgb(140 60 10 / 0.1);
  --cv-icon: #ea580c;
  --cv-text: #431407;
  --cv-muted-text: #9a3412;
  --cv-option-hover-border: #fb923c;
  --cv-option-selected-bg: #ffedd5;
  --cv-option-selected-shadow: 0 0 0 2px #fdba74, 0 6px 10px -6px rgb(140 60 10 / 0.2);
  --cv-option-title: #431407;
  --cv-option-title-selected: #c2410c;
  --cv-price: #431407;
  --cv-price-selected: #ea580c;
  --cv-badge-special-bg: #ea580c;
  --cv-badge-special-text: #fff7ed;
  --cv-badge-popular-bg: #fff7ed;
  --cv-badge-popular-text: #c2410c;
  --cv-badge-popular-border: #fdba74;
  --cv-coverage-bg: #fed7aa;
  --cv-coverage-title: #c2410c;
  --cv-coverage-text: #431407;
  --cv-coverage-icon: #ea580c;
  --cv-footer-text: #9a3412;
  --cv-footer-brand: #ea580c;
  --cv-radio-accent: #ea580c;
  --cv-radius-card: 18px;
  --cv-radius-option: 12px;
  --cv-radius-badge: 999px;
  --cv-radius-coverage: 8px;
}

Conversion Pop

& {
  --cv-primary: #7c3aed;
  --cv-primary-contrast: #ffffff;
  --cv-border: #a78bfa;
  --cv-border-muted: #c4b5fd;
  --cv-background: #faf5ff;
  --cv-background-gradient: linear-gradient(160deg, #ede9fe 0%, #ddd6fe 40%, #f5f3ff 95%);
  --cv-card-shadow: 0 12px 20px -8px rgb(60 20 120 / 0.22), 0 4px 8px -6px rgb(60 20 120 / 0.12);
  --cv-icon: #7c3aed;
  --cv-text: #2e1065;
  --cv-muted-text: #5b21b6;
  --cv-option-hover-border: #a78bfa;
  --cv-option-selected-bg: #ede9fe;
  --cv-option-selected-shadow: 0 0 0 2px #c4b5fd, 0 6px 10px -6px rgb(60 20 120 / 0.2);
  --cv-option-title: #2e1065;
  --cv-option-title-selected: #6d28d9;
  --cv-price: #2e1065;
  --cv-price-selected: #7c3aed;
  --cv-badge-special-bg: #6d28d9;
  --cv-badge-special-text: #f5f3ff;
  --cv-badge-popular-bg: #ede9fe;
  --cv-badge-popular-text: #5b21b6;
  --cv-badge-popular-border: #c4b5fd;
  --cv-coverage-bg: #ddd6fe;
  --cv-coverage-title: #2e1065;
  --cv-coverage-text: #3b0764;
  --cv-coverage-icon: #7c3aed;
  --cv-footer-text: #5b21b6;
  --cv-footer-brand: #7c3aed;
  --cv-radio-accent: #7c3aed;
  --cv-radius-card: 0px;
  --cv-radius-option: 0px;
  --cv-radius-badge: 999px;
  --cv-radius-coverage: 0px;
}

Minimal / Neutro

Use se quiser um visual mais limpo e de baixo contraste.

--cv-border: #e5e7eb;
--cv-border-muted: #e5e7eb;
--cv-background: #ffffff;
--cv-background-gradient: #ffffff;
--cv-card-shadow: 0 8px 20px -12px rgb(15 23 42 / 0.2);
--cv-primary: #111111;
--cv-icon: #111111;
--cv-text: #0f172a;
--cv-muted-text: #64748b;
--cv-option-hover-border: #111111;
--cv-option-selected-bg: #f8fafc;
--cv-option-selected-shadow: 0 0 0 1px #e2e8f0, 0 10px 16px -12px rgb(15 23 42 / 0.25);
--cv-option-title: #0f172a;
--cv-option-title-selected: #111111;
--cv-price: #0f172a;
--cv-price-selected: #111111;
--cv-badge-special-bg: #111111;
--cv-badge-special-text: #ffffff;
--cv-coverage-bg: #f3f4f6;
--cv-coverage-title: #111111;
--cv-coverage-text: #111111;
--cv-coverage-icon: #111111;
--cv-footer-text: #475569;
--cv-footer-brand: #111111;
--cv-radio-accent: #111111;

Dark / Alto Contraste

Use se sua loja utiliza um design de página de produto escuro.

--cv-border: #374151;
--cv-border-muted: #1f2937;
--cv-background: #0f172a;
--cv-background-gradient: linear-gradient(135deg, #111827 0%, #0f172a 65%);
--cv-card-shadow: 0 10px 20px -10px rgb(0 0 0 / 0.6);
--cv-primary: #fbbf24;
--cv-icon: #fbbf24;
--cv-text: #f9fafb;
--cv-muted-text: #9ca3af;
--cv-option-hover-border: #4b5563;
--cv-option-selected-bg: #1f2937;
--cv-option-selected-shadow: 0 0 0 2px #374151, 0 10px 16px -12px rgb(0 0 0 / 0.7);
--cv-option-title: #f9fafb;
--cv-option-title-selected: #fef3c7;
--cv-price: #f9fafb;
--cv-price-selected: #fbbf24;
--cv-badge-special-bg: #fbbf24;
--cv-badge-special-text: #111827;
--cv-coverage-bg: #111827;
--cv-coverage-title: #e5e7eb;
--cv-coverage-text: #cbd5f5;
--cv-coverage-icon: #fbbf24;
--cv-footer-text: #9ca3af;
--cv-footer-brand: #fbbf24;
--cv-radio-accent: #fbbf24;

Alinhado à Marca

Use primeiro o tema Brand Colors, depois adicione algumas substituições se quiser maior ênfase ou cantos mais suaves.

--cv-option-selected-shadow: 0 0 0 2px #fdba74, 0 8px 12px -10px rgb(154 52 18 / 0.2);
--cv-badge-popular-bg: #fff7ed;
--cv-badge-popular-text: #9a3412;
--cv-badge-popular-border: #fdba74;
--cv-radius-card: 18px;
--cv-radius-option: 14px;
--cv-radius-coverage: 10px;
--cv-radius-badge: 999px;

Se quiser controle total em vez de cores baseadas no tema, saia do Brand Colors e defina os valores --cv-* relevantes diretamente.

Referência de Variáveis CSS

Paleta Principal e Superfície

Estados de Opção

Badges

Seção de Cobertura

Rodapé

Tipografia e Substituições Avançadas

Substituições de Raio

Observações

• --cv-radius é definido internamente pela configuração de Arredondamento, mas os estilos atuais do widget usam as variáveis de raio mais específicas listadas acima.
• --cv-primary-contrast existe no mapeamento de temas, mas atualmente não altera os estilos visíveis do widget por si só.

Solução de Problemas

Minhas alterações não estão sendo aplicadas

Verifique primeiro:

• Confirme que colou os valores em Variáveis CSS personalizadas.
• Confirme que cada entrada começa com --cv-.
• Confirme que as declarações estão separadas por ponto e vírgula.
• Remova qualquer seletor como .class { ... } — o campo aceita apenas variáveis.

O badge Mais Popular não aparece

Ambas as condições devem ser verdadeiras:

• Exibir badge ‘Mais Popular’ está ativado.
• Pelo menos uma opção de garantia está marcada como most_popular nos dados do seu plano de garantia.

Os benefícios não aparecem

Verifique primeiro:

• Exibir benefícios está ativado.
• A opção de garantia selecionada inclui dados de benefícios.
• Título dos benefícios e Estilo da lista de benefícios estão configurados conforme esperado.

O tema Brand Colors não parece diferente

O preset Brand Colors depende de variáveis de cor já disponíveis no seu tema Shopify. Se o seu tema não expõe valores fortes para essas cores, o widget pode parecer similar a um estilo neutro. Tente:

• Mudar para outro tema integrado.
• Adicionar substituições explícitas de --cv-* em Variáveis CSS personalizadas.

As alterações de arredondamento são muito sutis

O arredondamento atualiza múltiplos valores de raio internos de uma vez. Se quiser mais controle, substitua --cv-radius-card, --cv-radius-option, --cv-radius-coverage e --cv-radius-badge individualmente.

Comece com um preset de tema integrado, depois adicione variáveis CSS personalizadas apenas onde precisar. Isso proporciona a configuração mais rápida e a manutenção mais fácil.