> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🚀 Como Personalizar as Cores do Widget

> ℹ️ **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 ✨