ℹ️ 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 Drawero 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 🚀

Actualizado el: 10/09/2026