Compártelo ya!!
Opt In Image
DESCARGA GRATIS
1.- Guía para crear una tienda online de éxito
2.- Guía SEO para Prestashop
  • Recibe todos los domingos las últimas entradas del blog.
  • Recibe contenidos exclusivos.

Te puedes dar de baja en cualquier momento. Nada de spam

 

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.

 

 

 

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.

 

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

 

 

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: cover: Si ponemos el selector en “SI” forzaremos a que la imagen cubra todo el PopUp. En caso de marcar la opción “NO” no forzaremos que la imagen cubra todo el PopUp.

 

ix.- PopUp delay: aquí estableceremos el tiempo en segundos que tardará el popup en mostrarse desde que un usuario accede a la página.

 

Aprende a crear una ficha de producto casi perfecta: Ficha de producto Prestashop

 

x.- Content text color: Aquí estableceremos el color por defecto para el contenido de texto que se muestre en el popup. Aunque, podremos realizar modificaciones de colores de texto con la herramienta que viene por defecto en el editor.

 

 

2.2.- Opciones de diseño de la parte de suscripción a la Newsletter en el PopUp

 

xi.- Newsletter background color: aquí estableceremos el color de fondo de la franja inferior dedicada a la suscripción a la newsletter.

Este color de fondo solo tendrá sentido si tenemos marcada la opción: “Show newsletter form” que veíamos anteriormente y que servía para activar los campos dedicados a la suscripción a la newsletter.

NOTA: Si hemos subido una imagen de fondo, es posible que automáticamente también aparezca la misma imagen de  fondo para la franja de suscripción a la newsletter y no se muestre el color de fondo. En este caso tendrás que ir al apartado: “Newsletter background image” y borrar la URL de la imagen.

 

popup con cajetín de suscripción a la newsletter

Pop Up con cajón para suscripción a la Newsletter de la tienda

 

xii.- Newsletter background image: desde aquí podremos subir una imagen de fondo para la fila en la que aparece el campo de suscripción a la newsletter.

 

xiii.- Newsletter background repeat: lo mismo que veíamos con la imagen de fondo del formulario. Si la imagen es más pequeña que el espacio a cubrir tendremos varias opciones para repetir la imagen (igual que en el punto vii).

 

Aprende a usar el Page builder Elementor de la plantilla Warehouse: Constructor Warehouse

 

xiv.- Newsletter text color: color por defecto del texto que aparece en el la zona de suscripción a la newsletter (aunque con las pruebas que he realizado resulta que es el siguiente elemento el que al final impone el color del texto)

 

xv.- Newsletter input text color: color del texto que el usuario introduzca en el campo de “enter your e-mail”.

 

xvi.- Newsletter input bg color: aquí estableceremos el color de fondo del campo para email del formulario de suscripción a la newsletter.

 

 

2.3.- Características del PopUp con Prestashop y Warehouse

 

xvii.- Cookie time: cuando el visitante hace clic en “Do not show again” el PopUp no se vuelve a mostrar a dicho visitante hasta que pase el tiempo que pongamos en este campo, que se corresponde con el tiempo de vida de la cookie del PopUp.

Cuando pase el tiempo establecido aquí la ventana emergente volverá a mostrarse al usuario.

 

Aprender a gestionar el menú de Prestashop con la plantilla Warehouse: Menú Plantilla Warehouse

 

xviii.- Content of Pop Up Módule: aquí pondremos el texto y/o imágenes que queramos que aparezcan en el PopUp.

Podremos mostrar texto e imágenes.

 

xix.- Generate new Cookie variable: si marcamos esta opción, cuando se realice cualquier modificación en el PopUp se generará una nueva cookie. Por lo que el PopUp volverá a mostrarse independientemente de la caducidad de la cookie del anterior PopUp.

Realizadas las personalizaciones oportunas, no olvides guardar.

 

 

3.- Traducciones del módulo de PopUp IqitPopUp

 

Para realizar las traducciones al español de los elementos que aparecen en el PopUp deberás ir a: “MEJORAS > Internacional > Traducciones”.

 

Aqui puedes ver todas las traducciones a realizar en la plantilla Warehouse: Traducciones español plantilla Warehouse

 

En el bloque “MODIFICAR TRADUCCIONES” selecciona las siguientes opciones:

 

  • a.- Tipo de traducción: Traducciones de los módulos instalados
  • b.- Selecciona el módulo: IQITPOPUP – Pop-up window module with newsletter suscription
  • c.- Selecciona tu idioma: Español (Spanish)

 

y haz clic en el botón: “Modificar”

 

Solo tienes que traducir los 4 últimos campos que son los que se corresponden con la parte pública del PopUp:

 

  • Do not show again = NO MOSTRAR MÁS
  • Close window = Cerrar ventana
  • Enter your e-mail = introduce tu email
  • Subscribe = SUSCRÍBETE

 

Y haz clic en “Guardar”

 

traducciones español pop up plantilla warehouse

Traducción español textos que aparecen en el pop up

 

En la siguiente imagen puedes ver como quedarían las traducciones. El cartelito de “Cerrar ventana” solo aparece si se pone el ratón sobre la “x” del PopUp

 

traducciones pop up prestashop con warehouse

Pop Up plantilla Warehouse con textos traducidos al español

 

 

4.- Desactivar el PopUp de la plantilla Warehouse de Prestashop

 

Si no queremos usar el PopUp o ventana emergente, lo mejor es buscar el módulo y proceder a desactivarlo para que no nos aparezca.

También puede resultar cómodo desactivarlo mientras estamos creando la tienda para que no nos incordie el PopUp cada vez que vayamos a hacer una previsualización de la home o resto de páginas.

Si hemos configurado el PopUp y lo desactivamos la configuración del mismo se mantendrá hasta que volvamos a activarlo.

Es decir, la configuración del módulo de PopUp de Warehouse no se pierde, aunque desactivemos el módulo. Para desactivar el módulo:

 

i.- Interface módulos: iremos a: “MEJORAS > Módulos > Módulos y Servicios”

ii.- Módulos instalados: Luego a la pestaña “Módulos instalados” y buscaremos el módulo “Iqitpopup”.

iii.- Desactivar módulo: Haremos clic en la punta de flecha y seleccionaremos “Desactivar”. Después, en el PopUp que se nos muestra haremos clic en: “SÍ, DESACTIVARLO”

 

Bloguer especializado en Woocommerce / WordPress, Divi y Prestashop. Me dedico a impatir formación y a la creación de páginas web, blogs y tiendas online.Mi otro blog, especializado en WordPress y Divi: horizonweb.es
Compártelo ya!!

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información Aquí,plugin cookies

ACEPTAR
Aviso de cookies