Selectores de tema
La sección Theme Selectors le permite controlar cómo Cart Reserve detecta e interactúa con los elementos del tema de su tienda. Resulta especialmente útil si utiliza un tema personalizado, un tema fuertemente modificado o una implementación de carrito de terceros.
En la mayoría de los casos, los selectores predeterminados funcionan tal cual y no se requieren cambios. Solo debe modificar esta configuración si las reservas no se actualizan correctamente o si la estructura de su tema difiere de los temas estándar de Shopify.
Acceder a los selectores de tema
Vaya a Settings → Theme Selectors → Configure Selectors.
Detección automática de tema
Cart Reserve incluye soporte integrado para más de 30 temas de Shopify. El sistema detecta automáticamente su tema y aplica los selectores adecuados.
La detección se realiza en el navegador del cliente y comprueba varias señales en orden:
- Selección manual — el ajuste Theme adapter en el app embed (véase más adelante), si ha elegido un tema de forma explícita
- ID del Theme Store — los temas instalados desde la Shopify Theme Store se reconocen al instante, aunque se hayan renombrado
- Nombre del tema — un nombre que contenga un tema compatible (por ejemplo, "My Dawn Copy") se corresponde con ese tema
- Estructura de página — para temas renombrados o subidos de forma personalizada, Cart Reserve reconoce el tema por sus elementos de página distintivos
Una vez confirmado el tema, el resultado se guarda en el navegador del visitante para que cada carga de página posterior use la integración correcta de inmediato. Si cambia de tema, la detección se vuelve a ejecutar automáticamente; no es necesario hacer ninguna limpieza.
Selección manual de tema
Si su tema está muy personalizado y la detección automática selecciona la integración genérica, puede elegir la integración de tema manualmente: Online Store → Themes → Customize → App embeds → CartReserve → Theme adapter Elija su tema base en la lista (Dawn, Horizon, Impact, Palo Alto, Turbo, Eurus, Focal, Wokiee) o déjelo en Auto-detect (recomendado para la mayoría de las tiendas).
Consejo: use las herramientas de desarrollador de su navegador (clic derecho → Inspeccionar) para encontrar los selectores CSS correctos para los elementos de su tema si es necesario.
Haga clic en View full documentation para obtener una guía detallada de configuración de selectores.
Cómo llegan los cambios de configuración al storefront
La configuración del storefront (selectores, estilo del temporizador, colores) se almacena en caché en el navegador de cada visitante para que las páginas se rendericen al instante sin esperar a la red:
- Los ajustes de selectores se aplican desde la caché de inmediato y se comprueban con el servidor en segundo plano en cada vista de página — los cambios guardados llegan a los visitantes en una sola carga de página
- El estilo del temporizador y los colores se aplican desde la caché antes de que la página termine de cargarse (sin "parpadeo" de color) y se actualizan en segundo plano de la misma forma
Tras guardar los cambios en el panel de administración, actualice su storefront una vez para verlos.
Secciones de selectores
Los selectores de tema están organizados en secciones plegables. Cada sección muestra un contador que indica los selectores personalizados (por ejemplo, "0/2 customized").
Storefront Templates
Enlace rápido para personalizar la apariencia de los temporizadores, advertencias y estados expirados.
Haga clic en Customize Templates para abrir el editor de Storefront Templates.
Cart Item Changes
Selectores para detectar y gestionar los cambios de cantidad en el carrito.
Configúrelos si Cart Reserve no detecta cuando los clientes modifican las cantidades en el carrito.
Campos: 2 selectores disponibles
Product Detail
Selectores para el formulario de la página de producto y la funcionalidad de añadir al carrito.
Configúrelos si no se crean reservas cuando los clientes añaden artículos al carrito desde las páginas de producto.
Campos: 6 selectores disponibles
Timer Context
Configuración para la visualización del temporizador y la detección del cart drawer.
Configúrelo si el temporizador no aparece en la ubicación correcta o si su tema usa un cart drawer no estándar.
Campos: 3 selectores disponibles
Universal Selectors
Selectores CSS para controles de cantidad que funcionan en el cart drawer, la página del carrito y la página de producto.
Úselos para temas personalizados no cubiertos por las preconfiguraciones específicas. Estos selectores funcionan universalmente en distintos contextos del carrito.
Campos: 6 selectores disponibles
Label Translations
Las etiquetas de botones y temporizador se configuran en el editor de temas y pueden traducirse usando la app "Translate & Adapt" de Shopify.
Haga clic en Open Theme Editor para acceder a la configuración de etiquetas.
Ruta: Online Store → Themes → Customize → App embeds → CartReserve
Expandir secciones
Haga clic en Expand en cualquier sección para ver y editar los selectores individuales.
Cada campo de selector acepta la sintaxis estándar de selector CSS (por ejemplo, .cart-item, #product-form, [data-cart-drawer]).
Resolución de problemas
Si Cart Reserve no funciona correctamente con su tema:
- Compruebe la detección automática — el sistema debería gestionar la mayoría de los temas automáticamente
- Inspeccione elementos — use las herramientas de desarrollador del navegador para identificar los selectores correctos
- Pruebe de forma incremental — modifique un selector a la vez y pruebe
- Guarde y recargue — los cambios requieren recargar la página para aplicarse
Cuándo personalizar los selectores
Solo personalice los selectores si experimenta:
- Reservas que no se actualizan cuando cambian las cantidades del carrito
- Temporizador que no aparece en el cart drawer o la página del carrito
- Que añadir al carrito no active reservas
- Que los controles de cantidad no se detecten
Para los temas estándar de Shopify, los valores predeterminados deberían funcionar sin modificación.