ℹ️ 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 un control completo sobre dónde y cómo aparece tu popup? 🛠️

Los PopUps personalizados se construyen para casos de uso avanzado. Por defecto Colocación manual, lo que significa que usted decide exactamente dónde vive el popup en su tema - además de obtener acceso a un CSS personalizado campo y un botón de acción flotante para máxima flexibilidad.

Esta guía te lleva a través de toda la configuración para que puedas lanzar tu primer PopUp personalizado en minutos.

✅ Antes de comenzar — Activar la aplicación Embed

Para que cualquier popup aparezca en su escaparate, la aplicación debe estar habilitada dentro de su Shopify tema.

Ve a:

Shopify Admin → Canales de Venta → Tienda Online → Temas → Editar Tema → App Embeds

Entonces:

• Encontrar Hoppy Popups
• Toggle it ON
• Haga clic Guardar

ℹ️ Sin este paso, su popup no rendirá en el escaparate incluso después de publicar.

⚙️ Paso 1 — Crear un nuevo PopUp personalizado

Abrir el Hoppy PopUps app.

Entonces:

→ Crear nuevo PopUp

→ Seleccionar PopUp personalizado de la lista de tipos popup.

La página de configuración se abrirá automáticamente con Colocación manual seleccionado por defecto.

📝 Paso 2 - Configurar el Contenido

Después de abrir la página de configuración, aterrizarás dentro de la Índice tab.

Esta sección controla lo que ven tus visitantes y cómo interactúan con el popup.

🏷️ Nombre del popup

Este campo se utiliza sólo para fines internos. Los clientes nunca verán este nombre.

Puede utilizar cualquier nombre reconocible como:

• Anuncio personalizado
• Theme-Placed Banner
• Desarrollador personalizado
• Hardcoded Promo

💡 Usando el nombre interno adecuado hace más fácil identificar las configuraciones más tarde, especialmente si su tienda ejecuta múltiples campañas.

💬 Título " Descripción

Estos aparecen en la parte superior de su popup y deben comunicar claramente su mensaje.

Ejemplo

• Título: "Anunciamiento especial"
• Descripción: "Mira nuestra última colección"

Puede personalizar estos para que coincida con su voz de campaña.

📧 Email & Phone Collection

Elige qué campos mostrar en tu popup:

• Mostrar campo de recogida de correo electrónico — captura correos electrónicos de visitantes
• Mostrar número de teléfono campo — captura números de teléfono con selección de código de país

Puedes mostrar ambos, solo uno, o tampoco si estás mostrando un anuncio.

🔗 Button Link

Si no estás recolectando correos electrónicos o números de teléfono, el popup se convierte en un simple botón de llamada a acción. Establecer el Enlace a la página que desea que los visitantes visiten, por ejemplo, una página de recogida, página de producto o URL externa.

⚙️ Colección adicional " Configuración de cupones "

Esta sección le da control adicional sobre cómo se recopila la información del visitante y cómo se presentan los descuentos dentro del popup.

📩 Email Collection Field Placeholder

Personalizar el texto de marcador de lugar mostrado dentro del campo de entrada de correo electrónico.

Ejemplo

• "Introduzca su correo electrónico"
• "Tu mejor dirección de correo electrónico"

Esto ayuda a guiar a los visitantes sobre la información que deben introducir.

❌ Mensaje de error de correo electrónico

Establecer el mensaje de validación mostrado cuando un visitante entra en una dirección de correo electrónico inválida.

Ejemplo

• "Por favor, introduzca una dirección de correo electrónico válida"

Esto aparece automáticamente si el formato de correo electrónico introducido es incorrecto.

📱 Código del país por defecto

Elija el código por defecto para el campo número de teléfono.

Ejemplo

• Estados Unidos (+1)
• Reino Unido (+44)
• India (+91)

Los visitantes todavía pueden cambiar el país manualmente a menos que estén restringidos.

📞 Número de teléfono Titular

Personalizar el texto del marcador de lugar mostrado dentro del campo número de teléfono.

Ejemplo

• "Introduzca su número de teléfono"
• "Número de móvil"

Esto mejora la claridad y alienta el formato adecuado.

⚠️ Número de teléfono Mensaje de error

Establecer el mensaje mostrado cuando se introduce un número de teléfono inválido.

Ejemplo

• "Por favor, introduzca un número de teléfono válido"

Esto ayuda a los visitantes a entender por qué la presentación falló.

🔘 Texto del botón

Personalizar el texto del botón de llamada a acción que se muestra dentro del popup.

Ejemplo

• "Shop Now"
• "Claim Discount"
• "Oferta de desbloqueo"

Utilizar texto orientado a la acción puede mejorar las conversiones.

🏷️ Mostrar código de cupón

Elija si el código de cupón debe aparecer dentro del popup después de la captura de correo electrónico exitosa.

Opciones disponibles:

• Sí. — muestra el código de cupón a los visitantes
• No — esconde la sección de código de cupones

Esto es útil si los descuentos se aplican automáticamente o se manejan externamente.

ℹ️ El código de cupón sólo se puede mostrar si el correo electrónico se está capturando.

🎟️ Código de cupón

ℹ️ Este campo está disponible una vez Mostrar código de cupón es para cambiar Sí..

Para mostrar un código de cupón, usted puede:

1. Seleccione uno de los códigos de cupón que ha creado en Shopify Admin → Descuentos haciendo clic en Select/Change Discount.
2. Puedes crear uno nuevo haciendo clic en Crear nuevo descuento.

Ejemplo

• SAVE10
• WELCOME20
• COUPON123

💸 Solicitud de descuento

Esta opción controla cómo se aplica el descuento. Tiene dos opciones:

1. El cliente tendrá que aplicar el descuento manualmente — el cliente tendrá que introducir el código de cupones durante el checkout para recibir el descuento.
2. Aplicar descuento automáticamente — el descuento se aplicará automáticamente durante el checkout sin que el cliente tenga que introducir el código de cupón.

⚠️ Importante:

• Nuestra aplicación no crea ni gestiona códigos de cupones/descuentos. Debes crearlos Shopify Admin → Descuentos antes de utilizarlos en el popup.

☑️ Añadir Opt-In Checkbox

Elija si mostrar una casilla de verificación adicional de opción dentro del popup.

Esto se puede utilizar para:

• Consentimiento de comercialización
• consentimiento SMS
• Suscripciones al boletín
• Términos de reconocimiento

Opciones disponibles:

• Sí. — muestra la casilla de verificación
• No - esconde la casilla

❎ Cerrar Icon

Habilitar o deshabilitar el icono cercano mostrado en el popup.

• Enabled — los visitantes pueden cerrar manualmente el popup
• Discapacitados — elimina el icono cercano del popup

Esto ayuda a controlar lo desmisible que debe ser la experiencia popup.

✉️ Mensajes de éxito

Después de que un visitante presente sus detalles, aparece un mensaje de éxito.

• Mensaje de éxito: "¡Bienvenido a nuestra tienda!"

También puede añadir una descripción debajo del mensaje con los siguientes pasos o instrucciones.

🖱️ Button Click Behavior

ℹ️ Esta opción está disponible sólo cuando "Mostrar campo de correo electrónico" " Mostrar número de teléfono Campo " no se controlan.

Permite controlar lo que sucede cuando un visitante hace clic en el botón CTA dentro del popup. Maneja cualquiera de los siguientes:

1. Cerrar Popup - el popup cerrará
2. Código de cupón de reversión — el código de cupón se revelará al visitante, pero habrá establecido el código de cupón como se describe anteriormente en la sección "Mostrar código de cupón".
3. Redirect to Link — seleccionar esto le daría un campo de entrada llamado "Link" donde puede especificar la URL a la que el visitante será redireccionado

🔄 Botón de acción flotante

Incluso con la colocación manual, puede agregar un Botón de acción flotante que se mantiene visible en la página para que los visitantes puedan reabrir el popup después de cerrarlo.

Elija una posición:

• Bien.
• Tema izquierdo
• Pantalla derecha
• Pantalla izquierda

Entonces entra en el Texto del botón — por ejemplo "Open Offer", "Get Discount", o "Learn More".

Para desactivar completamente el botón flotante, seleccione Desactivar botón de acción flotante.

🎨 Paso 3 - Aplicar CSS personalizado (opcional)

Cambiar a la Diseño pestaña para acceder a Custom CSS sección.

Aquí es donde los PopUps personalizados realmente brillan. Puede escribir su propio CSS para anular cualquier estilo predeterminado.

📝 Plantilla CSS

La aplicación proporciona una plantilla lista con selectores comunes:

.futureblink-popup {
/* Contenedor de popup principal */
}
.futureblink-popup .title {
/* Título de la Popup */
}
.futureblink-popup.mobile
/* Anulación del título móvil */
}
.futureblink-popup .description {
* Descripción del popup */
}
.futureblink-popup.mobile .description {
/* Descripción móvil override */
}
.futureblink-popup .cta-button {
* Botón de llamada a la acción */
}
.futureblink-popup.mobile .cta-button {
* * Anulación del botón móvil */
}
.futureblink-popup .close-btn {
/* Cerrar icono */
}
.futureblink-popup.mobile .close-btn {
/* Mobile close icon override */
}

Pruebe su CSS personalizado en el campo y haga clic Aplicar.

⚠️ Notas importantes

• CSS personalizado anula todos los otros ajustes de diseño — utilizarlo cuando necesite control de píxel-perfect
• Los selectores específicos para móviles le permiten estilo diferente para los usuarios del teléfono
• Haga clic Reset para restaurar la plantilla CSS predeterminada en cualquier momento

🖱️ Paso 4 - Establecer las reglas de la pantalla del desencadenante

Muévete a la Placement/Targeting pestaña para controlar cuándo y dónde aparece tu PopUp personalizado.

Debido a que Custom PopUps utiliza la colocación manual, la mayoría de los ajustes de activación estándar no se aplican de la misma manera. Sin embargo, todavía puede configurar:

• Frecuencia de visualización — Show every time, once per visit, or limit with a frescodown
• Atención al cliente — Estado de inicio de sesión, etiquetas al cliente, vida pasada
• Geolocalización - Todos los países del mundo o determinados
• Programación - Fechas de inicio y finalización opcionales

Para explicaciones profundas de cada opción de destino, consulte la documentación de selección avanzada dedicada.

✅ Paso 5 - Guardar & Publish

Una vez que todo se ve bien:

1. Haga clic Guardar para almacenar su configuración
2. Haga clic Publish para hacer el popup en vivo en tu escaparate

⚠️ Salvar solo no hace visible el popup a los clientes. Debes publicarlo.

⚠️ Para la colocación manual: Recuerde también agregar el fragmento de código a su tema — publicar solo no colocará el popup automáticamente.

Si la aplicación embed aún no está habilitada, un banner le recordará que la active en su Shopify editor de tema.

🎉 Resultado final

Una vez configurado con éxito:

✅ Tu popup aparece exactamente donde lo pusiste en tu tema
✅ CSS personalizado le da control visual completo
✅ Un botón de acción flotante mantiene el popup accesible (si está habilitado)
✅ Su popup respeta las reglas de selección, programación y configuración del dispositivo
✅ Los visitantes interactúan con una experiencia completamente enmarcada y personalizada

Tu PopUp personalizado es ahora en vivo y únicamente tuyo 🚀

Actualizado el: 10/09/2026