ℹ️ 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 hacer crecer tu lista de correos directamente desde tu tienda? 🚀

La Email Collection Bar en Hoppy Announcement Banner facilita la captura de correos de visitantes y convierte a navegantes ocasionales en suscriptores, todo sin salir de tu tienda Shopify.

Una vez configurada, los clientes pueden suscribirse directamente desde la barra e incluso puedes recompensarlos con un código de cupón automático para fomentar las altas ✨

✅ Antes de empezar

Antes de crear tu Email Collection Bar, asegúrate de:

• La aplicación Hoppy Announcement Banner esté instalada en tu tienda Shopify
• Tu tema de Shopify tenga habilitado el Announcement Banner app embed (embed de la aplicación Announcement Banner)

Si aún no has activado el embed de la aplicación, ve a:

Shopify Admin → Sales Channels → Online Store → Themes → Edit Theme → App Embeds

Luego, activa Announcement Banner y haz clic en Save (Guardar).

🛠️ Paso 1 — Crear una Email Collection Bar nueva

Abre la aplicación Hoppy Announcement Banner desde tu panel de Shopify.

Luego:

→ Haz clic en Create New Announcement (Crear anuncio nuevo)

→ Selecciona Email Collection Bar (Barra de recolección de correos)

→ Elige un Preset (Predeterminado) que combine con el estilo de tu tienda, o haz clic en Make your Own (Crear el tuyo) para empezar desde cero

Una vez seleccionada, la página de configuración se abrirá automáticamente.

⚙️ Paso 2 — Configurar el contenido

Después de abrir la página de configuración, llegarás a la pestaña Content (Contenido).

Esta sección controla lo que ven tus visitantes y cómo se comporta el formulario de recolección de correos.

🏷️ Nombre del anuncio

Este campo es solo para uso interno.

Los clientes nunca verán este nombre.

Usa cualquier nombre reconocible, como:

• Barra de registro al boletín
• Banner de oferta de bienvenida
• Generador de lista de correos

💡 Usar nombres internos adecuados facilita identificar las configuraciones más tarde, especialmente si tu tienda ejecuta varias campañas.

📝 Título y subtítulo

Estos son los mensajes principales que se muestran a los visitantes.

• Title (Título): el titular de tu Email Collection Bar. Usa el editor de texto enriquecido para darle el formato que desees.
• Subheading (Subtítulo): un mensaje complementario debajo del título (opcional).

Ejemplo

• Title: "Únete a nuestra lista VIP y obtén un 15% de descuento"
• Subheading: "Sé el primero en enterarte de las novedades y ofertas exclusivas"

💡 Un título claro y atractivo ayuda a aumentar las tasas de registro 📈

🔘 Texto del botón

Este es el texto que aparece en el botón de suscripción junto al campo de correo electrónico.

Ejemplos

• "Subscribe" (Suscribirme)
• "Get My Discount" (Obtener mi descuento)
• "Join the Club" (Unirme al club)
• "Claim Offer" (Reclamar oferta)

✉️ Email Placeholder

Este es el texto de sugerencia que aparece dentro del campo de correo electrónico antes de que el visitante empiece a escribir.

Ejemplo

• "Enter your email" (Introduce tu correo)
• "Your email address" (Tu dirección de correo electrónico)

🎉 Success Message

Este mensaje aparece después de que un visitante envía su correo electrónico correctamente.

Ejemplo

• "Welcome aboard! Check your inbox for your discount code 🎉" (¡Bienvenido! Revisa tu bandeja de entrada para ver tu código de descuento)
• "Thanks for subscribing!" (¡Gracias por suscribirte!)

⚠️ Si ofreces un código de cupón, es buena idea mencionarlo en el mensaje de éxito para que los clientes sepan qué esperar.

🏷️ Coupon Code

¿Quieres recompensar a los nuevos suscriptores con un descuento? Puedes agregar un Coupon Code (código de cupón) que aparezca después de que envíen su correo.

→ Introduce tu Coupon Code (código de cupón)

→ Marca Show copy button (Mostrar botón de copiar) si quieres que los clientes puedan copiar el código fácilmente con un clic

⚠️ Importante:

• El código de cupón predeterminado "PROMO123" es solo un marcador de posición y no funcionará en el proceso de pago a menos que exista un descuento con ese código en Shopify.
• Ten en cuenta que introducir un código de cupón en nuestra aplicación no crea automáticamente un descuento en Shopify.
• Antes de mostrar un código de cupón a través de nuestra aplicación, debes crear primero el descuento correspondiente en Shopify Admin → Discounts. Una vez creado el descuento, puedes usar el mismo código en nuestra aplicación para mostrárselo a los clientes después del registro.

❌ Close Icon

Habilita esta opción si quieres que los visitantes puedan cerrar la Email Collection Bar.

Cuando está habilitada, también puedes controlar cuánto tiempo tarda la barra en volver a aparecer:

• Appear again after (Volver a aparecer después de) — introduce un número
• Unit (Unidad) — elige hours (horas) o days (días)

Esto te ayuda a evitar molestar a los visitantes recurrentes y, al mismo tiempo, da a los visitantes nuevos la oportunidad de suscribirse.

📋 Copy Button

Habilita esta opción si quieres que los visitantes puedan copiar el Coupon Code (código de cupón).

Esto ayuda a los visitantes a copiar el código de cupón con un clic, en lugar de seleccionarlo manualmente.

🎨 Paso 3 — Personalizar el diseño

Haz clic en Continue to design (Continuar al diseño) para pasar a la pestaña Design (Diseño).

Aquí puedes controlar el aspecto de tu Email Collection Bar:

• Posición (top push, bottom, etc.)
• Colores y estilos de fondo
• Tamaños de fuente y estilo del botón
• Radio del borde y espaciado
• Animaciones y comportamiento fijo

💡 Para un desglose completo de todas las opciones de diseño, consulta nuestra documentación de Design & Styling (Diseño y estilos).

📍 Paso 4 — Configurar la ubicación y el direccionamiento

Abre la pestaña Placement (Ubicación) para controlar dónde y cuándo aparece tu Email Collection Bar.

📐 Display Position

Este ajuste controla la ubicación física de la barra en la página.

• Top Push (Empuje superior) — Empuja el resto del contenido de la página hacia abajo. La barra se sitúa en el flujo normal del documento.
• Top Push (Sticky) (Empuje superior fijo) — Permanece fija en la parte superior de la ventana mientras el cliente se desplaza. El contenido de la página sigue empujándose hacia abajo.
• Top Overlap (Superposición superior) — Flota sobre la parte superior de la página sin empujar el contenido hacia abajo.
• Top Overlap (Sticky) (Superposición superior fija) — Flota en la parte superior y permanece visible mientras se desplaza.
• Bottom Overlap (Sticky) (Superposición inferior fija) — Aparece en la parte inferior de la ventana y permanece allí mientras se desplaza.
• Manual (Manual) — Controlas exactamente dónde aparece la barra usando un fragmento de código o un bloque de aplicación.

---

🌐 Page Targeting

Elige en qué páginas debe aparecer la Email Collection Bar:

• All pages (Todas las páginas)
• Homepage only (Solo página de inicio)
• All product pages (Todas las páginas de producto)
• All collection pages (Todas las páginas de colección)
• Specific products (Productos específicos)
• Specific collections (Colecciones específicas)
• Custom pages (Páginas personalizadas)

🌍 Geolocation Targeting

De forma predeterminada, la barra se muestra a todos los visitantes de todo el mundo.

Si quieres dirigirte a países o regiones específicos:

→ Deshabilita Allow all locations (Permitir todas las ubicaciones)

→ Selecciona los países en los que quieres que aparezca la barra

👥 Customer Targeting

Controla quién ve la Email Collection Bar según el comportamiento del cliente:

• All visitors (Todos los visitantes)
• Logged-in customers only (Solo clientes conectados)
• Logged-out visitors only (Solo visitantes no conectados)
• Customers with specific tags (Clientes con etiquetas específicas)
• Customers based on lifetime spend (Clientes según gasto total a lo largo de la vida)

💡 Por ejemplo, puedes mostrar la barra solo a visitantes nuevos que aún no han iniciado sesión, lo cual es ideal para crear una lista.

📅 Scheduling (Optional)

Establece una Start Date (fecha de inicio) y una End Date (fecha de fin) si quieres que la Email Collection Bar se ejecute durante un periodo de campaña específico.

Si no se establecen fechas, la barra aparecerá inmediatamente una vez publicada y permanecerá activa hasta que la despubliques.

🔗 Paso 5 — Habilitar la sincronización con Shopify Customers (opcional)

Si quieres que los correos recopilados se añadan automáticamente a tu lista de Shopify Customers (clientes de Shopify):

→ Ve a la sección Integrations (Integraciones) dentro de la aplicación Hoppy Announcement Banner

→ Busca Shopify customer list integration (integración con lista de clientes de Shopify)

→ Habilítala y configura:

• Email Subscription (Suscripción por correo) — Elige si los suscriptores se marcan como Subscribed (Suscritos) o Not Subscribed (No suscritos) para marketing por correo

→ Haz clic en Save (Guardar)

Una vez habilitada, cada correo enviado a través de tu barra de recolección se sincronizará como un perfil de cliente en Shopify.

También puedes hacer clic en Sync previous emails (Sincronizar correos anteriores) para rellenar retroactivamente cualquier correo recopilado antes de habilitar esta integración.

💾 Paso 6 — Guardar y publicar

Una vez completada la configuración:

1. Haz clic en Save (Guardar) para almacenar tu configuración
2. Haz clic en Publish (Publicar) para que la Email Collection Bar esté activa en tu tienda

⚠️ Solo guardar no hace que la barra sea visible para los clientes. Debes publicarla.

🎉 Resultado final

Una vez configurada correctamente:

✅ Los visitantes ven una Email Collection Bar llamativa en tu tienda
✅ Los correos se capturan directamente desde la barra
✅ Los suscriptores ven un mensaje de éxito (y, opcionalmente, un código de cupón)
✅ Los correos se sincronizan automáticamente con Shopify Customers (si la integración está habilitada)
✅ Tu lista de correos crece mientras te concentras en gestionar tu tienda 🚀

Usar la Email Collection Bar de forma efectiva puede ayudarte a crear una audiencia leal, aumentar las compras repetidas y elevar el valor de vida del cliente ✨

Actualizado el: 10/09/2026