> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 📢 Tipos de barra de anuncios explicados > ℹ️ **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** | Tipo de CTA | Comportamiento | | ----- | ----- | | **No call to action** (Sin llamada a la acción) | Mensaje únicamente, sin elementos clicables. | | **Button** (Botón) | Un botón independiente que enlaza a cualquier URL. | | **Make entire bar clickable** (Hacer toda la barra clickeable) | Toda la barra se convierte en un enlace. Al hacer clic en cualquier lugar, navega a la URL configurada. | | **Coupon** (Cupón) | Muestra un código de cupón con un botón opcional para copiarlo al portapapeles. | | **Trigger App Event** (Activar evento de la app) | Envía un evento personalizado que otras apps pueden escuchar. Útil para abrir modales o activar flujos de trabajo. | ℹ️ 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** | Field (Campo) | Simple | Running | Multiple | Email | | ----- | ----- | ----- | ----- | ----- | | **Title** (Título) | ✅ | ✅ | ✅ | ✅ | | **Subheading** (Subtítulo) | ✅ | ❌ | ✅ | ✅ | | **Animation speed slider** (Control deslizante de velocidad de animación) | ❌ | ✅ | ❌ | ❌ | | **Display duration slider** (Control deslizante de duración de visualización) | ❌ | ❌ | ✅ | ❌ | | **Run left to right** (Desplazar de izquierda a derecha) | ❌ | ✅ | ❌ | ❌ | | **Add/remove slides** (Agregar o eliminar diapositivas) | ❌ | ❌ | ✅ | ❌ | | **Button text** (Texto del botón) | ✅ | ✅ | ✅ | ✅ | | **Success Message** (Mensaje de éxito) | ❌ | ❌ | ❌ | ✅ | | **Email Placeholder** (Marcador de posición del correo) | ❌ | ❌ | ❌ | ✅ | | **Trigger ID** (ID de activación) | ✅ | ✅ | ✅ | ❌ | | **Coupon code** (Código de cupón) | ✅ | ✅ | ✅ | ✅ | | **Copy button toggle** (Activar botón de copiar) | ✅ | ✅ | ✅ | ✅ | ### **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 🚀