Dos plantillas de popup de urgencia construidas sobre un mismo sistema: Flash Sale Countdown anuncia una oferta con una cuenta regresiva en vivo y una fila de productos, y Cart Exit — Timer + Coupon retiene a los visitantes que abandonan un carrito con su propio producto, una cuenta regresiva y un código de descuento que se copia al portapapeles. Las dos comparten los mismos ajustes predefinidos de Style Accent, el diseñador completo de temporizadores de Personyze y el sistema de vista previa con productos de demostración, así que todo lo que hay en esta página se aplica a las dos, salvo que una sección diga lo contrario.
Acentos de estilo
El primer ajuste de cada plantilla es Style accent — un desplegable que cambia el color de todo el popup:
- bold — fondo oscuro con acentos rojos (el predeterminado)
- light — la misma disposición sobre blanco
- gold — oscuro premium con acentos dorados
- ocean — blanco con acentos azules
El acento controla a la vez todos los elementos con color — el banner, las cajas y los números del temporizador, el borde del cupón, los botones, las insignias y los precios de oferta — y sigue funcionando incluso después de personalizar elementos concretos, porque todos los estilos predeterminados hacen referencia a los colores del acento en lugar de fijarlos. Elija primero el acento y después ajuste lo que quiera.
El temporizador de cuenta regresiva
Las dos plantillas usan el diseñador completo de temporizadores de Personyze:
- Fixed end date — cuenta hasta una fecha y una hora concretas, con zona horaria; la opción natural para una oferta real.
- Per-visitor (cookie-based) — cada visitante tiene su propio plazo, que empieza en su primera vista, p. ej. “su descuento caduca en 15 minutos”. Recomendado para recuperar carritos, con reinicio configurable.
- Restart every time — se reinicia en cada vista; sobre todo para pruebas y para una urgencia permanente.
Las cajas, los números y los rótulos DAYS / HOURS / MINUTES / SECONDS se configuran desde el menú. De forma predeterminada, las cajas van una junto a otra sin separador; el campo Separator character le permite añadir dos puntos o cualquier carácter entre ellas. También puede definir qué pasa cuando el temporizador llega a cero — un mensaje de tiempo agotado o una acción de seguimiento —, para que un popup caducado nunca muestre un temporizador muerto.
Productos de demostración — solo en la vista previa
Mientras diseña, antes de conectar un catálogo de productos, las plantillas muestran contenido de demostración con un aviso: Flash Sale muestra seis tarjetas de producto de ejemplo y Cart Exit muestra un producto de carrito de ejemplo. Las demostraciones solo aparecen en el editor de Personyze y en los enlaces de vista previa; en cuanto su catálogo devuelve productos reales — o, en el caso de Cart Exit, el visitante tiene un artículo real en el carrito —, los datos reales toman el relevo. Los visitantes normales del sitio nunca ven la demostración.
Flash Sale Countdown
Estructura, de arriba abajo: la etiqueta superior (“⚡ FLASH SALE”), el titular (“UP TO 40% OFF — TODAY ONLY”), la línea secundaria, la cuenta regresiva, el botón de CTA y una fila de productos con desplazamiento horizontal. La fila la rellena el algoritmo que usted asocie — para esta plantilla funciona mejor un algoritmo filtrado a productos con descuento, para que el popup muestre artículos que de verdad están en oferta. Las tarjetas muestran la foto del producto, una insignia automática “X% OFF” (con un umbral mínimo de descuento), el título y el precio de oferta con tachado. Las flechas de desplazamiento aparecen en escritorio y se ocultan automáticamente en los dispositivos táctiles, donde la fila se desliza.
Consejo sobre el disparador: muéstrelo una vez por visitante y por oferta, programe la acción para el periodo de la oferta y excluya las páginas ya dedicadas a la oferta.
Cart Exit — Timer + Coupon
Estructura: una franja de banner a todo el ancho (“YOUR DISCOUNT EXPIRES IN”), la cuenta regresiva y después dos columnas — el producto del carrito del visitante en una tarjeta blanca (imagen, título, precio de oferta) y la parte del mensaje: titular, línea secundaria, la caja de cupón con borde discontinuo, el CTA y un enlace “No thanks” para cerrar.
El cupón: el código que introduzca se muestra en la caja y se copia al portapapeles del visitante cuando pulsa Copy, con una confirmación “Copied!”. El popup muestra el código — no aplica el descuento por sí mismo. El código tiene que existir en su tienda y, si su plataforma admite enlaces que aplican descuentos, puede poner uno en el botón de CTA para que el descuento se aplique al hacer clic.
El producto del carrito es el artículo más reciente del carrito del visitante, obtenido de las interacciones que Personyze registra en su sitio.
Consejo sobre el disparador: intención de salida en escritorio, con la condición de que el carrito no esté vacío y un límite de una vez por sesión. La intención de salida basada en el ratón no existe en los dispositivos táctiles — en móvil, use un disparador por tiempo o por desplazamiento. Tanto el enlace para cerrar como la × de la esquina usan el comportamiento estándar de no volver a mostrar.
Preguntas frecuentes
¿El ajuste de acento sobrescribe mis estilos personalizados? No. Cambia la paleta de colores compartida; los estilos de elementos que usted edite se conservan, y cualquiera de sus estilos que haga referencia a los colores del acento sigue automáticamente al ajuste predefinido.
¿Qué pasa cuando el temporizador llega a cero? Se configura en el diseñador de temporizadores: mostrar un mensaje de tiempo agotado o lanzar una acción de seguimiento. Las cuentas regresivas por visitante también pueden reiniciarse después del periodo que elija.
¿El botón Copy aplica el descuento? No — copia el código. El código tiene que ser válido en su tienda; use en el CTA una URL que aplique el descuento para que se aplique automáticamente.
¿Qué producto se muestra si el carrito tiene varios artículos? El artículo más reciente del carrito — aquel con el que el visitante interactuó por última vez.
¿Puede la fila de Flash Sale mostrar solo artículos con descuento? Sí — asocie un algoritmo filtrado a productos con un descuento activo; la fila muestra lo que devuelva el algoritmo.
¿Ven los visitantes alguna vez el contenido de demostración? No. Las demostraciones solo se muestran en el editor de Personyze y en los enlaces de vista previa, y solo cuando no hay datos reales.