Plantillas del storefront
La sección Storefront Templates le permite controlar cómo aparecen los elementos de la interfaz relacionados con la reserva en su tienda. Incluye el temporizador de reserva, los estados expirados, los mensajes de advertencia y los indicadores de stock bajo.
Esta sección se centra exclusivamente en el comportamiento visual y la experiencia del cliente y no afecta a la lógica de reserva ni a las reglas de inventario.
Acceder a las plantillas del storefront
Vaya a Settings → Storefront Templates → Customize Appearance.
Acciones de la página
- Discard — descarta todos los cambios no guardados
- Save Changes — aplica las personalizaciones a su storefront
Plantillas predefinidas
Elija entre tres temas predefinidos para el temporizador:
Default
Tema violeta con estados tipo semáforo. Tiene un color de acento morado que transita por los estados de advertencia y urgencia.
Es la apariencia estándar de Cart Reserve.
Minimal
Diseño sutil y discreto con bordes finos. Una apariencia limpia que se integra con la mayoría de los temas.
Marcado como POPULAR — la opción más seleccionada.
Bold
Diseño de alto contraste y llamativo. Utiliza fondos sólidos y colores destacados para garantizar que el temporizador siempre sea visible.
Seleccione una plantilla haciendo clic en su tarjeta de vista previa. Una marca de verificación indica la plantilla activa.
Personalización del temporizador
Personalice la apariencia del temporizador de cuenta regresiva para cada estado.
Estados del temporizador
El temporizador se muestra de forma distinta según el tiempo restante:
| Estado | Descripción |
|---|---|
| Healthy | Tiempo suficiente, apariencia tranquila |
| Warning | Tiempo limitado, llama la atención |
| Urgent | Muy poco tiempo, alta visibilidad |
| Expired | La reserva ha terminado |
Haga clic en cada pestaña de estado para personalizar su apariencia individualmente.
Vista previa en vivo
Vea los cambios en tiempo real mientras ajusta la configuración. La vista previa muestra cómo aparecerá el temporizador al cliente con el texto "Items Reserved" y una cuenta regresiva de ejemplo.
Configuración del contenedor
Personalice la apariencia del contenedor del temporizador:
Corner Radius
Establece el redondeo de las esquinas en píxeles (por ejemplo, 6 px). Valores más altos generan esquinas más redondeadas.
Show Border
Activa o desactiva el borde del contenedor. Cuando está activado, el temporizador tiene un contorno visible que coincide con la configuración del color de borde.
Configuración de colores
Cada estado del temporizador tiene cuatro colores personalizables:
Background
Color de fondo principal del contenedor. Use el selector de color o introduzca un valor hexadecimal (por ejemplo, #F5F3FF).
Border
Color del borde del contenedor, visible cuando "Show Border" está activado.
Text
Color del texto de la etiqueta y subtítulo (por ejemplo, "Items Reserved", "Complete checkout to secure your items").
Icon/Accent
Color para los números de la cuenta regresiva, el icono y la barra de progreso.
Recomendaciones por estado
Estado Healthy
Use colores neutros y tranquilos. El temporizador debe ser visible pero no alarmante.
- Sugerencia: fondos claros con acentos sutiles
Estado Warning
Introduzca tonos cálidos para llamar la atención.
- Sugerencia: acentos amarillos o naranjas
Estado Urgent
Use colores de alto contraste que generen urgencia.
- Sugerencia: fondos rojos o naranjas con texto blanco
Estado Expired
Comunique claramente que la reserva ha terminado.
- Sugerencia: tonos grises o apagados que indiquen estado inactivo
Vista previa y pruebas
Tras guardar los cambios:
- Visite la página del carrito de su tienda con artículos reservados
- Verifique que el temporizador se muestra correctamente
- Espere a que el temporizador transite por los estados (o ajuste temporalmente la duración de la reserva)
- Confirme que todos los estados se renderizan como esperaba
Secciones relacionadas
- Timer — configure el comportamiento y los mensajes del temporizador
- Reservation Expiration — personalice los mensajes del estado expirado
- Low Stock Banner — configure los avisos de stock bajo