> ## 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). # 🎋 Cómo configurar una barra de anuncios > ℹ️ **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. ¿Quieres compartir actualizaciones, promociones o mensajes importantes con cada visitante que llegue a tu tienda? 📢 Una **barra de anuncios** es una de las formas más sencillas de llamar la atención sin interrumpir la experiencia de compra. Ya sea una venta flash, una actualización de envíos o un aviso para suscribirse al boletín, una barra bien ubicada mantiene informados a los clientes desde el momento en que llegan. Esta guía te lleva a través de la configuración completa, desde crear tu primera barra hasta hacerla visible en tu tienda 🚀 --- # **📍 Lo que aprenderás** Al final de esta guía, sabrás cómo: * Crear una nueva barra de anuncios * Elegir la ubicación y el tipo de barra adecuados * Añadir tu mensaje y llamada a la acción * Aplicar un diseño que combine con tu marca * Configurar dónde y cuándo aparece * Publicarla en tu tienda --- # **✅ Antes de empezar** Asegúrate de que el embed de la app **Hoppy Announcement Bar** esté habilitado en tu tema. Sin esto, tu barra no aparecerá en la tienda, por mucho que la configures perfectamente. **Para habilitarlo:** 1. Ve a **Shopify Admin → Sales Channels → Online Store → Themes** (Administrador de Shopify → Canales de venta → Tienda online → Temas) 2. Haz clic en **Edit Theme** (Editar tema) en tu tema activo 3. Selecciona **App Embeds** (Embeds de apps) en la barra lateral izquierda 4. Busca **Announcement Bar/Banner** 5. Actívalo en **ON** (Activado) 6. Haz clic en **Save** (Guardar) 💡 *¿Ya está habilitado? ¡Estás listo para comenzar\!* --- # **⚙️ Paso 1 — Crea un nuevo anuncio** Abre la app **Hoppy Banners** desde tu administrador de Shopify. En el panel, haz clic en **Create New Announcement** (Crear nuevo anuncio). Serás dirigido a la pantalla de selección de ubicación. --- # **📌 Paso 2 — Elige una ubicación** La ubicación decide **dónde** aparecerá tu barra de anuncios en la tienda. Verás seis opciones: * **Storefront Page** (Página de la tienda) — Aparece en tu tienda principal (inicio, productos, colecciones, etc.) * **Email Collection Bar** (Barra de recolección de correos) — Una barra enfocada en recopilar correos electrónicos de los visitantes * **Cart Page** (Página del carrito) — Aparece en la página dedicada del carrito * **Cart Drawer** (Cajón del carrito) — Aparece dentro del cajón del carrito deslizable * **Checkout Page** (Página de pago) — Aparece durante el pago *(solo Shopify Plus)* * **Custom Position** (Posición personalizada) — Colócala manualmente en productos o colecciones específicas Selecciona la que se ajuste a tu objetivo. Para la mayoría de comerciantes, **Storefront Page** es el mejor punto de partida. Una vez seleccionada, haz clic en **Continue** (Continuar). --- # **🎨 Paso 3 — Elige una plantilla (o empieza desde cero)** A continuación, verás una colección de **visual presets** (plantillas visuales): combinaciones prediseñadas de colores, tipografías y diseños. Puedes: * **Choose a preset** (Elegir una plantilla) para acelerar tu diseño * O hacer clic en **Make your Own** (Hazlo tú mismo) para construir todo manualmente No te preocupes: podrás cambiar cada detalle del diseño más adelante. Las plantillas solo ahorran tiempo ⏱️ Después de seleccionar una plantilla (o elegir empezar desde cero), el editor se abrirá automáticamente. --- # **📝 Paso 4 — Añade tu contenido** Haz clic en la pestaña **Content** (Contenido). Aquí es donde escribes tu mensaje y eliges el comportamiento de la barra. --- ## **🏷️ Announcement Name** (Nombre del anuncio) Este es solo para tu referencia interna. Los clientes no lo verán. Usa algo reconocible como: * Banner de rebajas de verano * Alerta de envío gratuito * Encabezado de Black Friday 💡 *Un buen nombre ayuda cuando tienes varias barras activas a la vez.* --- ## **📢 Announcement Type** (Tipo de anuncio) Esto controla cómo se muestra tu mensaje. Hay cuatro tipos: | Tipo | Ideal para | | ----- | ----- | | **Simple** (Sencillo) | Un mensaje estático único | | **Running** (Desplazamiento) | Un marquesina o ticker con desplazamiento | | **Multiple** (Múltiple) | Diapositivas rotativas con varios mensajes | | **Email** (Correo electrónico) | Recopilar direcciones de correo de los visitantes | ### **Elegir un tipo** * **Simple** es perfecto para un mensaje claro y directo, como "Envío gratis en pedidos superiores a $50." * **Running** funciona muy bien para crear urgencia o ventas flash. Al seleccionarlo, verás un control deslizante **Animation Speed** (Velocidad de animación) y una casilla para cambiar la dirección del desplazamiento. * **Multiple** te permite alternar hasta 20 diapositivas diferentes. Al seleccionarlo, aparece un control deslizante **Display Duration** (Duración de visualización) para controlar cuánto tiempo permanece visible cada diapositiva. * **Email** transforma la barra en una herramienta de captación de leads. Al seleccionarlo, las opciones de CTA estándar se reemplazan por los campos **Success Message** (Mensaje de éxito) y **Email Placeholder** (Texto de marcador de correo). 💡 *Siempre puedes volver y cambiar el tipo más tarde.* --- ## **✍️ Title & Subheading** (Título y subtítulo) * **Title** (Título) — Este es tu mensaje principal. Admite formato de texto enriquecido (negrita, cursiva, enlaces, colores). * **Subheading** (Subtítulo) — Una línea de apoyo más pequeña debajo del título. ℹ️ El campo de subtítulo se oculta si seleccionas el tipo **Running**, ya que las barras marquesina suelen usar una sola línea de texto. --- ## **🔗 Call to Action (CTA)** (Llamada a la acción) Tu CTA indica a los clientes qué hacer a continuación. Elige un **CTA Type** (Tipo de CTA): * **No Call to Action** (Sin llamada a la acción) — Sin botón ni enlace * **Button** (Botón) — Un botón en el que se puede hacer clic con texto personalizado y un enlace * **Make entire bar clickable** (Hacer toda la barra clickeable) — Toda la barra se vuelve clickeable * **Coupon** (Cupón) — Muestra un código de cupón con un botón para copiarlo al portapapeles * **Trigger App Event** (Activar evento de app) — Lanza un evento personalizado para usarlo con otras apps Si seleccionas **Button**, **Make entire bar clickable** o **Trigger App Event**, verás campos para el enlace o el texto del botón. Si seleccionas **Coupon**, aparece el campo **Coupon Code** (Código de cupón) junto con una casilla para mostrar un icono de copiar. --- ## **🚪 Close Icon** (Icono de cierre) Habilita esta opción si quieres que los clientes puedan cerrar la barra. Cuando está activado, aparecen dos campos adicionales: * **Appear again after** (Volver a aparecer después de) — Cuánto tiempo debe transcurrir antes de que la barra vuelva a aparecer para ese visitante * **Unit** (Unidad) — Horas o días Esto es útil si no quieres molestar a los visitantes recurrentes con el mismo mensaje. --- ## **🎭 Banner Icons** (Iconos del banner) Los **Banner Icons** te permiten añadir iconos clickeables de redes sociales o de marca directamente dentro de la barra de anuncios para mejorar el engagement y ofrecer acceso rápido a plataformas externas. Esto es especialmente útil para promocionar perfiles en redes sociales, comunidades o enlaces externos importantes sin añadir más desorden de texto a la barra. --- ### **📌 Maximum Icons Allowed** Puedes añadir hasta **6 Banner Icons** dentro de una sola configuración de barra de anuncios. Esto ayuda a mantener un diseño limpio y equilibrado tanto en dispositivos de escritorio como móviles. --- ### **🖥️ Desktop & Mobile Visibility** Cada icono se puede configurar para aparecer en: * **Desktop devices** (Dispositivos de escritorio) * **Mobile devices** (Dispositivos móviles) * O en ambos simultáneamente Esto te da más flexibilidad según cómo quieras que se vea la barra de anuncios en diferentes tamaños de pantalla. --- ### **🔄 Replace Icon** Los iconos se pueden reemplazar en cualquier momento usando la **Icon Library** (Biblioteca de iconos) integrada. **Comportamiento disponible** * Explorar los iconos disponibles en la **Icon Library** * Reemplazar iconos existentes al instante * Actualizar iconos sin afectar el resto de la configuración ⚠️ Importante: Actualmente no se admiten cargas de iconos personalizados. Solo se pueden usar los iconos disponibles en la **Icon Library**. --- ### **🔗 Call to Action (CTA)** (Llamada a la acción) Cada **Banner Icon** puede incluir opcionalmente su propio comportamiento de llamada a la acción. **Opciones disponibles** * **No call to action** (Sin llamada a la acción) * **Add Link** (Añadir enlace) --- ### **➕ Add Link** (Añadir enlace) Cuando se selecciona **Add Link**: → Aparece el campo **CTA Link** (Enlace de CTA) Esto permite que el icono redirija a los visitantes a páginas internas o externas. **Ejemplos de uso** * Perfiles en redes sociales * Chats de WhatsApp * Comunidades de Discord * Colecciones de productos * Páginas de destino promocionales --- ### **⚠️ Important Notes** * Cada icono puede tener su propio comportamiento de CTA independiente * Algunos iconos pueden permanecer no clickeables mientras que otros redirigen a los visitantes * Eliminar un icono solo elimina ese icono específico y no afecta a los demás * La disposición de los iconos puede afectar el espaciado y la visibilidad en pantallas móviles más pequeñas 💡 Para una mejor experiencia en la tienda, evita saturar la barra de anuncios con demasiados iconos y enlaces simultáneamente. --- # **🎨 Paso 5 — Elige un diseño** Haz clic en la pestaña **Design** (Diseño) para darle estilo a tu barra. Para una configuración rápida, céntrate en estos elementos esenciales: * **Template** (Plantilla) — Elige entre más de 20 estilos prediseñados o mantén tu plantilla inicial * **Visibility** (Visibilidad) — Elige si aparece en **Desktop and Mobile** (Escritorio y móvil), **Desktop Only** (Solo escritorio) o **Mobile Only** (Solo móvil) * **Background** (Fondo) — Selecciona un **Single Color** (Color único), **Gradient** (Degradado) o **Pattern** (Patrón) * **Typography** (Tipografía) — Elige una fuente y configura el color del título * **Button** (Botón) — Ajusta el color del botón, el color del texto y el radio de esquina *(si usas un CTA de tipo botón)* 💡 *Para una personalización de diseño más profunda (incluyendo animaciones, CSS personalizado, efectos avanzados de botones y estilos de iconos sociales), consulta la documentación dedicada de **Design & Styling** (Diseño y estilos).* --- # **📍 Paso 6 — Configura la posición y la visibilidad** Haz clic en la pestaña **Placement** (Ubicación) para controlar dónde y cuándo aparece tu barra. --- ## **📐 Display Position** (Posición de visualización) Esto define la ubicación física de la barra: * **Top Push** (Empujar hacia abajo en la parte superior) — Empuja el contenido de la página hacia abajo * **Top Push (Sticky)** (Empujar en la parte superior fija) — Permanece fija en la parte superior mientras se desplaza * **Top Overlap** (Superposición en la parte superior) — Flota sobre la parte superior de la página * **Top Overlap (Sticky)** (Superposición fija en la parte superior) — Flota y permanece fija mientras se desplaza * **Bottom Overlap (Sticky)** (Superposición fija en la parte inferior) — Aparece en la parte inferior de la ventana de visualización * **Manual** (Manual) — La colocas tú mismo usando un fragmento de código o un bloque de app ℹ️ Si seleccionas **Manual**, el menú desplegable de segmentación por página se desactiva y se te proporciona un fragmento de código para pegar en tu tema. --- ## **🎯 Page Targeting** (Segmentación por página) Decide en qué páginas aparece la barra: * **Every page** (Todas las páginas) * **Home page only** (Solo página de inicio) * **All products** (Todos los productos) * **Products in specific collections** (Productos en colecciones específicas) * **Specific products** (Productos específicos) * **All collections** (Todas las colecciones) * **Specific collections** (Colecciones específicas) Si eliges una opción "específica", aparece un botón **Select Products** (Seleccionar productos) o **Select Collections** (Seleccionar colecciones) para que elijas exactamente dónde se muestra. --- ## **⏰ Scheduling** (Programación) ¿Quieres que la barra se publique más tarde o se detenga automáticamente? Establece una **Start Date** (Fecha de inicio) y una **End Date** (Fecha de finalización). Si los dejas en blanco, la barra aparece inmediatamente y permanece activa hasta que la despubliques manualmente. 💡 *Las opciones avanzadas de segmentación, incluyendo etiquetas de cliente, geolocalización, fuentes UTM y retrasos por tiempo en el sitio, están disponibles en la misma pestaña. Estas se tratan en detalle en la documentación de **Advanced Targeting** (Segmentación avanzada).* --- # **🚀 Paso 7 — Publica tu barra** Una vez que todo se vea bien, es hora de hacerla visible. Haz clic en **Publish** (Publicar) en la esquina superior derecha. Aparecerá un mensaje de éxito. Si tu **App Embed** ya está habilitado, ¡todo está listo! 🎉 Si el **App Embed** no está habilitado, el mensaje te lo recordará y te proporcionará un enlace rápido para activarlo en el editor de tu tema. ⚠️ **Importante:** Solo guardar no hace que la barra sea visible para los clientes. Debes hacer clic en **Publish**. --- # **🎉 Resultado final** Una vez publicada correctamente: ✅ Tu barra de anuncios aparece en las páginas seleccionadas ✅ Los clientes ven tu mensaje inmediatamente al visitar la tienda ✅ Tu CTA genera clics, registros o ventas ✅ El diseño se integra perfectamente con la identidad visual de tu tienda ✅ Puedes editarla, duplicarla o despublicarla en cualquier momento desde el panel --- # **📚 Documentación relacionada** ¿Quieres ir más allá? Consulta estas guías dedicadas: * **Design & Styling** (Diseño y estilos) — Personalización profunda de colores, tipografías, animaciones y CSS personalizado * **Advanced Targeting** (Segmentación avanzada) — Geolocalización, etiquetas de cliente, filtrado por UTM y reglas por tiempo en el sitio * **Translations** (Traducciones) — Barras de anuncios multilingües * **Troubleshooting** (Solución de problemas) — Qué hacer si tu barra no se muestra ¡Felices anuncios! 🥂