Cuenta regresiva

#Que es la cuenta regresiva

La seccion de Cuenta Regresiva muestra un temporizador en tu catalogo que cuenta los dias, horas, minutos y segundos hasta que termine una oferta. Crea urgencia y aumenta las conversiones porque los visitantes saben que el tiempo es limitado.

#Como agregarla a tu catalogo

1. Ve al Editor visual desde el panel admin
2. Click en Agregar seccion dentro del grupo "Contenido"
3. Busca "Cuenta regresiva" en el catalogo de secciones
4. Elige uno de los 6 presets disponibles segun el estilo que quieras

Tambien puedes empezar de cero y configurarla a tu gusto.

#Los 6 estilos visuales (variants)

#1. Clasico (recomendado)

Banner horizontal con cards separados para Dias, Horas, Minutos y Segundos. El estilo mas legible y universal. Ideal para casi cualquier tienda.

#2. Hero (numeros XL con glow)

Numeros 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 division horizontal que parecen un reloj split-flap antiguo. Cada digito tiene una animacion 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 campanas modernas.

#Conectar a un descuento real (la magia)

En lugar de configurar la fecha de expiracion 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 automaticamente.

#Como funciona

1. Crea tu descuento en Admin > Descuentos (ver guia de descuentos)
2. Asegurate que el descuento tenga fecha de expiracion (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

#Que se sincroniza automaticamente

• Fecha de expiracion se toma del descuento
• Titulo se autogenera: "Solo por tiempo limitado: WELCOME10"
• Descripcion se autogenera: "Ahorra 20% en tu compra usando el codigo"
• Codigo del descuento aparece en un chip debajo del countdown (puedes ocultarlo)
• Valor del descuento ("20% OFF" o "$50 OFF") se muestra junto al codigo

#Cuando se oculta automaticamente

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 todavia (fecha de inicio futura)
• El descuento se agoto (alcanzo el maximo de usos)
• El descuento no tiene fecha de expiracion 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:

• Codigo del descuento (ej. WELCOME10)
• Subtitulo con el valor y los dias hasta expirar (ej. "20% OFF · expira en 12 dias")
• 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 codigo), elige Origen: "Configurar manualmente" y completa:

• Titulo (ej. "Lanzamiento en")
• Descripcion (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 coleccion, producto o pagina. Util cuando quieres dirigir trafico a un destino especifico ("Ver coleccion en oferta").

El boton se oculta automaticamente cuando el countdown expira.

#Tips de uso

#Para conversion maxima

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

#Para no agobiar

• Usa el variant Inline si ya tienes mucha actividad visual en la pagina
• No pongas mas de una cuenta regresiva por pagina
• 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 dias con la misma fecha — los clientes se dan cuenta
• Es preferible un descuento real de 3 dias que un "ultimo dia" eterno

#Compatibilidad

• Funciona en mobile y desktop sin configuracion adicional
• Cada variant es responsive y se adapta al tamano de pantalla
• Los variants Flip y Circular usan animaciones CSS (sin JavaScript pesado)
• Compatible con el modo claro y oscuro del catalogo
• Respeta prefers-reduced-motion para accesibilidad

#Preguntas frecuentes

#Que pasa si cambio el descuento mientras esta conectado?

La cuenta regresiva se actualiza en la siguiente carga de la pagina (cache de 60 segundos). Los visitantes que ya estan en la pagina 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 sincronizacion automatica.

#Por que mi cuenta regresiva no se ve en el storefront?

Posibles razones:

1. El descuento conectado no tiene fecha de expiracion configurada
2. El descuento ya expiro o esta pausado
3. El descuento se agoto (alcanzo el maximo 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 expiracion futura.

#Puedo personalizar los colores?

Si. Cada section tiene un selector de esquema de colores en la parte de "Diseno" del panel. La cuenta regresiva usa el color primario de tu tema para los numeros y elementos destacados.

#Puedo tener varias cuentas regresivas en mi tienda?

Si, una por seccion en cada template. No recomendado — diluye la urgencia.