Para añadir una cuenta atrás a tu tienda online solo necesitas una herramienta que genere el temporizador y una forma de insertarlo en tu web, ya sea en Shopify, WooCommerce o cualquier otra plataforma. Con wwidgets basta con pegar una línea de código y configurar el contador desde el panel, sin tocar tu tema. A continuación tienes el paso a paso para cada plataforma y las buenas prácticas para que el temporizador venda sin perder credibilidad.
¿Para qué sirve una cuenta atrás en una tienda online?
Un temporizador de cuenta regresiva convierte una fecha abstracta ("la oferta termina el domingo") en algo visible y concreto. Ver cómo bajan las horas y los minutos ayuda al cliente a decidir y reduce el famoso "ya lo compraré otro día". Estos son los usos más habituales:
- Campañas con fecha de fin: Black Friday, Cyber Monday, rebajas de verano, San Valentín o el Día de la Madre.
- Envío en el día: "Pide en las próximas 2 horas y te lo enviamos hoy".
- Lanzamientos: una cuenta atrás hasta que sale una nueva colección, con un formulario para avisar a los interesados.
- Cupones temporales: un descuento válido solo durante un tiempo limitado.
- Eventos y webinars: el tiempo que falta para que empiece una formación o un directo.
Antes de empezar: qué necesitas
Tener claro estos puntos te ahorrará tiempo:
- La fecha y hora exactas de fin de tu oferta, incluida la zona horaria (en la Península, la hora de Madrid; en Canarias, una hora menos).
- El mensaje que acompañará al contador, por ejemplo "Rebajas de verano: hasta un 30% en toda la tienda".
- La acción que quieres que haga el visitante: ir a una colección, usar un cupón o dejar su email.
- Las páginas en las que quieres mostrar el temporizador.
- Una cuenta de wwidgets. Puedes crear una gratis y probarla 14 días.
Paso 1: crea el widget de cuenta atrás
Entra en tu panel de wwidgets, crea una campaña para tu web y añade un widget de tipo cuenta atrás. Tienes dos variantes:
- Cuenta atrás con botón (CTA): muestra el contador junto a un botón que lleva a la página que elijas, por ejemplo la colección en oferta.
- Cuenta atrás con captación de email: ideal para lanzamientos o preventas. El visitante deja su email para que le avises cuando empiece la oferta.
Configura la fecha de fin, el texto, los colores y la posición. Si tu web tiene un diseño oscuro, puedes activar el modo oscuro para que encaje mejor.
Paso 2: instala el píxel en tu web
El píxel es una sola línea de código que se pega en el <head> de tu web. Solo tienes que hacerlo una vez: a partir de ahí, todos los widgets que crees aparecerán automáticamente según las reglas que definas. El código se carga de forma asíncrona, así que no frena la carga de tu página.
En Shopify
- En el panel de Shopify, ve a Tienda online > Temas.
- En tu tema activo, haz clic en los tres puntos y elige Editar código.
- Abre el archivo theme.liquid dentro de la carpeta Layout.
- Pega el código del píxel justo antes de la etiqueta de cierre </head>.
- Guarda los cambios.
En WooCommerce o WordPress
Tienes dos opciones:
- Con un plugin de inserción de código: instala un plugin que permita añadir scripts en la cabecera, pega el píxel en la sección del <head> y guarda.
- Desde el tema: si usas un tema hijo, añade el código en el archivo header.php antes de </head>. Evita editar el tema principal, porque perderías los cambios al actualizarlo.
Muchos constructores de páginas y temas también tienen un campo propio para "scripts en la cabecera"; cualquiera de estas vías funciona.
En cualquier otra web
Magento, Wix o una web hecha a medida: el principio es el mismo. Busca la opción para añadir código personalizado en la cabecera o pide a tu desarrollador que pegue la línea del píxel antes de </head>. En la guía de primeros pasos tienes el proceso explicado con más detalle.
Paso 3: decide dónde y cuándo aparece
Aquí es donde un temporizador pasa de molesto a útil. En wwidgets puedes configurar:
- Páginas concretas: por ejemplo, solo en la página de inicio y en la colección en oferta.
- Retraso: que aparezca a los pocos segundos de llegar, cuando el visitante ya ha visto la página.
- Scroll: que se muestre cuando el usuario ha bajado un porcentaje de la página.
- Intención de salida: que aparezca cuando el visitante va a cerrar la pestaña, como último recordatorio.
- Dispositivo: distinto comportamiento en escritorio y en móvil.
- Frecuencia: cada cuánto se muestra al mismo visitante.
Paso 4: publica y mide
Activa la campaña y visita tu web para comprobar que el temporizador se ve bien en escritorio y en móvil. Después, revisa las estadísticas del widget: impresiones, clics, tasa de clics (CTR) y, si usas la variante con email, los formularios enviados. Los contactos que recojas pueden llegarte por email, webhook, Slack, Telegram u otros canales.
Buenas prácticas para tu cuenta atrás
Que sea siempre real
Es la regla más importante. Si el contador llega a cero, la oferta debe terminar. Los temporizadores que se reinician al recargar la página o que se renuevan cada día sin motivo engañan al cliente, dañan tu reputación y pueden considerarse una práctica comercial desleal según la normativa de consumo.
Un mensaje claro y concreto
"Oferta" a secas no dice nada. Compara:
Rebajas de verano: 30% en toda la tienda. Terminan en 02:14:36.
El visitante sabe qué gana, cuánto y hasta cuándo.
Una sola cuenta atrás por página
Dos temporizadores con fechas distintas confunden. Si tienes varias promociones, prioriza la principal.
Cuida la versión móvil
En móvil, una barra fina en la parte superior o inferior suele funcionar mejor que un popup grande. Asegúrate de que no tape el botón de añadir al carrito.
Combínala con una acción
Un contador sin botón genera urgencia pero no indica qué hacer. Añade siempre un CTA claro: "Ver ofertas", "Usar mi cupón" o "Avísame".
No abuses
Si tu tienda tiene una cuenta atrás activa todo el año, el cliente deja de creérsela. Resérvala para campañas reales y momentos clave.
Ideas de cuentas atrás por temporada
| Momento | Mensaje de ejemplo |
|---|---|
| Rebajas de enero | Últimos días de rebajas: hasta un 40% menos |
| Día de la Madre | Pide antes del jueves y llega a tiempo |
| Black Friday | Black Friday: la oferta termina el lunes a medianoche |
| Navidad | Último día para recibirlo antes de Nochebuena |
| Lanzamiento | La nueva colección llega en... Déjanos tu email |
Preguntas frecuentes
¿Necesito saber programar para añadir una cuenta atrás?
No. Solo tienes que pegar una línea de código una vez. Todo lo demás (texto, fecha, diseño, páginas) se configura desde el panel de wwidgets.
¿La cuenta atrás ralentiza mi tienda?
El píxel se carga de forma asíncrona, por lo que no bloquea el resto de la página. Aun así, conviene activar solo los widgets que realmente uses.
¿Puedo usar la misma cuenta atrás en Shopify y en WordPress?
Sí. El píxel funciona en cualquier web donde puedas añadir código, así que puedes gestionar varias webs desde el mismo panel.
Una cuenta atrás bien configurada es una de las formas más sencillas de dar a tus campañas el empujón que necesitan. Si quieres probarla, crea tu cuenta gratis y publica tu primer temporizador hoy mismo.
