> ## 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).

# 🚀 Cómo personalizar los colores del Widget

> ℹ️ **Note:** Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.

El picador de ranura debe sentir como una parte natural de su tienda - y el color es la manera más rápida de hacer que suceda 🎨

Con el **App Widget Colores** Ajustes Hoppy Delivery Dates, usted puede coincidir con los botones del selector, los aspectos más destacados y el texto a su tema - por separado para Desktop y Mobile.

---

# **📌 Antes de empezar**

*   Hoppy Delivery Dates está instalado y la aplicación embed está habilitada en su tema
*   El recolector de ranura es visible en su página del carrito
*   Estás conectado a tu Shopify admin

---

# **Paso 1 - Abra la página de Apariencia**

En la navegación de la aplicación, vaya a:

**Hoppy Delivery Dates → Aspecto**

Encontrar el **App Widget Colores** tarjeta.

La tarjeta tiene **Escritorio** y **Móvil** pestañas — los colores se configuran por separado para cada dispositivo.

---

# **Paso 2 - Comprender los cuatro ajustes de color**

Hay cuatro colores con los que trabajar:

*   **Color primario** → el color de acento principal. Usado para cosas como estados seleccionados, botones, y la barra superior del selector
*   **Color secundario** → el color de fondo utilizado detrás de elementos de picker
*   **Color de fuente primaria** → el color del texto utilizado en los fondos secundarios/luz
*   **Color de fuente secundario** → el color de texto utilizado en los fondos primario/accent

### **Colores predeterminados**

*   Color primario → `#3D3D3D` ( gris oscuro)
*   Color secundario → `#ffffff` (blanco)
*   Color de fuente principal → `#3D3D3D`
*   Color de fuente secundario → `#ffffff`

---

# **Paso 3 - Establecer sus colores**

Cada color tiene dos maneras de establecerlo:

*   Escriba un código hex directamente en el campo de texto (por ejemplo. `#1a73e8`)
*   O haga clic en **reloj de color** junto al campo para abrir el selector de color y elegir visualmente 🌈

Ambos se quedan en sincronía: escoger del swatch actualiza el campo de hex y escribir un hex actualiza el swatch.

### **Ejemplo**

*   Color primario → `#2c6ecb` (el botón de tu tema azul)
*   Color secundario → `#ffffff`
*   Color de fuente principal → `#212121`
*   Color de fuente secundario → `#ffffff`

💡 La forma más fácil de conseguir un partido perfecto: copiar el código hex del color del botón de tu tema desde **Tienda online → Temas → Personalizar → Configuración temática → Colores**.

---

# **Paso 4 - Repetición para móvil (opcional)**

Cambiar a la **Móvil** ficha y establece los colores allí también si quieres una mirada diferente en las pantallas más pequeñas. Si no, configure ambas pestañas con los mismos valores para una apariencia consistente.

---

# **Paso 5 - Guardar y revisar**

Haga clic **Guardar** en la parte superior de la página.

Utilice el panel de vista previa en el lado derecho de la página de Apariencia para un cheque rápido, a continuación, abrir su página del carrito para ver los colores en vivo 👀

---

# **⚠️ Notas importantes**

⚠️ Asegúrese de que sus colores de fuentes contrastan bien con sus antecedentes — texto ligero en un fondo ligero será difícil para los clientes leer.

ℹ️ Los colores de escritorio y móviles son independientes — recuerde comprobar ambas pestañas después de guardar.

---

# **🎉 Resultado final**

Una vez configurado con éxito:

✅ El buscador de tragaperras coincide con los colores de tu tema ✅ Botones, relieves y texto todos utilizan su paleta elegida ✅ Escritorio y Móvil cada uno mira exactamente la manera que desea ✨