Este tutorial explica cómo utilizar la aplicación Probance Newsletter Form&PopUp en el editor de temas de Shopify para personalizar la ventana emergente de suscripción a tu newsletter.
1. Construir la ventana emergente
En primer lugar, haz clic en Probance POP-UP en la lista de componentes del editor de temas de Shopify y, a continuación, selecciona Modo de prueba en la lista desplegable Modo de visualización. Esto te permitirá mostrar la ventana emergente continuamente en el editor mientras editas.
La ventana emergente Probance está vacía por defecto, necesitas definir su contenido añadiendo bloques al elemento Probance POP-UP en tu editor de temas de Shopify
Este debe contener:
- Al menos un campo de perfil de tipo Email
- Un botón
- Un bloque de etiquetas y traducciones
1.1. Añadir un campo de correo electrónico y otros campos de perfil
En el elemento POP-UP Probance, haz clic en Añadir un bloque y, a continuación, selecciona Contact Field.
Haz clic en el elemento Contact Field recién añadido en la lista de bloques para acceder a sus detalles. Por defecto, el campo del perfil es de tipo Email. Marca la casilla Required para que sea obligatorio.
Existen otros dos tipos de campos de perfil: Last name y First name, que permiten añadir los campos Apellidos y Nombre al formulario.
1.2. Añadir un botón
En el elemento POP-UP Probance, haz clic en Añadir un bloque y selecciona Button.
1.3. Añadir etiquetas
En el elemento POP-UP Probance, haz clic en Añadir un bloque y, a continuación, selecciona Labels and translation.
2. Configuración de etiquetas
El bloque Etiquetas y traducción permite modificar los textos y etiquetas de tu ventana emergente, así como el mensaje de confirmación que aparece tras la validación del formulario de inscripción, y traducirlos a cada idioma disponible (francés, inglés y español).
Los campos Heading (correspondiente al título de la ventana emergente), Paragraph (correspondiente al texto) y Success message (correspondiente al mensaje de confirmación) permiten introducir código HTML para dar formato a los textos. Se proporciona un enlace al editor Online HTML Editor para que puedas generar fácilmente el código HTML de un formato especificado.
Introduce el texto y, a continuación, aplica el estilo deseado mediante el editor. A continuación, haz clic en Editar código fuente HTML para generar el código HTML, que podrás copiar en los campos de entrada del editor Probance POP-UP.
La sección Label te permite cambiar las etiquetas de los campos del perfil y del botón de tu formulario.
Nota: ¿Tu web es multilingüe? Cuando configures las etiquetas para cada versión, la ventana emergente se mostrará en el idioma correcto sin necesidad de ajustes adicionales. Si tu web está en un idioma que no está disponible en las traducciones, la ventana emergente no se mostrará en la versión de la web en ese idioma.
3. Personalizar la ventana emergente
Puedes modificar la apariencia de cada elemento de la ventana emergente para adaptarla al estilo de tu web.
3.1. Aspecto general
Para modificar el aspecto general de la ventana emergente, haz clic en Probance POP-UP en la lista de componentes de tu tema y accede a la sección General. Contiene las siguientes opciones:
- Background color (1) permite cambiar el color de fondo de la ventana emergente. Haz clic en el punto para mostrar el selector de color.
- Overlay opacity (2) permite ajustar el oscurecimiento del fondo de la página cuando se muestra la ventana emergente. Cuanto mayor sea la opacidad, más oscuro será el fondo. Una opacidad del 100% mostrará la ventana emergente sobre un fondo negro.
- Position (3) permite cambiar la posición de la ventana emergente en la página.
- Rounded (4) permite redondear las esquinas de la ventana emergente.
- Text position (5) permite modificar la alineación del título, del párrafo y del mensaje de validación de la ventana emergente.
Puedes cambiar el color del icono de cierre en la ventana emergente de la sección Icono de cierre, en el campo Color.
3.2 Personalizar los campos del perfil
Para cambiar la apariencia de los campos del formulario emergente, haz clic en Probance POP-UP en la lista de componentes de tu tema y luego ve a la sección Entradas. Contiene las siguientes opciones:
- Size (1) permite modificar la altura de los campos del formulario.
- Background color (2) permite cambiar el color de fondo de los campos del formulario. Haz clic en el punto para mostrar el selector de color.
- Color (3) permite cambiar el color del texto introducido en los campos del formulario. Haz clic en el punto para mostrar el selector de color.
- Borderless (4) permite ocultar los bordes de los campos del formulario (marcado) o mostrarlos (sin marcar).
- Border color (5) permite cambiar el color del borde de los campos del formulario. Haz clic en el punto para mostrar el selector de color.
- Rounded (6) permite redondear las esquinas de los campos del formulario (sólo visible si la opción «Sin bordes» no está marcada).
- Placeholder only (7) solo permite mostrar las etiquetas en los campos del formulario (marcada) o encima de los campos (desmarcada).
- Text position (8) permite definir la alineación de las etiquetas y textos introducidos en los campos del formulario.
3.3. Añadir una imagen
Para añadir una imagen en la ventana emergente, haz clic en Probance POP-UP en la lista de componentes de tu tema y luego ve a la sección Image.
En el campo Logotipo, haz clic en Seleccionar una imagen. Puedes elegir la imagen a integrar en la ventana emergente de tu biblioteca, o elegir una imagen de tu directorio haciendo clic en Importar. Haz clic en la imagen que desees utilizar y, a continuación, en Seleccionar.
- Position (1) permite cambiar la posición de la imagen en la ventana emergente.
- Size (2) permite ajustar el tamaño de la imagen.
- Margin (3) permite aplicar (opción marcada) o no un margen entre la imagen y el borde de la ventana emergente.
Nota: por defecto, el campo Posición está configurado como Ninguno, lo que oculta la imagen.
3.4. Personalizar el botón
Para cambiar la apariencia del botón, selecciona el bloque Botón de la lista de elementos emergentes.
La sección General contiene las siguientes opciones:
- Font weight (1) permite ajustar el grosor de la fuente de la etiqueta.
- Label color (2) permite cambiar el color de la fuente de la etiqueta. Haz clic en el punto para mostrar el selector de color.
- Background color (3) permite cambiar el color de fondo del botón. Haz clic en el botón para mostrar el selector de colores.
- Position (4) permite elegir la alineación del ancho del botón.
- Full width (5) permite mostrar el botón en toda su anchura (opción marcada).
- Size (6) permite elegir la altura del botón.
La sección Frontera contiene las siguientes opciones:
- Border color (1) permite cambiar el color del borde del botón
- Border weight (2) permite cambiar el grosor del borde del botón
- Border radius (3) permite modificar el radio de curvatura de las esquinas de los botones
Las secciones Hover y Transition permiten configurar la animación del botón cuando el cursor pasa por encima de él. Contienen las siguientes opciones:
- Label color (1) permite cambiar el color de la fuente de la etiqueta cuando el cursor pasa por encima de ella.
- Background color (2) permite cambiar el color de fondo del botón cuando el cursor pasa sobre él.
- Border color (3) permite cambiar el color del borde del botón cuando el cursor pasa sobre él.
- Border weight (4) permite modificar el grosor del borde del botón cuando el cursor se sitúa sobre él.
- Duration (5) permite ajustar la duración de la transición del botón cuando el cursor se sitúa sobre él.
- Position (6) permite elegir el tipo de animación cuando el cursor pasa por encima del botón
4. Ajuste de las condiciones de visualización
Una vez creada la ventana emergente, puedes configurar su modo de visualización. Para ello, haz clic en Probance POP-UP en la lista de componentes de su tema y, a continuación, accede a la sección Display rule.
Se proponen 4 visualizaciones en el campo Display mode:
- After scroll: la ventana emergente aparece cuando el visitante se desplaza por la página.
- El campo Scroll offset permite definir el nivel a partir del cual debe mostrarse la ventana emergente
- After delay: la ventana emergente aparece tras un retardo definido.
- El campo Displaying delay permite definir el retardo tras el cual debe mostrarse la ventana emergente
- Disabled: la ventana emergente no aparece
- Test mode: la ventana emergente se muestra de forma continua – esta pantalla está reservada para editar la ventana emergente
El campo Days between two displays permite establecer la frecuencia con la que debe mostrarse la ventana emergente a los visitantes no registrados. Un valor de 0 mostrará la ventana emergente cada vez que el visitante acceda a la página.
No olvides guardar tu trabajo regularmente haciendo clic en Guardar, y seleccionar el modo de visualización correcto antes de cada guardado para evitar mantener su ventana emergente en Modo de prueba.