Crea tu primera cuenta regresiva

Este recorrido crea una cuenta regresiva completa y habitual: un temporizador de oferta en tus páginas de producto que cuenta hacia una fecha de fin fija y desaparece cuando termina. Toca todas las partes del editor (contenido, tiempos, diseño y visualización) sin ninguna de las opciones más avanzadas.

Asegúrate de haber activado la inserción de la aplicación primero, o la cuenta regresiva que crees aquí no se mostrará en tu tienda online.

1. Empieza una cuenta regresiva nueva

   Abre la aplicación. En el panel, haz clic en Create countdown en la segunda tarjeta de configuración. (Desde la página Countdowns, el botón Create countdown hace lo mismo.)

   

   Empieza una cuenta regresiva desde la tarjeta Create a countdown del panel.

2. Elige una plantilla

   Se abre la página Countdown templates con cuatro pestañas de tipo en la parte superior: Countdown timer, Delivery date, Stock countdown y Cart countdown. Déjala en Countdown timer.

   Explora los diseños o busca por nombre u ocasión: al escribir black friday aparecen los diseños de esa temporada aunque se llamen Onyx o Ribbon. Cuando encuentres uno que te guste, haz clic en Select en su tarjeta.

   

   Elige un diseño de la cuadrícula de plantillas: podrás cambiarlo todo más adelante.

3. Pon nombre a la cuenta regresiva

   El editor se abre con el diseño elegido ya en la vista previa. Dale un nombre a la cuenta regresiva en la parte superior, algo como “Spring sale timer”. Este nombre es solo para ti; nadie más lo ve.

4. Escribe el texto del temporizador

   En la pestaña Settings, abre la sección Content y define lo que dice el temporizador:

   • Title: la línea grande, por ejemplo 🔥 Hurry up! 🔥
   • Subtitle: la línea que hay sobre los dígitos, por ejemplo Sale ends in:
   • Timer: las etiquetas bajo cada número: Days, Hours, Min, Sec

   

   La sección Content controla todos los textos del temporizador.

5. Define la fecha de fin

   Sin salir de Settings, abre la sección Setting timer. Deja Time type en Countdown to a date: es el valor predeterminado y el modo que necesita este ejemplo.

   En Date between, establece End con el momento en que termina tu oferta. Deja Start vacío para que el temporizador funcione desde ahora; rellénalo si quieres que el temporizador permanezca oculto hasta que la oferta empiece de verdad.

   

   Countdown to a date es el Time type predeterminado: establece la fecha de End en tu fecha límite.

6. Elige qué ocurre al llegar a cero

   Debajo de las fechas, establece When countdown timer end en Hide countdown block. Cuando pasa la fecha límite, el temporizador desaparece en lugar de quedarse en 00:00:00.

   Las otras dos opciones se explican en Cuando termina el temporizador.

7. Elige dónde se muestra

   Ve a la pestaña Display. En Show countdown on, marca Product page. Eso coloca el temporizador en todas las páginas de producto, justo debajo de la zona de Add to cart.

   

   Al marcar Product page, el temporizador se coloca en todas las páginas de producto.

8. Limítalo a los productos adecuados (opcional)

   Encima de la posición de visualización, la sección Conditions decide qué productos reciben el temporizador. Déjala en All Products para cubrir todo tu catálogo, o cámbiala para dirigirla a una colección, a productos concretos o a un grupo de clientes; consulta Condiciones de visualización.

9. Guárdala como activa

   Haz clic en Save. Comprueba que el control de estado indica Active, no Draft: un borrador se guarda, pero nunca se muestra.

   

   Guarda la cuenta regresiva con su estado en Active.

10. Compruébala en tu tienda online

    Abre cualquier página de producto de tu tienda online en una pestaña nueva; el botón Open my store del panel es un atajo. Deberías ver tu temporizador bajo el botón Add to cart, contando hacia atrás.

    Pruébalo también en el móvil o reduce el ancho de la ventana del navegador: los temas organizan las páginas de producto de forma distinta en pantallas pequeñas, y conviene ver el temporizador donde lo verá la mayoría.

    

    El temporizador terminado en una página de producto en vivo.

Consejo

Si el temporizador aparece en tu página de producto y los segundos avanzan, todo está bien conectado: la inserción está activada, la cuenta regresiva está activa y sus condiciones coinciden.

Nota

¿No lo ves? Repasa La cuenta regresiva no se muestra: es una lista corta y los dos primeros puntos resuelven la mayoría de los casos.

Siguientes pasos

• Cómo funcionan las cuentas regresivas
• Diseñar una cuenta regresiva
• Condiciones de visualización
• Tipos de cuenta regresiva