Hoy nos centramos de nuevo en Prestashop 1.7, ya que esta última versión del famoso CMS tiene algunas detalles de diseño que no nos gustan demasiado, como es el caso del carrusel de imágenes o slider de la página principal. Como ya habéis notado no ocupa toda el ancho de pantalla, pues en este post os vamos a enseñar como conseguirlo.
Índice de contenidos:
Carrusel de Imágenes (Slider) a pantalla completa
Para hacer que nuestro slider ocupe todo el ancho de la pantalla tenemos que seguir unos sencillos pasos, sin necesidad de tocar código.
Lo primero es ir a la sección de Posiciones de los módulos, que se encuentra dentro de Diseño.
Ahora clicamos en Subir un módulo en la esquina superior derecha y añadimos el módulo carrusel de imágenes en el hook displayNavFullWidth.
Tras realizar este cambio el slider aparecerá en todas las páginas de nuestra tienda online, si queremos que esto no ocurra debemos volver a la sección de Posición de los módulos, buscar el hook displayNavFullWidth y clicar en modificar el módulo Carrusel de imágenes. El siguiente paso es dejar solo marcado la página index en excepciones.
Ya hemos con seguido tener el slider de nuestra home a pantalla completa en prestashop 1.7. Para rematar el asunto debemos eliminar el módulo carrusel de imágenes del hook displayHome para que no aparezca el slider original en la home.
El siguiente paso es conseguir que la imagen de nuestro slider tenga la altura que deseamos (por defecto es 340px).
Cambiar altura del slider en Prestashop 1.7
Os daremos varias opciones;
– Podríamos ir al archivo:
/themes/classic/assets/css/theme.css
y modificar directamente la línea:
.carousel .carousel-inner {
height: 340px;
}
– O añadir una nueva línea en el archivo;
/themes/classic/assets/css/custom.css
.carousel .carousel-inner {
height: nueva_alturapx;
}
En nueva_altura, definimos el número de pixeles que queremos definir para la altura del slider en Prestashop 1.7.
– O añadir una nueva línea en el archivo;
/themes/classic/assets/css/custom.css
.carousel .carousel-inner{
height:auto!important;
}
Si os fijáis bien queda una línea blanca poco estética debajo del slider, pues vamos a ver como elimarla.
Eliminar línea blanca debajo del slider en Prestashop 1.7
Para eliminarla debemos editar el archivo homeslider.css, que se encuentra en la ruta;
/modules/ps_imageslider/css/homeslider.css
Solo debemos eliminar;
margin-bottom: 50px;
o cambiarlo a;
margin-bottom: 0px;
Otra opción es añadir el siguiente código al archivo custom.css
/themes/classic/assets/css/custom.css
.carousel .carousel-inner{
height:auto!important;
margin-bottom: 0px!important;
}
Y si este sistema no os funciona os recomiendo leer estudiar los siguientes enlaces;
https://belvg.com/blog/custom-hooks-in-prestashop-1-7.html
https://belvg.com/blog/theme-yml-file-the-heart-of-prestashop-1-7.html
http://belvg.net/prestashop-themes/PS17-demo/
Hola.
La imagen me aparece recortada al verse en pantalla completa. ¿Sabes si se puede hacer algo para que se vaya auto-ajustando al tamaño de la ventana del explorador?
Gracias!
Ya está solucionado. Gracias!
hola Jose, ¿podrías contarnos cuál era exactamente el problema y la solución que encontraste?
Gracias
Hola.
Era una tontería… Al hacer el cambio por: displayNavFullWidth la imagen queda alargada y se recorta.
Al añadir el código que comentas:
.carousel .carousel-inner{
height:auto!important;
}
Dentro del archivo: /themes/classic/assets/css/custom.css, esto se soluciona pero en mi caso estaba cargando la página de la caché.
Al eliminar el historial y al volver a cargar la página, ya se ve de forma correcta.
Gracias por preguntar!
Genial!!!
Hola, me encanta tu post. Es justo lo que buscaba
Ahora solo tengo una duda. Como puedo hacer paaa que el slider se deslize hacia abajo o hacía arriba en vez de hacia la derecha o la izquierda.
Un saludo y mil gracias
Hola Francisco, con el módulo slider que viene por defecto en Prestashop no es posible hacerlo. Para conseguir lo que comentas tendrás que buscar un módulo slider que lo permita, y seguramente será de pago.
Lo sentimos!!
Buenos días, yo he intentado con todo lo que has comentado sin lograr cambiar nada de nada, sigue exactamente igual el slider, eh borrado cache y el historial de navegador y nada, no he conseguido ningún cambio.
Hola Jose María, ¿podrías pasarnos enlace a tu web?
Hola, funciona perfecto. ¿Pero como puedo hacer para que solamente aparezca en la home? Me aparece en todas las páginas de producto.
Muchas gracias.
Hola María, en el psot explicamos la duda que tienes; Tras realizar este cambio el slider aparecerá en todas las páginas de nuestra tienda online, si queremos que esto no ocurra debemos volver a la sección de Posición de los módulos, buscar el hook displayNavFullWidth y clicar en modificar el módulo Carrusel de imágenes. El siguiente paso es dejar solo marcado la página index en excepciones.
¡Perfecto!
Muchas gracias.
Buenos días,
Me ha encantado el post y funciona a la perfección. Hay un tema que no encuentro solución en Prestashop 1.7: ¿sabrían cómo se podría poner el banner rectangular que aparece abajo en la parte superior (encima de “Contacte con nosotros”) y que aparezca a pantalla completa?
Mil gracias.
Hola Sara, si quieres colocar un banner en la parte superior de tu tienda te recomendamos probar con algún módulo que te permita hacerlo. Hay alguno gratuito como el desarrollado por mypresta, que puedes descargar en https://mypresta.eu/modules/front-office-features/html-box.html.
Buenos días,
Pero no se puede adaptar a cada pantalla, ¿verdad? El problema que tengo es que quiero que me ocupe todo el ancho de pantalla, y no averiguo localizar como.
Gracias.
Hola Sara, prueba con estas ideas del foro oficial de prestashop
https://www.prestashop.com/forums/topic/330123-solved-block-banner-with-full-width/
Muchas gracias por el aporte. Me ha sido muy útil.
Buenas tardes,
Gracias por vuestros aportes, ya he entrado un par de veces en vuestra web y me ha servido de gran ayuda.
Es mas fácil cambiar de hook el módulo que meterse en código. Lo extraño, aunque no tanto viendo como nos «engaña´´ prestashop, es que en el hook displaynavfullwidth no haya ningún modulo enganchado, entiendo que el banner, por ejemplo, si queremos que se vea a pantalla completa, bastaría con engancharlo en este hook, igual me equivoco,
Mi duda es, por qué no desaparece la dichosa linea blanca de debajo del slider, he probado con los códigos que indica en el post, pero no he obtenido resultado.
Parece que nadie a tenido este problema.
Muchas gracias de nuevo, un saludo!!
Hola Eduardo, me alegro de que te sirvan de ayuda estos aportes. Vemos que en tu web sigue apareciendo la línea blanca debajo del slider. Prueba a crear un override con el mismo código y cuéntanos si lo solucionas. Un saludo
Hola,
El banner funciona perfectamente a pantalla completa, pero el texto que se incluye desde el modulo del Back office para que aparezca en las diferentes imágenes del slider no es responsive. ¿Cómo se podría poner responsive el texto?
Muchísimas Gracias.
SOLUCIÓN A LÍNEA BLANCA DEBAJO DEL SLIDER: hemos editado el post para comentaros como eliminar el espacio en blanco (margin-bottom) que algunos no podían eliminar.
Hola, me gustaria poner el slider para que se vea en tablets y moviles. Uso prestashop 1.7.5.1 y el slider que trae en la plantilla por defecto. Se puede hacer?
Gracias
Hola Manuel, por defacto ya debería aparecer el slider en todos los dispositivos. Revisa que tengas activado el módulo carrusel de imágenes en dispositivos móviles. Esta opción está dentro de la pestaña desplegable antes de entrar a configurar el módulo.
Hola, mi problema es el siguiente, el post es muy bueno, funciona a la perfección menos un detalle, al elegir donde quieres que aparesca el carrusel, lo pongo solo en el index mediante las excesiones del hook, pero me sigue saliendo en el resumen del pedido, ahí no hay una excesion para ese apartado, he buscado en mr google y no encuentro solución. por favor, un poco de ayuda…gracias
Hola Jose, danos un poco más de información sobre la versión exacta de Prestashop que usas y el dominio de tu web. Esperamos encontrar la solución!!. Gracias
Hola, en la version 1.7.5.1 la ruta no es la misma para hacer los ajustes, ya que viene el tema default-bootstrap y no logro encontrar el custom.css para configurar el carrusel.
Alguien me puede comentar la ruta?