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
ÍNDICE DEL POST
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
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.
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).
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.
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)
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.
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.
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.
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.
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.
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).
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.
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”.
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”
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
Pop Up plantilla Warehouse con textos traducidos al español
QUIERO LA PLANTILLA WAREHOUSE
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”
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Hola Joaquín, he configurado el popup y todo bien, pero actualmente en la parte del formulario sale una casilla de verificación que debes aceptar para poder enviar el formulario, el cual, no lo veo en tu video o en la configuración, para poder activarla o desactivarla, y esa casilla viene con un texto en otro idioma (latín), y tampoco veo ese texto en la sección de traducciones como para poder cambiarlo y traducirlo.
Si me pudieras señalar, donde puedo gestionar este nuevo elemento, gracias
Buenas Fernando, la traducción la tienes en el módulo RGPD de Prestashop
Me gustaría también invitarte a que eches un vistazo a mi academia online: https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!! para consultas). En la plataforma tienes cursos sobre Prestashop, plantilla warehouse, Curso seguridad y actualizaciones Prestashop, Blog Prestashop, Copywriting, curso claves para crear una tienda online de éxito, Analytics ecommerce, SEO General, SEO Tiendas online, Curso Indexación web, Google search console, Curso WordPress, Woocommerce, Curso Divi, Curso Flatsome, etc. etc. (Más de 30 cursos). Además, cada mes subo una super interesante Master Class. (más de 30 cursos)
Hola. Muchas gracias porque me estás enseñando mucho. En cuanto al módulo pop up, yo quiero usarlo para mostrar simplemente una imagen con distintas promociones (es decir, voy cambiando la imagen según la promoción). Desactivo la opción del newsletter para que no me salga abajo. El problema es que me sale el color de fondo que le ponga (he hecho distintas pruebas), pero nunca me sale la imagen de fondo. También he probado con distintas imágenes y cambio el tamaño del pop up dependiendo del tamaño de la imagen, pero nada, no lo consigo. Uso Prestahop 1.6. Ojalá puedas ayudarme. Gracias
Hola Joaquin, necesito saber si con el pop-up de warehouse puedo añadir un formulario de registro o inicio de sesion. Por lo que vi solo puedo añadir el newletter.
Muchas gracias, saludos !
Hola Leonardo.
No, el único tipo de formulario que permite el popup es el de suscripción a newsletter.
Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre Prestashop, Warehouse, Curso claves para crear una tienda online de éxito, Curso alta en google e indexación web, SEO General, SEO Ecommerce, Analytics tiendas online, Blog Prestashop, Woocommerce, WordPress, etc. etc.
hola Joaquin…muy buena toda la informacion que subes.. me has salvado infinidad de veces.
Una consulta. En el modulo Iqitpopup me queda claro como personalizar en funcion al idioma desde las opciones de traducciones del modulo.
Lo que no puedo encontrar es como cambiar la imagen de fondo del popup en funcion del idioma.
Hola Juan.
La imagen ha de ser común para todos los idiomas. Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tenéis cursos sobre Prestashop, Warehouse, Curso claves para crear una tienda online de éxito, Curso alta en google e indexación web, curso SEO Ecommerce, SEO General, Analytics tiendas online, Blog Prestashop, Woocommerce, WordPress, Divi, Astra, Elementor, Diseñador web freelance, etc. etc.
Buen trabajo el que haces Joaquín, ¿Se ha encontrado la solución al color del botón de suscripción?
Hola Manuel,
Gracias por tus palabras. Lo que no se pueda hacer directamente con las opciones del módulo, en lo que a diseño se refiere, siempre se puede hacer vía CSS. En «Diseño > iqitThemeEditor – live > Custom Css/Js/Codes » en la ventana «Custom CSS Code» puedes añadir el código css que quieras para realizar cualquier modificación de diseño.
Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre Prestashop, Warehouse, Blog Prestashop, SEO Tiendas online, Analytics para ecommerce, Mailchimp, etc. etc.
Hola desde el popup de warehouse el botón de suscribete me sale en gris y quiero ponerlo en blanco y no doy con el sitio para cambiarlo podrías ayudarme
Hola Adrián,
1.- Mira primero en el módulo de PopUp
2.- Si no, prueba en las opciones del tema. Hay unas opciones globales de colores para todos los botones.
3.- Si no, seguramente habría que ir a CSS
Buenas, tengo el pop up configurado pero no logro automatizar la lista de suscriptores con Mailchimp que también tengo integrado. Es en un PS 1.6. Cómo puedo extraer la lista de los suscribers solo del pop up??
Buenas,
Necesitas un módulo para integrar Prestashop y Mailchimp
Hola, lo he configura todo como explicas, pero me aparece en la parte baja de la web, justo donde termina el continido de la web, y no hay forma que aparezca como popup, me aparece como si estubiese adderido a la web.
Buenas Roberto,
Para ese tema en concreto acude al soporte de Warehouse-> https://iqitcommerce.ticksy.com/
para que te lo vean detalladamente, pues no es algo de la configuración del módulo.
Buenas enhorabuena para el tutorial, tengo la plantilla wharehouse y estoy configurando el popup con mailchimp parece todo bien pero el popup no sale en la tienda.
Buenas,
¿dónde has configurado que salga? ¿en la home o en todas las páginas?
un saludo
Buenas,
Como puedo integrar un popup de suscripcion de mailchimp usando esta plantilla?
Buenas,
1.- En la configuración del módulo tienes una opción que dice: «Show newsletter form». Si activas esta opción se mostrará el formulario de sucripción.
2.- El formulario de suscripción del popup, como cualquier otro formulario de suscripción de Prestashop con la plantilla que sea, almacena los sucriptores en Prestashop.
3.- Es necesario utilizar un módulo que conecta Prestashop con MailChimp, para que los usuarios que se dan de alta en la Newletter (a través de cualquier formulario de Prestashop) pasen a Mailchimp.
4.- Tienes un módulo de MailChimp gratuito que se llama: «MailChimp for PrestaShop» en: «Módulos > selección»
Hola , lo primero felicitarte por tus artículos, he adquirido hace poco esta plantilla en su versión 1.7 gracias a la información que he encontrado aquí, uy buen aporte. Tengo una duda respecto a la Newsletter, una vez configuradas todas estas opciones de diseño,¿ donde se puede configurar o ver donde quedan registrados los emails y como puedo comprobar que funciona? Gracias de antemano, saludos
Hola Cristian,
Gracias por tus palabras. El módulo para la gestión de suscriptores no tiene nada que ver con la plantilla. Es decir, es un módulo que viene por defecto en Prestashop.
En Prestashop 1.7 se llama: «Suscripción a nuestro boletín de noticias» (ps_emailsuscription)
Hola Joaquin en la version 1.6 es igual? Porque al traducir los modulos no da la opción de localizar ese, salen todos. Gracias
Buenas,
si la interface de traducción en Prestashop 1.6 es diferente a la de Prestashop 1.7,
ve a traducción de módulos y luego busca el módulo en la interface