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

Actualizado el: 10/09/2026