> ## 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 recolección de correos electrónicos para 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 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 ✨