¿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:

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! 🥂

Actualizado el: 01/09/2026