En muchas ocasiones nos puede interesar añadir a nuestra tienda Prestashop algún popup o ventana emergente en el que informemos sobre:

  • i.- Descuentos de temporada
  • ii.-Gastos de envío gratis a partir de un importe de pedido
  • iii.- Suscripción a la newsletter
  • iv.- Cupones de descuento
  • etc.

La plantilla Warehouse, que es la plantilla que recomiendo para Prestashop, incorpora un módulo específico para poder añadir un popup a la tienda online.

QUIERO LA PLANTILLA WAREHOUSE

 

 

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

1.- Acceso a la configuración del módulo PopUp de Warehouse (IqitPopUp)

 

Para acceder a la configuración del módulo en Prestashop 1.7 iremos a: “MEJORAS > Módulos > Módulos y Servicios”

después, iremos a la pestaña “Módulos instalados” y busca el módulo “Iqitpopup”.

Haz clic en el botón “Configurar” para acceder a la página de configuración del módulo IqitPopUp.

Curso plantilla Warehouse Prestashop

MÁS INFO CURSO WAREHOUSE

 

 

Aquí tienes una Mega Guía sobre la plantilla Warehouse, la mejor plantilla para Prestashop: Guía Plantilla Warehouse

 

 

2.- Configuración del módulo de PopUp de Warehouse para Prestashop

 

Una vez en la pantalla de configuración del módulo, verás las siguientes opciones:

i.- Pages: con este selector elegiremos si queremos que se muestre la ventana emergente solo en la página de inicio, para lo que seleccionaremos la opción: “Index only(homepage)” o por el contrario queremos que se muestre en todas las páginas, para lo que elegiríamos la opción “All pages”.

En la parte superior del PopUp aparecerá un check box con el texto: “Do not Show again”. Si el visitante hace clic en el check box y cierra la ventana emergente, el pop up ya no volverá a mostrarse (hasta que caduque la cookie. Luego podrás establecer el periodo de caducidad).

 

configuración módulo iqitPopUp

Interface de configuración del módulo IqitPopUp de la plantilla Warehouse para Prestashop

 

ii.- Show newsletter form: si seleccionamos la opción “SI” en la parte inferior de la ventana emergente o PopUp aparecerá un campo de entrada para el email y el botón de suscripción a la newsletter.

 

Crea una comunidad entorno a tu tienda online con una Newsletter: Lista de sucriptores tienda online

 

Si marcamos la opción “NO” no se mostrará ninguna opción de suscripción. Elegiremos esta opción cuando queremos mostrar el PopUp con otra finalidad diferente a la de suscripción a la newsletter.

Para el correcto funcionamiento de la suscripción debe estar activado el módulo blocknewsletter, que en Prestashop 1.7 aparece con el nombre en español “Suscripción a nuestro boletín de noticias” (ps_emailsubscription)

 

suscripción a la lista de correo prestashop

Fila de suscripción a la newsletter en el popup

 

 

 

2.1.- Diseño del PopUp / Ventana emergente de Warehouse

 

iii.- Width: aquí estableceremos la anchura en píxeles del Pop Up.

Las dimensiones que muestra el Pop Up son proporcionales según anchura y altura establecida y el espacio disponible en la interface.

 

iv.- Height of main content: aquí estableceremos la altura del Pop Up.

 

v.- Content background color: en este campo estableceremos el color de fondo del Pop Up. Esto no afecta al color de fondo de la franja en la que aparece la caja de suscripción al formulario.

 

background popup prestashop

Color de fondo del Pop Up

 

QUIERO LA PLANTILLA WAREHOUSE

 

 

2.1.1.- Opciones de Imagen de fondo en el PopUp

 

vi.- Content background image: aquí podemos escribir la url de una imagen para utilizarla de fondo en el Pop Up (en caso de querer utilizar una imagen).

Podemos cargar una imagen haciendo clic en el botón: “Background Image Selector”.

La forma de mostrarse la imagen la ajustaremos con las dos siguientes opciones: Content background repeat y Background-size: cover.

 

cómo poner una imagen de fondo en el pop up de prestashop

Ejemplo de imagen de fondo en el Pop Up

 

vii.- Content Background repeat: si la imagen incluida como fondo no abarca todo el tamaño de la ventana emergente podemos elegir que ésta se repita o no.

 

Repeat XY: repetir en eje X y en el eje Y

Repeat X: repetir solo en eje X

Repeat Y: repetir solo en eje Y

No repeat: no repetir imagen.

 

viii.- Background-size: