ℹ️ 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 que tu barra de anuncios aparezca en un lugar específico que la ubicación automática no cubra? 🎯

La ubicación personalizada te da control total sobre exactamente dónde aparece tu barra —ya sea dentro de una sección específica de tu tema, debajo de tu navegación, dentro del área de descripción de un producto o en cualquier otro lugar donde puedas agregar un fragmento de código o un bloque de aplicación.

Esta guía te lleva paso a paso para configurar una barra de anuncios con ubicación manual para que se renderice exactamente donde quieres ✨

✅ Antes de comenzar

Asegúrate de que la incrustación de la aplicación Hoppy Announcement Bar esté habilitada en tu tema. Incluso con ubicación personalizada, la incrustación carga los scripts y estilos necesarios.

Para habilitarla:

1. Ve a Shopify Admin → Sales Channels → Online Store → Themes
2. Haz clic en Edit Theme (Editar tema) en tu tema activo
3. Selecciona App Embeds (Incrustaciones de aplicaciones) en la barra lateral izquierda
4. Busca Announcement Bar/Banner (Barra de anuncios/banner)
5. Actívalo en ON (Activado)
6. Haz clic en Save (Guardar)

💡 ¿Ya está habilitado? ¡Estás listo para comenzar!

⚙️ Paso 1 — Crear un nuevo anuncio

Abre la aplicación Hoppy Announcement Bar 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 — Seleccionar la posición personalizada

Entre las opciones de ubicación, elige Custom Position (Posición personalizada).

Esto le indica a la aplicación que tú —no el inyector automático— decidirás exactamente dónde aparece la barra en tu tienda.

Una vez seleccionada, haz clic en Continue (Continuar).

🎨 Paso 3 — Diseñar tu barra

Crea tu barra de anuncios como prefieras:

• Agrega tu title (título), subheading (subtítulo) y CTA (llamada a la acción)
• Elige un announcement type (tipo de anuncio) (Simple, Running, Multiple o Email)
• Estilízala en la pestaña Design (Diseño)

💡 Para obtener orientación detallada sobre el diseño —incluidas plantillas, colores, animaciones y CSS personalizado— consulta la documentación dedicada de Design & Styling.

📍 Paso 4 — Configurar la Display Position en Manual

Haz clic en la pestaña Placement (Ubicación).

En el menú desplegable Display Position (Posición de visualización), selecciona Manual.

Al hacerlo:

• El menú desplegable Page Targeting (Segmentación de página) se desactiva automáticamente y se establece en Custom (Personalizado)
• La barra ya no se inyectará automáticamente en la página
• En su lugar, esperará a que la coloques usando un fragmento de código o un bloque de aplicación

Esto es exactamente lo que hace funcionar la ubicación personalizada 🛠️

📋 Paso 5 — Copiar tu fragmento de ubicación

Una vez guardada la barra, la pestaña Placement muestra un fragmento de código copiable:

<div class="futureblink-announcement-block" id="{announcementId}"></div>

Cada anuncio tiene un ID único. El fragmento le indica a la aplicación exactamente qué barra renderizar dentro de ese contenedor.

Haz clic en el botón de copiar para guardarlo en tu portapapeles 📋

🧩 Paso 6 — Agregar el fragmento a tu tema

Tienes dos formas de colocar el fragmento:

Opción A — Usar un App Block (recomendado)

Este es el método más fácil y funciona con temas Online Store 2.0.

1. Ve a Shopify Admin → Sales Channels → Online Store → Themes
2. Haz clic en Edit Theme en tu tema activo
3. Navega hasta la página o sección donde quieres la barra
4. Haz clic en Add Section (Agregar sección) o Add Block (Agregar bloque)
5. Ve a la pestaña Apps (Aplicaciones)
6. Selecciona Hoppy Announcement Bar
7. Pega tu Announcement ID (ID de anuncio) en la configuración del bloque
8. Arrastra el bloque a la posición deseada
9. Haz clic en Save

Opción B — Usar un fragmento de Liquid personalizado

Usa esto si quieres colocar la barra dentro de un archivo Liquid específico o un tema que no sea OS 2.0.

1. Ve a Shopify Admin → Sales Channels → Online Store → Themes
2. Haz clic en el menú ... de tu tema activo → Edit Code (Editar código)
3. Abre el archivo Liquid donde quieres que aparezca la barra
4. • Ejemplos comunes: theme.liquid, product.liquid, header.liquid
4. Pega el fragmento donde quieres que se renderice
5. Haz clic en Save

⚠️ Importante:

• Pega el fragmento solo una vez por barra
• Si el mismo ID aparece varias veces en la misma página, la barra podría renderizarse en cada contenedor coincidente
• Asegúrate de que el contenedor esté dentro de la etiqueta <body>, no dentro de <head>

🚀 Paso 7 — Guardar y publicar

Vuelve al editor de Hoppy Announcement Bar y haz clic en Save.

Luego haz clic en Publish (Publicar) para ponerla en línea.

⚠️ Importante: Solo guardar no hace que la barra sea visible para los clientes. Debes hacer clic en Publish.

Una vez publicada, visita la página donde colocaste el fragmento para confirmar que la barra aparece en el lugar correcto 👀

🎯 Cuándo usar la ubicación personalizada

La ubicación personalizada es especialmente útil cuando:

• Quieres la barra dentro de una sección específica del tema en lugar de globalmente en la parte superior o inferior
• El diseño de tu tema entra en conflicto con la ubicación automática superior/inferior
• Estás ejecutando varias barras y necesitas controlar exactamente dónde se ubica cada una
• Quieres la barra dentro de una sección de un creador de páginas, una página de destino personalizada o una plantilla de producto específica
• Necesitas que la barra aparezca entre bloques de contenido existentes en lugar de encima o debajo de ellos

⚠️ Consejos comunes

Mover o eliminar la barra

Debido a que la barra está vinculada a un contenedor manual, puedes:

• Mover el bloque de aplicación o el fragmento Liquid a una nueva posición en cualquier momento
• Eliminar el bloque o fragmento para evitar que la barra se renderice en esa página
• Reutilizar el mismo fragmento en varias plantillas si es necesario

Combinar con segmentación

Incluso con ubicación personalizada, aún puedes usar:

• Scheduling (Programación) — Establecer fechas de inicio y fin
• Geolocation (Geolocalización) — Mostrar solo a visitantes de países específicos
• Customer Targeting (Segmentación de clientes) — Filtrar por estado de inicio de sesión, etiquetas o gasto total acumulado
• UTM Source Filtering (Filtrado por fuente UTM) — Mostrar solo a visitantes de fuentes de tráfico específicas
• Time-on-Site Delay (Retraso por tiempo en el sitio) — Retrasar la aparición de la barra

💡 Estas opciones se configuran en la misma pestaña Placement. Para una descripción completa, consulta la documentación de Advanced Targeting.

Ubicación personalizada en checkout y carrito

• Las ubicaciones Cart page (Página del carrito) y Cart Drawer (Cajón del carrito) también admiten la posición Manual si quieres control preciso dentro del área del carrito
• La ubicación Checkout Page (Página de pago) (solo Shopify Plus) usa el sistema de bloques de extensión de la interfaz de usuario de checkout en lugar de un fragmento Liquid

🎉 Resultado final

Una vez configurada correctamente:

✅ Tu barra de anuncios aparece exactamente donde la colocaste en tu tema
✅ Respeta todas las reglas de segmentación activas (horario, geolocalización, segmentos de clientes, etc.)
✅ Puedes cambiar su posición o eliminarla en cualquier momento sin modificar el contenido o el diseño de la barra
✅ Varias barras personalizadas pueden coexistir en la misma página en diferentes secciones
✅ El diseño de tu tienda se mantiene limpio e intencionado ✨

📚 Documentación relacionada

• How to Set Up an Announcement Bar (Cómo configurar una barra de anuncios) — Guía completa para crear y publicar cualquier tipo de barra
• Design & Styling (Diseño y estilo) — Personalización avanzada de colores, fuentes, animaciones y CSS personalizado
• Advanced Targeting (Segmentación avanzada) — Programación, geolocalización, etiquetas de cliente, filtrado UTM y reglas de tiempo en el sitio
• Announcement Bar Types Explained (Tipos de barras de anuncios explicados) — Diferencias entre las barras Simple, Running, Multiple y Email

¡Feliz colocación! 🥂

Actualizado el: 10/09/2026