> ## 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 configurar el temporizador de cuenta atrás > ℹ️ **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. ¿Quieres agregar urgencia a tu tienda y ayudar a los clientes a tomar acción antes de que el tiempo se agote? ⏳ Eso es exactamente lo que **Hoppy Countdown Timer** está construido para. Con esta aplicación, puede crear temporizadores de cuenta atrás para: * 🛍️ **Páginas de productos** — Mostrar la urgencia directamente en las páginas de detalles del producto * 🛒 **Cart Page & Cart Drawer** - Alentar a los compradores a completar el checkout * 💳 **Página de inicio** - Añada urgencia en el paso final (Shopify Más sólo) * 🌐 **Top/Bottom Banner** — Mostrar una barra de cuenta atrás en todo el sitio * 📄 **Landing Page " Custom Positions** - Obtención específica o colocación personalizada Esta guía te lleva a través de los pasos de configuración esenciales para que puedas conseguir tu primer temporizador de cuenta atrás vivir rápidamente 🚀 --- # **📍 Tipos de cuenta atrás disponibles** Dependiendo de su campaña, puede elegir entre varios comportamientos de temporizador: * **Cuenta atrás a una fecha** - Termina en una fecha y hora específicas * **Horas fijas** — Una cuenta regresiva de longitud fija para cada sesión de visitantes * **Timer repetitivo diario** — Repeticiones en días seleccionados (por ejemplo, todos los días de semana de 9 a 11 a.m.) * **temporizador intervalor** — Múltiples tiempos de inicio y final programados (hasta 7 intervalos) * **Período de sesiones** — Una cuenta regresiva única que comienza fresca para cada visitante El tipo que selecciona cambios que las opciones de tiempo aparecen en su configuración. --- # **⚠️ Antes de empezar** Antes de crear un temporizador de cuenta atrás, asegúrese de: * El **Hoppy Countdown Timer** app está instalada en tu Shopify tienda * Usted tiene acceso a su **Shopify Admin** ### **Activar la aplicación Embed** Para los temporizadores de cuenta atrás para aparecer en su escaparate, la aplicación embed debe ser habilitada dentro de su Shopify tema. Ve a: **Shopify Admin → Canales de Venta → Tienda Online → Temas → Editar Tema → App Embeds** Entonces: * Encontrar **Cuenta atrás Timers** * Toggle it **ON** * Haga clic **Guardar** 💡 Si saltas este paso, tu temporizador de cuenta atrás publicado no será visible en el escaparate. --- ### **Shopify Más Requisitos para el checkout** Si quieres colocar un temporizador de cuenta atrás en el **Página de inicio**, su tienda debe estar en **Shopify Plus** plan. Las tiendas de Non-Plus verán un aviso del plan al intentar crear una cuenta regresiva de la página de checkout. --- # **🛠️ Paso 1 — Crear un nuevo temporizador de cuenta atrás** Abrir el **Hoppy Countdown Timer** aplicación de tu Shopify Admin. Entonces: → **Crear cuenta atrás** → Seleccione el **Tipo de colocación** que coincide donde quieres que aparezca el temporizador: * **Página** * **Página** * **Cart Drawer** * **Página de inicio** ()Shopify Más sólo) * **Top/Bottom Banner** * **Landing Page** * **Posición personalizada** Una vez seleccionado, el editor de configuración se abre automáticamente con ajustes predeterminados adaptados a esa colocación. --- # **⚙️ Paso 2 - Configurar la pestaña Contenido** Después de abrir la página de configuración, aterrizarás dentro de la **Índice** tab. Esta pestaña controla: * 🏷️ Nombre de cuenta atrás y mensajería * Tipo de cuenta atrás y tiempo * 🔚 Lo que pasa cuando el temporizador termina * 🌍 Traducciones (para las colocaciones apoyadas) --- ## **🏷️ Nombre de cuenta** Este campo se utiliza para **referencia interna solamente** - los clientes nunca lo verán. Use un nombre reconocible como: * Tiempo de venta de verano * Cuenta atrás del viernes negro * Venta flash Urgency Bar 💡 Usando un nombre interno claro hace más fácil gestionar varias campañas más tarde. --- ## **📝 Título " Subheading "** * **Título** — Los clientes del mensaje principal ven (por ejemplo, "¡Arriba! Venta termina en {timer}") * **Subheading** - Una línea secundaria que se muestra debajo del título sobre la mayoría de las colocaciones ℹ️ On **Página** y **Página de inicio** temporizadores, puede utilizar la variable dinámica `{timer}` dentro del título para mostrar el inline de cuenta atrás en vivo. --- ## **🔘 Call-to-Action Button** Para **Top/Bottom Banner**, **Landing Page**, **Página**, y **Cart Drawer** temporizadores, usted puede elegir lo que sucede cuando los clientes interactúan con la barra de cuenta atrás. Establecer el **Tipo de acción CTA** a: * **Ninguna llamada a la acción** — La barra sólo muestra texto * **Button** — Añade un botón clic debajo del temporizador * **Haga clic en la barra entera** - Convierte toda la barra en un enlace ℹ️ Si seleccionas **Button** o **Haga clic en la barra entera**, el **Texto del botón** y **Enlace** los campos aparecen automáticamente para que pueda configurar dónde se dirigen los clientes. --- ## **Tipo de cuenta atrás** Elija cómo su temporizador debe comportarse: Tipo Cuándo utilizar **Cuenta atrás a una fecha** Una fecha de final fijo (por ejemplo, la venta termina el 31 de diciembre) **Horas fijas** Cada visitante obtiene la misma duración de sesión fija **Timer repetitivo diario** Repeticiones en días seleccionados con los tiempos de inicio/final del set **temporizador intervalor** Ventanas de cuenta atrás programadas **Período de sesiones** Una nueva cuenta atrás para cada sesión de visitantes Una vez que seleccione un tipo, los campos de tiempo relevantes aparecen automáticamente: * **Fecha** → Fecha de inicio y fecha de fin de los recolectores aparecen * **Horas fijas / sesión** → A **Minutos** campo * **Recurriendo** → Selector de día y controles de tiempo de inicio / final aparecen * **Interval** → Múltiples pickers de fecha de inicio/final aparecen (hasta 7 intervalos) ℹ️ **Página**, **Cart Drawer** y **Página de inicio** colocaciones usan modos de tiempo fijo y hacen **no** mostrar el selector de Tipo de Cuenta atrás. Para Cart and Checkout, usted establece la duración en **Minutos**. --- ## **🕐 Ajustes de inicio del temporizador** Para **Cuenta atrás a una fecha** temporizadores, usted puede elegir cuando el temporizador comienza: * **Ahora mismo.** — El temporizador comienza inmediatamente cuando se publica * **Horario para empezar más tarde** - Establecer una fecha de inicio futura Si eliges "Programa para empezar más tarde", un adicional **Fecha de inicio** el campo aparece. ℹ️ Esta opción no está disponible para **Página**, **Cart Drawer**o **Página de inicio** colocaciones, que utilizan sus propios controles de tiempo. --- ## **🔚 Una vez que termine** Este ajuste controla lo que sucede cuando la cuenta regresiva llega a cero. Las opciones disponibles dependen del tipo de colocación y cuenta atrás: **Para la mayoría de las colocaciones:** * **Unpublish Timer (Hide)** — Oculta la cuenta regresiva automáticamente * **Mostrar mensaje personalizado** — Muestra un título/mensaje personalizado que define * **Extender temporizador** — Añade tiempo extra y muestra un mensaje extendido * **No hagas nada.** - Deja el temporizador visible a cero **Para Cart Page, Cart Drawer, y Cart Standalone:** * Todo lo anterior, más: * **Restablecimiento de la cuenta** - Reinicia el temporizador automáticamente * **Borrar los productos del carrito** — Quita los artículos del carrito cuando el temporizador termina **Para " minutos fijos" tipo en otras colocaciones:** * También incluye **Reinicie la cuenta atrásPara la página de salida:** * **Unpublish Timer (Hide)** sólo * **No hagas nada.** ℹ️ Si seleccionas **Mostrar mensaje personalizado** o **Extender temporizador**, los campos de texto adicionales aparecen automáticamente para que pueda introducir el contenido del mensaje. --- # **📍 Paso 3 - Configurar la pestaña Colocación** Siguiente, abre el **Colocación** ficha para controlar dónde aparece la cuenta regresiva y quién puede verla. --- ## **🎯 Seleccione Páginas o Productos** Las opciones de selección disponibles dependen del tipo de colocación que elegiste en el Paso 1. --- ### **🛍️ Página** * **Todos los productos** — Mostrar en cada página de producto * **Productos específicos** — Productos individuales a mano de su tienda * **Todos los productos con etiquetas específicas** — Productos blancos etiquetas que usted define * **Todos los productos en colecciones específicas** — Show for products within chosen collections * **Posición personalizada** — Colocar manualmente el ID de cuenta atrás o el snippet líquido --- ### **🛒 Cart Page & Cart Drawer** * **En la parte superior del carrito** — Colocación predeterminada por encima de los artículos del carrito * **Posición personalizada** — Colocar manualmente el ID de cuenta atrás o el snippet líquido --- ### **🌐 Top/Bottom Banner** * **Mostrar en cada página** — Visibilidad en todo el sitio * **Mostrar en la página principal sólo** — Restringida a la página principal * **Mostrar en todas las páginas del producto** — Aparecer en cada página de producto * **Mostrar en páginas de producto específicas** — Productos individuales a mano * **Todos los productos en colecciones específicas** - Productos específicos dentro de las colecciones elegidas * **Mostrar en todas las páginas de colección** — Aparecer en cada página de colección * **Mostrar en páginas de colección específicas** — Colecciones individuales a mano * **Posición personalizada** — Colocar manualmente el ID de cuenta atrás o el snippet líquido --- ### **📄 Landing Page** * **Todas las páginas de colección** — Show on every collection page * **Páginas de colección específicas** — Colecciones individuales a mano * **Posición personalizada** — Colocar manualmente el ID de cuenta atrás o el snippet líquido --- ### **💳 Página de inicio** * **Colocación de bloques personalizados** - Añadir a través de Shopify Editor de checkout --- ℹ️ Si seleccionas **Posición personalizada**, la aplicación proporciona una **ID de cuenta atrás** y a **Código líquido** después de salvar. Puedes usar estos dentro de tu editor de temas o código para colocar el temporizador exactamente donde quieras. --- ## **⏳ Tiempo-en-Site Objetivo** Elige cuando aparezca la cuenta regresiva: * **Mostrar siempre** — Muestra inmediatamente cuando la página se carga * **Show after a while** — Retrasa la aparición por un número de segundos (1–300) --- ## **👤 Atención al cliente (opcional)** Puede refinar la visibilidad basado en: * **Estado de acceso** — Show to all customers or only logged-in customers * **Mostrar bar a** — Todos los clientes, clientes con etiquetas específicas, o clientes basados en la vida pasada * **Ocultar la barra** - Excluir las etiquetas específicas de los clientes o los rangos de vida gastados ℹ️ Estos ajustes son opcionales. Para la mayoría de las configuraciones, el predeterminado **Mostrar a todos los clientes** funciona perfectamente. --- ## **🌍 Geolocation Targeting (Optional)** Por defecto, su cuenta regresiva es visible en todo el mundo. Si desea restringirlo a países específicos, seleccione **Países concretos** y elegir los lugares permitidos del selector del país. --- # **🎨 Paso 4 - Personalizar el diseño (opcional)** Abrir el **Diseño** ficha para cambiar cómo se ve tu cuenta atrás. Usted puede aplicar rápidamente un **plantilla pre-hecha** o personalizar manualmente: * Posición (de arriba o abajo) * Color de fondo o gradiente * Estilo de temporizador ( reloj de Flip, azulejos, números simples, y más) * Font color = "# ffff80" = "# ffff80" 💡 Si tienes prisa, comienza con una plantilla y fino después. Para un desglose completo de cada opción de diseño, vea el **Diseño y estilo** documentación. --- # **💾 Paso 5 - Guarda tu configuración** Una vez configurado su contenido y colocación: → **Guardar** La barra de ahorro aparece en la parte inferior de la pantalla cuando haces cambios. Guarda tu configuración pero sí **no** hacer que el temporizador viva aún. --- # **🚀 Paso 6 - Publicar la cuenta regresiva** Después de guardar: → **Publish** Una vez publicado: * La cuenta regresiva se hace visible en su escaparate de acuerdo con sus reglas de colocación y segmentación * Un verde **"Published"** La placa aparece junto al nombre de cuenta atrás ⚠️ **Importantes recordatorios:** * Si la aplicación incrustada no está habilitada en su tema, la cuenta regresiva no aparecerá, incluso después de la publicación * Para los temporizadores de página de checkout, sólo **uno** La cuenta regresiva publicada está permitida por tienda * Usted puede deshacerse en cualquier momento haciendo clic en **Unpublish** botón --- # **✅ Paso final - Confirmación Está funcionando** Después de publicar: 1. Abre tu tienda en un **Incognito o Privado** ventana del navegador 2. Navegue a la página donde debe aparecer la cuenta regresiva 3. Verificar el temporizador es visible y contar correctamente Si la cuenta regresiva no aparece: * Revise que **App Inserted** está habilitado y guardado en su tema * Confirme la cuenta regresiva **publicado** * Pruébalo. **Refrigerio duro** ()`Ctrl + Shift + R` en Windows / `Cmd + Shift + R` en Mac) * Comprueba que tus reglas de programación o segmentación no lo ocultan --- # **🎉 Resultado final** Una vez configurado con éxito: ✅ Un temporizador de cuenta atrás está en vivo en tus páginas seleccionadas ✅ Los clientes ven mensajería urgente en tiempo real ✅ El temporizador se oculta automáticamente o se extiende según la configuración de la acción final ✅ Su tienda se siente más dinámica y sensible al tiempo ✨ Un temporizador de cuenta atrás bien colocado puede ayudar a los clientes a tomar decisiones de compra más rápidas durante su viaje de compras 🚀