Cómo añadir un temporizador de cuenta regresiva

Un temporizador de cuenta regresiva muestra un reloj junto a tus ofertas de paquetes. Elige una duración fija, medianoche local o una fecha límite personalizada, con un diseño de bloques de dígitos completo o una barra compacta. El temporizador es una función visual: llegar a cero no desactiva el descuento ni impide que los compradores lo reciban. Si una promoción debe finalizar, gestiona el descuento por separado y usa un texto que coincida con tu oferta real.

Activar el temporizador de cuenta regresiva

El temporizador de cuenta regresiva se configura por oferta de paquete, en el editor del paquete, por lo que solo aparece donde se muestra el widget de ese paquete.

1. Abre la oferta de paquete que quieres editar.
2. Abre la pestaña Complementos y busca la sección Temporizador de cuenta regresiva.
3. Activa el interruptor situado junto al título Temporizador de cuenta regresiva.
4. Guarda el paquete.

Al igual que con el resto del widget, la inserción de la aplicación, o el bloque de aplicación, debe estar activada y debe existir un paquete publicado que coincida con el producto para que el temporizador se muestre en la tienda.

Elegir un diseño

La configuración Diseño de cuenta regresiva controla el aspecto del temporizador:

• Completo - un bloque más grande con dígitos separados para días, horas, minutos y segundos, además de un título y subtítulo opcionales.
• Compacto - una sola línea delgada que combina un mensaje breve con el tiempo, usando el campo Título compacto.

Establecer la posición

La configuración Posición determina dónde se coloca el temporizador:

• Encima del widget - dentro de la página del producto, justo encima del paquete.
• Debajo del widget - dentro de la página del producto, justo debajo del paquete.
• Barra fija, arriba - fijada en la parte superior de la ventana del navegador. Solo está disponible con el diseño Compacto.

Si cambias al diseño Completo mientras está seleccionada la Barra fija, la posición cambia automáticamente a Encima del widget.

Elegir un tipo de temporizador

En Tipo de temporizador, elige cómo debe funcionar la cuenta regresiva:

• Duración fija - cuenta hacia atrás una cantidad establecida de minutos para cada visitante.
• Termina a medianoche, hora local del usuario - cuenta hacia atrás hasta la medianoche en la zona horaria de cada comprador, con una nueva fecha límite diaria cuando la página se carga al día siguiente.
• Fecha de finalización personalizada - cuenta hacia atrás hasta una fecha y hora específicas que establezcas.

Duración fija

Cuando selecciones Duración fija, establece la Duración en minutos. El valor debe estar entre 1 y 1440 minutos, es decir, 24 horas. La cuenta regresiva utiliza la hora local del navegador, por lo que actualizar la página no proporciona de forma fiable al visitante una nueva duración completa. En una página que ya está abierta, llegar a cero aplica el comportamiento de expiración seleccionado. No dependas de que el reloj se reinicie automáticamente en esa página. Prueba tanto la expiración como una carga posterior de la página antes de publicar el texto.

Fecha de finalización personalizada

Cuando selecciones Fecha de finalización personalizada, elige la Fecha y hora de finalización. El editor muestra una zona horaria detectada junto al campo. Comprueba la cuenta regresiva resultante en tus mercados objetivo, especialmente si necesitas una fecha límite compartida entre distintas zonas horarias. El temporizador no es un mecanismo para hacer cumplir la finalización mundial de una promoción. Cuando pasa la fecha límite mostrada, se aplica el comportamiento de expiración seleccionado.

Decidir qué ocurre cuando termina el temporizador

Usa Cuando termina el temporizador para controlar el estado al expirar:

• Ocultar temporizador - la cuenta regresiva desaparece.
• Mostrar ceros - la cuenta regresiva permanece visible, detenida en cero.
• Mostrar mensaje - la cuenta regresiva se sustituye por un Mensaje de expiración que escribas, por ejemplo, «El temporizador ha terminado. Las ofertas siguen disponibles».

El comportamiento de expiración también es importante para Duración fija. En nuestra prueba de un minuto, el mensaje permaneció visible después de llegar a cero, mientras el descuento seguía funcionando en el carrito y en el proceso de pago.

Usar la variable {{timer}}

En el campo Título compacto puedes insertar la variable {{timer}} donde quieras que aparezca el tiempo en vivo. Por ejemplo:

Routine timer: {{timer}}

La aplicación sustituye {{timer}} por la cuenta regresiva en curso. El Título compacto también se reutiliza en la barra fija de Añadir al carrito cuando está activada la opción Mostrar cuenta regresiva en la barra fija, así que debe ser breve y claro. En el diseño Completo, el título, el subtítulo y los bloques de dígitos se personalizan por separado, en lugar de insertar el tiempo en una sola línea, por lo que {{timer}} no se utiliza allí. Para consultar los demás marcadores que puedes usar en el texto del widget, consulta Variables de plantilla.

Personalizar el temporizador

Debajo de la configuración del comportamiento, puedes adaptar el aspecto al de tu widget:

• Aplica un ajuste preestablecido de color o usa Coincidir las esquinas de la cuenta regresiva con el widget principal para alinear el radio de las esquinas con tu paquete.
• Abre Estilo de la cuenta regresiva para ajustar el fondo, el contenedor, incluido el relleno, el borde, la sombra y la alineación, y el texto. En el diseño Completo puedes personalizar individualmente el título, el subtítulo, los dígitos y las etiquetas de las unidades.

Al establecer la posición Barra fija, las esquinas se vuelven cuadradas automáticamente, ya que una barra superior fijada se ve mejor al ras. Para reutilizar la misma cuenta regresiva dentro de la barra flotante de Añadir al carrito, consulta Añadir al carrito fijo.

Guardar y probar el resultado

Guarda el descuento y abre una página de producto específica con el descuento activo. Comprueba el temporizador en ordenadores y dispositivos móviles. Para probar rápidamente la expiración, usa temporalmente un minuto y espera a que llegue a cero; después, restablece la duración prevista. Verifica el estado al expirar y usa Añadir al carrito y el proceso de pago para confirmar el comportamiento real de la oferta.

Nuestro ejemplo usa un temporizador compacto de 15 minutos encima de las ofertas. La prueba de un minuto confirmó que el mensaje del temporizador cambia al llegar a cero, pero dos bolsas de $24 siguen recibiendo un 10 % de descuento, lo que da un subtotal de mercancía de $43.20 en el carrito y en el proceso de pago. El envío es independiente. Mantén el texto del temporizador coherente con ese comportamiento.