Cuenta regresiva

#Qué es la cuenta regresiva

La sección de Cuenta Regresiva muestra un temporizador en tu catálogo que cuenta los días, horas, minutos y segundos hasta que termine una oferta. Crea urgencia y aumenta las conversiones porque los visitantes saben que el tiempo es limitado.

#Cómo agregarla a tu catálogo

1. Ve al Editor visual desde el panel admin
2. Click en Agregar sección dentro del grupo "Contenido"
3. Busca "Cuenta regresiva" en el catálogo de secciones
4. Elige uno de los 6 presets disponibles según el estilo que quieras

También puedes empezar de cero y configurarla a tu gusto.

#Los 6 estilos visuales (variants)

#1. Clásico (recomendado)

Banner horizontal con cards separados para Días, Horas, Minutos y Segundos. El estilo más legible y universal. Ideal para casi cualquier tienda.

#2. Hero (números XL con glow)

Números gigantes con un fondo radial sutil y efecto de brillo en el color de tu marca. Perfecto para promociones grandes como Black Friday, Cyber Monday o lanzamientos importantes.

#3. Inline (una linea minimal)

Una sola linea de texto con un punto pulsante: "Termina en 2d 5h 30m". Discreto, ideal para barras superiores o como complemento dentro de otras secciones sin ocupar mucho espacio.

#4. Flip clock (estilo aeropuerto)

Cards con división horizontal que parecen un reloj split-flap antiguo. Cada digito tiene una animación sutil cuando cambia. Da un toque retro-premium a tu tienda.

#5. Anillos progress (circular)

Cuatro circulos animados, uno por cada unidad de tiempo. El arco del circulo se va vaciando conforme pasa el tiempo. Visualmente impactante para campañas modernas.

#Conectar a un descuento real (la magia)

En lugar de configurar la fecha de expiración a mano cada vez que cambias una oferta, puedes conectar la cuenta regresiva a un descuento de tu admin. Cuando el descuento expire, el timer se oculta solo. Cuando cambias la fecha del descuento, el timer se actualiza automáticamente.

#Cómo funciona

1. Crea tu descuento en Admin > Descuentos (ver guía de descuentos)
2. Asegurate que el descuento tenga fecha de expiración (sin esto la cuenta regresiva no puede mostrarse)
3. En el editor de la cuenta regresiva, cambia Origen a "Conectar a descuento real"
4. Selecciona tu descuento de la lista
5. Listo — todo se sincroniza solo

#Qué se sincroniza automáticamente

• Fecha de expiración se toma del descuento
• Título se autogenera: "Solo por tiempo limitado: WELCOME10"
• Descripción se autogenera: "Ahorra 20% en tu compra usando el código"
• Código del descuento aparece en un chip debajo del countdown (puedes ocultarlo)
• Valor del descuento ("20% OFF" o "$50 OFF") se muestra junto al código

#Cuándo se oculta automáticamente

La cuenta regresiva se oculta sola del storefront cuando:

• El descuento esta pausado (toggle Activo en off)
• El descuento ya expiro (la fecha pasada ya)
• El descuento no ha empezado todavía (fecha de inicio futura)
• El descuento se agoto (alcanzo el máximo de usos)
• El descuento no tiene fecha de expiración configurada

En el editor admin, cuando un descuento esta en alguno de estos estados, vas a ver un mensaje indicandolo (ej. "Descuento conectado: VERANO20 · estado: expired · oculto en storefront") asi sabes por que el cliente no esta viendolo.

#Lista de descuentos disponibles

Cuando seleccionas un descuento, vas a ver:

• Código del descuento (ej. WELCOME10)
• Subtitulo con el valor y los días hasta expirar (ej. "20% OFF · expira en 12 días")
• Badge de estado con un color:
  • Verde "Activo" — listo para usar
  • Gris "Pausado" — el descuento esta apagado
  • Amarillo "Expirado" — la fecha ya paso
  • Amarillo "Agotado" — alcanzo su limite de usos
  • Gris "Programado" — empieza en una fecha futura

#Configurar manualmente (sin descuento)

Si no quieres conectar a un descuento (por ejemplo, para una pre-venta o un anuncio sin código), elige Origen: "Configurar manualmente" y completa:

• Título (ej. "Lanzamiento en")
• Descripción (opcional)
• Fecha objetivo en formato YYYY-MM-DD HH:mm (ej. 2026-12-31 23:59)
• Texto cuando expira (lo que se muestra cuando llega a 00:00:00:00)

#Boton opcional

Puedes agregar un boton debajo del countdown que enlace a una colección, producto o página. Util cuando quieres dirigir trafico a un destino específico ("Ver colección en oferta").

El boton se oculta automáticamente cuando el countdown expira.

#Tips de uso

#Para conversión máxima

• Usa el variant Hero para promociones grandes (Black Friday, aniversario)
• Conecta a un descuento real con fecha realista (3-7 días funciona mejor que 30 días)
• Pon el countdown en una posición visible (entre el hero y los productos)

#Para no agobiar

• Usa el variant Inline si ya tienes mucha actividad visual en la página
• No pongas más de una cuenta regresiva por página
• Si tu oferta es permanente, NO uses cuenta regresiva (rompe la confianza si el cliente la ve siempre)

#Honestidad importa

• Cuando el countdown llega a 00:00:00:00, el descuento DEBE expirar de verdad
• No reactives el mismo descuento todos los días con la misma fecha — los clientes se dan cuenta
• Es preferible un descuento real de 3 días que un "último día" eterno

#Compatibilidad

• Funciona en mobile y desktop sin configuración adicional
• Cada variant es responsive y se adapta al tamaño de pantalla
• Los variants Flip y Circular usan animaciones CSS (sin JavaScript pesado)
• Compatible con el modo claro y oscuro del catálogo
• Respeta prefers-reduced-motion para accesibilidad

#Preguntas frecuentes

#¿Qué pasa si cambio el descuento mientras esta conectado?

La cuenta regresiva se actualiza en la siguiente carga de la página (cache de 60 segundos). Los visitantes que ya están en la página veran el countdown viejo hasta que recarguen.

#¿Puedo usar la cuenta regresiva sin descuento?

Si. Elige "Configurar manualmente" y pon la fecha objetivo a mano. El countdown funcionara pero sin sincronización automática.

#¿Por qué mi cuenta regresiva no se ve en el storefront?

Posibles razones:

1. El descuento conectado no tiene fecha de expiración configurada
2. El descuento ya expiro o esta pausado
3. El descuento se agoto (alcanzo el máximo de usos)
4. La fecha objetivo manual ya paso

Verifica en el editor del descuento (Admin > Descuentos) que tenga "Activo" en on y una fecha de expiración futura.

#¿Puedo personalizar los colores?

Si. Cada section tiene un selector de esquema de colores en la parte de "Diseño" del panel. La cuenta regresiva usa el color primario de tu tema para los números y elementos destacados.

#¿Puedo tener varias cuentas regresivas en mi tienda?

Si, una por sección en cada template. No recomendado — diluye la urgencia.