ℹ️ Note: Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.

Hoppy Announcement Bar te ofrece cuatro formas distintas de mostrar mensajes en tu tienda. Cada tipo se comporta de forma diferente, admite distintas configuraciones de contenido y está diseñado para casos de uso específicos.

Elegir el tipo correcto desde el principio te ayuda a evitar retrabajos y garantiza que tu anuncio se comporte exactamente como esperas en la tienda activa.

⚠️ Antes de empezar

El tipo de anuncio se selecciona dentro de la pestaña Content (Contenido) al crear o editar un anuncio.

Puedes cambiar de tipo en cualquier momento, pero ten en cuenta:

• Algunos campos aparecerán o desaparecerán según el tipo seleccionado
• Los elementos de contenido pueden recortarse o ampliarse al cambiar entre ciertos tipos
• La configuración de diseño y ubicación se comparte entre todos los tipos

ℹ️ El tipo de anuncio no es lo mismo que la ubicación. La ubicación controla dónde aparece la barra. El tipo controla cómo se comporta la barra.

📋 Los cuatro tipos de anuncios

1️⃣ Anuncio simple

El tipo Simple muestra un único mensaje estático. Es el formato más utilizado porque es sencillo y funciona para casi todos los casos de uso.

Qué hace

• Muestra un anuncio con título, subtítulo y llamada a la acción opcional
• Permanece estático en la página hasta que el cliente navegue a otra página o la cierre
• Admite todos los tipos de CTA: botón, clic en toda la barra, cupón, activar evento o sin CTA

Campos de contenido disponibles

• Title (Título) — El mensaje principal. Admite formato de texto enriquecido.
• Subheading (Subtítulo) — Una línea secundaria debajo del título.
• Call to action type (Tipo de llamada a la acción) — Elige cómo interactúan los clientes con la barra.

Comportamiento de la CTA

ℹ️ Cuando se selecciona Trigger App Event (Activar evento de la app), aparece un campo adicional de Trigger ID (ID de activación). Este ID debe coincidir con el nombre del evento configurado en la app receptora.

Ideal para

• Anuncios de rebajas en toda la tienda
• Actualizaciones de políticas de envío
• Ofertas por tiempo limitado
• Promociones generales

2️⃣ Anuncio de línea desplazante

El tipo Running crea una tira continua de desplazamiento horizontal — similar a una marquesina de noticias. El texto del título se anima a lo largo de la barra en bucle.

Qué hace

• Muestra un mensaje de título en un desplazamiento suave e infinito
• La dirección y la velocidad son totalmente configurables
• El campo de subtítulo está oculto porque el formato se basa en una sola línea en movimiento

Campos de contenido disponibles

• Title (Título) — El mensaje que se desplaza por la barra. Admite texto enriquecido.
• Animation speed slider (Control deslizante de velocidad de animación) — Un control de 1 a 80 que regula la rapidez del movimiento del texto.
• Run left to right (Desplazar de izquierda a derecha) — Una casilla que invierte la dirección de desplazamiento predeterminada.

Cómo funciona la velocidad de animación

• Valores bajos = desplazamiento más lento y legible
• Valores altos = movimiento más rápido de la tira
• La velocidad se calcula de forma dinámica según la longitud del texto del título

Comportamiento de la CTA

Los anuncios desplazantes admiten CTA de botón, cupón, evento y sin CTA. La opción Make entire bar clickable (Hacer toda la barra clickeable) envuelve el área de desplazamiento en un enlace.

Si se usa un botón o cupón, aparece de forma estática junto al texto en movimiento.

Ideal para

• Alertas de ventas flash
• Fechas límite de envío urgentes
• Eslogan de marca repetitivo
• Recordatorios sensibles al tiempo

⚠️ Importante: las barras de línea desplazante funcionan mejor con títulos cortos. Los mensajes muy largos pueden crear un ritmo de desplazamiento irregular en pantallas pequeñas.

3️⃣ Anuncios múltiples rotativos

El tipo Multiple te permite apilar varios anuncios en una sola barra que los rota automáticamente. Los clientes ven un mensaje a la vez, con flechas de navegación para explorarlos manualmente.

Qué hace

• Recorre varias diapositivas de anuncios
• Cada diapositiva tiene su propio título, subtítulo y CTA
• Avanza automáticamente según una duración de visualización configurable
• Incluye navegación con flechas izquierda/derecha

Campos de contenido disponibles

• Announcement display duration (Duración de visualización del anuncio) — Un control de 1 a 10 segundos que determina cuánto tiempo permanece visible cada diapositiva antes de rotar automáticamente.
• Announcement #1, #2, #3... (Anuncio n.º 1, 2, 3...) — Cada diapositiva es un bloque de contenido independiente con su propio título, subtítulo y CTA.
• Add new announcement (Agregar nuevo anuncio) — Añade diapositivas adicionales.

Límites de diapositivas

• Mínimo: 2 diapositivas
• Máximo: 20 diapositivas

Puedes reordenar las diapositivas con las flechas arriba/abajo y eliminarlas si tienes más de 2.

Comportamiento de la CTA

Cada diapositiva puede tener su propia CTA independiente. Una puede tener un botón, otra un cupón y una tercera sin CTA.

Tipos de CTA admitidos por diapositiva: botón, clic en toda la barra, cupón, activar evento o ninguna.

Efectos de animación

La transición entre diapositivas se controla con la opción Animation (Animación) en la pestaña Design (Diseño):

• Slide (Deslizar) — Transición horizontal estándar
• Fade (Desvanecer) — Fundido cruzado suave
• Cube (Cubo) — Efecto de rotación 3D
• Flip (Voltear) — Transición con efecto de volteo de tarjeta

Ideal para

• Mostrar varias promociones a la vez
• Anunciar diferentes categorías de productos
• Rotar mensajes de envío, devolución y confianza
• Resaltar varios cupones sin saturar la página

4️⃣ Banner de captación de correos

El tipo Email transforma la barra de anuncios en un formulario de captación de leads. Muestra un campo de entrada de correo y un botón de envío, y luego muestra un estado de éxito tras el envío.

Qué hace

• Muestra un título, subtítulo y un campo de entrada de correo electrónico
• Muestra un Success Message (Mensaje de éxito) después de que el cliente envíe su correo
• Puede incluir un código de cupón como recompensa por suscribirse

Campos de contenido disponibles

• Title (Título) — El mensaje principal que invita a los clientes a suscribirse.
• Subheading (Subtítulo) — Texto de apoyo debajo del título.
• Button text (Texto del botón) — La etiqueta del botón de envío. Si se deja en blanco, el valor predeterminado es Subscribe.
• Success Message (Mensaje de éxito) — El texto de confirmación que se muestra tras un envío de correo exitoso.
• Email Placeholder (Marcador de posición del correo) — El texto de ayuda dentro del campo de correo vacío.

Comportamiento de la CTA

Las barras de captación de correo admiten dos modos de CTA:

• Button (Botón) — Un botón de envío estándar. La barra recoge el correo y muestra el estado de éxito.
• Coupon (Cupón) — Muestra un código de cupón junto con o en lugar del campo de entrada, con un botón de copiar opcional.

Las opciones Make entire bar clickable (Hacer toda la barra clickeable) y Trigger App Event (Activar evento de la app) no están disponibles para este tipo porque la barra se basa en el envío de formularios.

Vista previa del estado de éxito

En la vista previa de la app verás dos estados de la barra apilados:

1. El formulario activo de captación de correo
2. La barra del mensaje de éxito

En la tienda activa, los clientes solo ven el estado de éxito después de enviar su correo.

Ideal para

• Construir listas de boletines
• Ofrecer códigos de descuento a cambio de correos
• Registro en listas de espera previo al lanzamiento
• Promover programas VIP o de fidelización

🔀 Cómo la selección de tipo afecta los ajustes visibles

Elegir un tipo de anuncio cambia dinámicamente los campos que aparecen en la pestaña Content (Contenido). Aquí tienes una referencia rápida:

Campos que aparecen por tipo

Límites de elementos de contenido

• Simple, Running, Email — Solo se usa el primer elemento de contenido. Aunque existan varios elementos en el modelo de datos, solo se renderiza el primero.
• Multiple — Se usan todos los elementos de contenido como diapositivas individuales.

⚠️ Si cambias de Multiple a Simple, las diapositivas adicionales se conservan en segundo plano pero no se mostrarán. Volverán a aparecer si vuelves a Multiple.

🎯 Tipos de llamadas a la acción explicadas

El comportamiento de la CTA es prácticamente coherente entre tipos de anuncios, con algunas excepciones específicas.

Sin llamada a la acción

La barra es puramente informativa. No se renderizan botones, enlaces ni áreas clicables.

Botón

Aparece un botón clickeable. Configuras:

• Button text (Texto del botón) — Lo que dice el botón
• Link (Enlace) — A dónde navega el botón

Hacer toda la barra clickeable

Toda el área del anuncio se convierte en un enlace. Al hacer clic en cualquier parte de la barra, se navega a la URL configurada.

ℹ️ Si la barra contiene elementos clicables anidados como iconos sociales, estos siguen funcionando de forma independiente. El clic en toda la barra no los anula.

Cupón

Muestra un cuadro de código de cupón con estilo. Configuras:

• Coupon Code (Código de cupón) — El código de descuento real
• Show copy button (Mostrar botón de copiar) — Añade un icono de copiado con un solo clic junto al código

Activar evento de la app

En lugar de navegar a una URL, el botón envía un CustomEvent del navegador. Configuras:

• Trigger ID (ID de activación) — La cadena del nombre del evento (por ejemplo, my-app:open-modal)

Otras apps o scripts personalizados del tema que escuchen este nombre de evento pueden responder.

⚠️ Las CTA de activación de evento no están disponibles en las barras de captación de correo porque la acción principal de la barra es el envío del formulario.

🎨 Comportamiento del diseño por tipo

La mayoría de los ajustes de diseño se aplican de forma universal, pero algunos se comportan de forma distinta según el tipo.

Opción Animation en la pestaña Design

• Simple y Email — La animación controla el efecto de entrada cuando la barra se carga por primera vez.
• Running — La velocidad de animación se controla en la pestaña Content (Contenido), no en la pestaña Design (Diseño).
• Multiple — La animación controla el efecto de transición entre diapositivas (deslizar, desvanecer, cubo, voltear).

Iconos sociales

Los iconos sociales se pueden añadir a todos los tipos. Controlas la visibilidad por separado en escritorio y móvil.

• Los iconos aparecen de forma estática junto al contenido
• Cada icono puede enlazar a una URL o permanecer no clicable

Icono de cierre

Todos los tipos admiten el icono de cierre. Cuando está activado, puedes configurar:

• Appear again after (Volver a aparecer después de) — Cuántas horas o días deben pasar hasta que la barra vuelva a aparecer para un visitante recurrente

Si no se establece un tiempo de reaparición, la barra permanece oculta permanentemente después de cerrarse.

📱 Comportamiento en móviles

Los cuatro tipos de anuncios son totalmente responsivos. Sin embargo, los ajustes de diseño se aplican automáticamente:

• Las barras de captación de correo se apilan verticalmente en móvil: el campo de entrada y el botón aparecen en líneas separadas
• Las barras rotativas múltiples reducen el relleno de las flechas y disminuyen ligeramente el tamaño de la fuente
• Las barras de línea desplazante mantienen la velocidad de desplazamiento pero comprimen el tamaño de los iconos si los iconos sociales están activados
• Las barras simples con botones pueden centrar el texto en pantallas más pequeñas según el tipo de CTA

Puedes anular la apariencia en móvil usando el panel Custom CSS (CSS personalizado) en la pestaña Design (Diseño) si es necesario.

💡 Ejemplos de casos de uso

Ejemplo 1 — Barra simple con cupón

• Type: Simple
• Title: "Summer Sale is Live ☀️"
• Subheading: "Use code SUNNY for 20% off"
• CTA: Coupon
• Coupon code: SUNNY
• Result: Una barra estática y limpia con un código de descuento copiable.

Ejemplo 2 — Tira de urgencia desplazante

• Type: Running
• Title: "Free shipping ends tonight at midnight ⏰"
• Animation speed: 25
• CTA: None
• Result: Un mensaje de urgencia que se desplaza continuamente en la parte superior de la tienda.

Ejemplo 3 — Diapositivas múltiples para distintas colecciones

• Type: Multiple
• Slide 1: "Up to 50% off Shoes →" con enlace de botón a /collections/shoes
• Slide 2: "New Arrivals in Accessories →" con enlace de botón a /collections/accessories
• Slide 3: "Free returns on all orders" sin CTA
• Display duration: 4 seconds
• Result: Una barra que recorre automáticamente tres promociones distintas.

Ejemplo 4 — Captación de correo con recompensa de cupón

• Type: Email
• Title: "Join the VIP list"
• Subheading: "Get 15% off your first order"
• Button text: "Get My Code"
• Success Message: "Welcome! Your code WELCOME15 is ready."
• Email Placeholder: "Enter your email"
• Result: Una barra de captación de leads que recompensa a los suscriptores con un cupón instantáneo.

⚠️ Notas e limitaciones importantes

Cambio de tipo

Cambiar entre tipos no elimina tu contenido. Sin embargo:

• Cambiar de Multiple a Simple oculta las diapositivas adicionales
• Cambiar de Running a Simple vuelve a mostrar el campo de subtítulo
• Cambiar a Email oculta los campos de Trigger ID si estaban configurados

Revisa siempre tu contenido después de cambiar de tipo.

Longitud de la línea desplazante

Los títulos muy largos en barras desplazantes pueden causar tiempos de desplazamiento irregulares, especialmente en móvil. Prueba con la longitud real de tu mensaje antes de publicar.

Mínimo de diapositivas en Multiple

No puedes publicar un anuncio Multiple con menos de 2 diapositivas. Si necesitas solo un mensaje, usa el tipo Simple.

Estado de éxito de la barra de correo

El estado de éxito solo aparece después de que un cliente envíe un correo. La vista previa dentro de la app muestra ambos estados apilados como referencia, pero los clientes en vivo ven primero el formulario.

Clic en toda la barra y elementos anidados

Cuando Make entire bar clickable (Hacer toda la barra clickeable) está activado, hacer clic en iconos sociales o en el botón de copiar sigue funcionando como se espera. El clic en toda la barra ignora esos elementos interactivos anidados.

🎉 Resultado final

Comprender los cuatro tipos de barras de anuncios te ayuda a emparejar el formato adecuado con tu objetivo:

✅ Simple — Ideal para promociones únicas y estáticas
✅ Running — Ideal para mensajes de urgencia y tiras de estilo marquesina
✅ Multiple — Ideal para rotar varias ofertas en una sola ubicación
✅ Email — Ideal para captar leads y hacer crecer las listas de suscriptores

Cada tipo admite el mismo sistema de diseño, reglas de ubicación, programación y lógica de segmentación. La diferencia radica únicamente en cómo se presenta e interactúa con el contenido.

Elegir el tipo correcto desde el principio garantiza que tu anuncio se sienta nativo en tu tienda y entregue el mensaje correcto en el formato adecuado 🚀

Actualizado el: 10/09/2026