ℹ️ Note: Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte.

O caça-níqueis deve se sentir como uma parte natural de sua loja — e cor é a maneira mais rápida de fazer isso acontecer 🎨

Com o Cores do Widget da Aplicação configurações em Hoppy Delivery Dates, você pode combinar os botões, destaques e texto do seletor para o seu tema — separadamente para Desktop e Mobile.

📌 Antes de começar

• Hoppy Delivery Dates está instalado e o aplicativo embed está habilitado em seu tema
• O caça-níqueis está visível na página do seu Carrinho
• Estás ligado ao teu Shopify administrador

Passo 1 — Abra a Página de Aparência

Na navegação do aplicativo, acesse:

Hoppy Delivery Dates → Aparência

Encontrar o Cores do Widget da Aplicação Cartão.

O cartão tem Área de trabalho e Telemóvel tabs — as cores são configuradas separadamente para cada dispositivo.

Passo 2 — Entenda as quatro configurações de cores

Há quatro cores para trabalhar com:

• Cor primária → a cor do sotaque principal. Usado para coisas como estados selecionados, botões e a barra superior do seletor
• Cor secundária → a cor de fundo usada por trás dos elementos do coletor
• Cor da fonte primária → a cor do texto usado em fundos secundários / luz
• Cor da fonte secundária → a cor de texto usada em fundos primários/accentes

Cores padrão

• Cor primária → #3D3D3D (cinzento escuro)
• Cor secundária → #ffffff (branco)
• Cor da fonte primária → #3D3D3D
• Cor da fonte secundária → #ffffff

Passo 3 — Defina Suas Cores

Cada cor tem duas maneiras de definir:

• Digite um código hex diretamente no campo de texto (por exemplo: #1a73e8)
• Ou clique no swatch de cores ao lado do campo para abrir o coletor de cores e escolher visualmente 🌈

Ambos permanecem em sincronia — escolher do swatch atualiza o campo hex e digitar um hex atualiza o swatch.

Exemplo

• Cor primária → #2c6ecb (botão do teu tema azul)
• Cor secundária → #ffffff
• Cor da fonte primária → #212121
• Cor da fonte secundária → #ffffff

💡 A maneira mais fácil de obter uma combinação perfeita: copiar o código hexadecimal da cor do botão do seu tema Loja online → Temas → Personalizar → Configurações do tema → Cores.

Passo 4 – Repetir para celular (Opcional)

Mudar para o Telemóvel aba e definir cores lá também se você quiser um olhar diferente em telas menores. Caso contrário, configure ambas as abas com os mesmos valores para uma aparência consistente.

Passo 5 — Salvar e Recapitular

Clique Gravar no topo da página.

Use o painel de visualização do lado direito da página Aparência para uma verificação rápida, em seguida, abra a página Carrinho para ver as cores ao vivo 👀

⚠️ Notas Importantes

⚠️ Certifique-se de que suas cores da fonte contrastam bem com seus fundos — texto claro em um fundo claro será difícil para os clientes lerem.

ℹ️ As cores Desktop e Mobile são independentes — lembre-se de verificar ambas as abas após salvar.

🎉 Resultado Final

Uma vez configurado com sucesso:

✅ O seletor de fendas corresponde às cores do seu tema ✅ Botões, destaques e texto todos usam sua paleta escolhida ✅ Desktop e Mobile cada olhar exatamente como você quer ✨

Actualizado em: 10/09/2026