Los popups permiten comunicar promociones, ofrecer cupones, captar suscriptores o mostrar mensajes importantes dentro de tu tienda online.
El nuevo constructor permite personalizar el contenido, los campos del formulario, el diseño, la forma de aparición y el público que podrá visualizarlo. Además, cuenta con una vista previa que se actualiza mientras realizas los cambios
¡Comencemos!
Una vez que entramos al panel los pasos son los siguientes:
Paso 1: Ingresar a la sección Popups
Dirígete a:
Panel > Personalizar > Popups
En esta sección podrás visualizar los popups creados previamente y realizar diferentes acciones, como editarlos, activarlos, desactivarlos o eliminarlos.
Para crear uno nuevo, presiona Agregar.
Se abrirá el constructor, organizado en las siguientes pestañas:
Contenido
Formulario
Diseño
Comportamiento
Segmentación
A la derecha de la pantalla encontrarás una vista previa del popup, disponible tanto para escritorio como para dispositivos móviles.
Paso 2: Configurar el contenido
Dentro de la pestaña Contenido, completa la información principal del popup.
Título
Ingresa el texto principal que deseas mostrar.
Por ejemplo: Obtén un 10% de descuento
Descripción
Agrega un texto breve que complemente el título.
Por ejemplo: Suscríbete y recibe novedades y beneficios exclusivos.
Imagen
Presiona Subir imagen para cargar el contenido visual del popup. Puedes reemplazarla o quitarla cuando lo necesites.
Usar video en vez de imagen
Activa esta opción para mostrar un video en lugar de una imagen. Luego ingresa la URL correspondiente de YouTube o Vimeo. El video se mostrará dentro de la vista previa. Podras utilizar tanto videos largos de Youtube y Vimeo, como shorts de youtube.
Texto del botón
Define el llamado a la acción que aparecerá en el botón principal.
Por ejemplo: ¡Quiero el descuento!
Mensaje legal
Permite agregar un texto aclaratorio debajo del formulario.
Por ejemplo: Al suscribirte, aceptas recibir comunicaciones.
Mensaje de éxito
Es el mensaje que verá el cliente después de completar y enviar correctamente el formulario.
Por ejemplo: ¡Listo! Revisa tu correo electrónico.
Los cambios realizados se reflejarán automáticamente en la vista previa.
Paso 3: Asociar un cupón (Opcional)
Dentro de la pestaña Contenido, encontrarás el campo:
Cupón.
Esta opción permite entregar un cupón al cliente después de que complete el formulario.
Al abrir el selector podrás:
Buscar un cupón.
Visualizar su código.
Consultar el beneficio que ofrece.
Revisar su fecha de vencimiento.
Seleccionar uno de los cupones disponibles.
Presionar Crear nuevo cupón para configurarlo en una nueva pestaña.
También puedes dejar la opción Sin cupón cuando el popup no esté asociado a ningún descuento.
💡Importante
Los cupones vencidos no podrán seleccionarse.
Además, si el cupón asociado al popup vence o es desactivado después de publicar la configuración, el popup dejará de mostrarse automáticamente en la tienda. Por eso, si un popup no aparece, se recomienda verificar primero la vigencia y el estado del cupón asociado (Si es que hay).
Paso 4: Configurar el formulario
Ingresa en la pestaña Formulario para definir qué información deberá completar el cliente.
En cada campo podrás configurar:
Nombre del campo: texto que identifica la información solicitada.
Texto de ayuda: ejemplo o indicación que aparecerá dentro del campo antes de que los usuarios escriban.
Obligatorio: establece si el cliente debe completarlo obligatoriamente para enviar el formulario.
Activo: permite mostrar u ocultar el campo sin eliminarlo.
Eliminar: quita el campo del formulario. Podras agregarlo nuevamente cuando quieras.
También puedes arrastrar los campos para cambiar su orden. La vista previa se actualizará automáticamente.
Agregar un campo
En Agregar campo, selecciona el tipo de información que deseas solicitar y presiona el botón +.
Entre los campos disponibles se encuentran:
Nombre.
Email.
Teléfono.
Fecha de nacimiento. Se mostrará dividida en tres espacios: Día / Mes / Año
Consentimiento para recibir novedades.
Campo personalizado. (Próximamente)
Cada tipo de campo puede agregarse una sola vez. Podras modificar el órden de los cambios realizando Drag & Drop, presionando en el ícono de la izquierda de cada campo
El consentimiento se mostrará como una casilla que el cliente podrá marcar o desmarcar.
Paso 5: Personalizar el diseño
Ingresa en la pestaña Diseño para definir la apariencia y la ubicación del popup.
Tipo de ventana
Puedes elegir entre dos formas de presentación:
Sobreposición
El popup se muestra sobre el contenido de la tienda y puede incorporar un fondo que oscurece el resto de la pantalla.
Este modo permite configurar:
Color del fondo del popup.
Color del texto.
Color del botón.
Color de la sobreposición.
Activación o desactivación de la sobreposición.
Opacidad del fondo.
Radio de los bordes.
Sombra.
Ancho del popup.
Posición en la pantalla.
Ejemplo con posición en tienda: Abajo derecha.
Flotante
El popup se muestra como una tarjeta más compacta en una zona de la pantalla, sin bloquear la navegación por la tienda.
Este modo permite configurar:
Posición en la tienda.
Posición de la imagen.
Color del fondo.
Color del texto.
Color del botón.
Radio de los bordes.
Sombra.
Ancho del popup.
Posición de la imagen
Permite definir dónde aparecerá la imagen o el video respecto del contenido.
Las opciones disponibles pueden incluir:
Arriba.
Izquierda.
Derecha.
Como fondo.
Sin imagen.
Vista previa
Utiliza los botones de escritorio y mobile ubicados sobre la vista previa para comprobar cómo se visualizará el popup en cada dispositivo.
Ejemplo con posición en tienda: Abajo a la izquierda.
Paso 6: Definir cuándo aparecerá
Ingresa en la pestaña Comportamiento.
Dentro del campo Mostrar el popup por, selecciona qué acción hará que aparezca.
Solo se utiliza una forma de aparición por popup.
Tiempo
El popup aparecerá después de que transcurra la cantidad de segundos indicada en Delay de aparición.
Por ejemplo, si ingresas 3, aparecerá tres segundos después de que el cliente ingrese a la página.
Scroll
El popup aparecerá cuando el cliente haya recorrido el porcentaje indicado de la página.
Por ejemplo, si configuras 50, se mostrará al llegar aproximadamente a la mitad de la página.
Inactividad
El popup aparecerá después de que el cliente permanezca sin realizar acciones durante la cantidad de segundos configurada.
Intención de salida
El popup aparecerá cuando el sistema detecte que el cliente intenta abandonar la página.
Por ejemplo, al desplazar el cursor hacia la parte superior de la ventana para cerrarla o cambiar de pestaña.
Paso 7: Configurar la frecuencia
Dentro de la pestaña Comportamiento, también puedes definir cada cuánto tiempo podrá mostrarse el popup.
Las opciones disponibles son:
Una vez por sesión: se muestra una sola vez durante la sesión de navegación del cliente.
Cada X días: permite indicar cuántos días deben pasar antes de volver a mostrarlo.
También encontrarás la opción: Ocultar si ya se suscribió.
Al activarla, el popup dejará de mostrarse a quienes ya hayan completado correctamente el formulario.
Paso 8: Configurar la segmentación
Ingresa en la pestaña Segmentación para definir quién podrá ver el popup y en qué partes de la tienda aparecerá.
¿A quién va dirigido?
Las opciones disponibles son:
Todos: puede mostrarse tanto a clientes como a visitantes.
Clientes: se muestra únicamente a usuarios identificados como clientes.
Visitantes: se muestra a quienes navegan sin estar identificados como clientes.
Alcance
Permite definir en qué secciones aparecerá:
Toda la tienda
Solo home
Páginas específicas
Productos específicos
Categorías específicas
Al seleccionar páginas, productos o categorías específicas, podrás elegir qué elementos deseas incluir o excluir.
Dispositivo
Permite definir en qué dispositivos se mostrará:
Todos
Solo mobile
Solo desktop
De esta manera, puedes crear experiencias diferentes según el público, la sección visitada y el dispositivo utilizado. ¡Animate a crear varios popups!
Paso 9: Revisar la vista previa
Antes de publicar, revisa el resultado desde la vista previa ubicada a la derecha.
Podras comprobar:
Los textos.
La imagen o el video.
Los campos del formulario.
Los colores.
El tamaño.
La posición.
La versión desktop.
La versión mobile.
La vista previa se actualiza mientras modificas la configuración, por lo que no es necesario publicar el popup para revisar cada cambio.
Paso 10: Publicar el popup
Una vez finalizada la configuración, presiona Publicar.
El popup quedará guardado y comenzará a mostrarse cuando se cumplan las condiciones establecidas en las pestañas Comportamiento y Segmentación.
Desde el listado de popups podrás volver a editarlo, desactivarlo o eliminarlo cuando lo necesites.
¿Cómo funciona en la tienda?
Popup con sobreposición
Se muestra sobre el contenido de la página y puede cerrarse mediante la X o seleccionando fuera de la ventana.
Popup flotante
Se muestra como una tarjeta en una zona de la pantalla y permite que el cliente continúe navegando por la tienda.
Cuando el cliente completa correctamente el formulario:
Se muestra el mensaje de éxito.
Si existe un cupón asociado, se informa el código correspondiente.
La información queda registrada como un nuevo contacto.
Se guardan los datos completados, el consentimiento, el popup de origen y el cupón entregado.
La información podrá consultarse desde:
Panel > Marketing & SEO > Suscriptores
Consideraciones importantes
El campo de email debe contener una dirección válida para poder enviar el formulario.
Si un campo está configurado como obligatorio, deberá completarse antes de continuar.
Un popup sin cupón mostrará el mensaje de éxito sin entregar un código.
Si el cupón asociado vence o es desactivado, el popup completo dejará de mostrarse.
La frecuencia configurada se respeta aunque el cliente cierre el popup.
Los popups se adaptan a dispositivos móviles.
Los popups de verificación de edad continúan utilizando el editor anterior y no se configuran desde el nuevo constructor.
¡Listo! 🙌
Tu popup quedó configurado y listo para mostrarse de acuerdo con el contenido, el diseño, el comportamiento y la segmentación seleccionados.
Esta herramienta te permitirá comunicar promociones, entregar cupones y recopilar información de tus clientes de una forma personalizada.
Como siempre esperamos que te haya sido de utilidad, si tenes más dudas te sugerimos ingresar a nuestro centro de ayuda o también puedes escribirnos a [email protected]