Las plantillas en Prestashop nos aportan la parte visual o estética de la tienda online. Es decir, mientras que Prestashop es el motor de la tienda, la plantilla es como si fuera la piel que la reviste. La plantilla le da la forma y el acabado.
Además, hay algunas plantillas premium que también incorporan herramientas para construir a tu gusto las páginas de la tienda.
Por ejemplo, la plantilla Warehouse incorpora un potente e intuitivo page builder conocido como Elementor que servirá para crear una página de inicio a medida y otras páginas CMS. Además, incluye un montón de opciones de personalización para otras páginas de Prestashop como la de categorías, ficha de producto, etc.
Cuando trabajamos con una plantilla como Warehouse, ya disponemos de sobradas opciones de personalización. Pero, cuando estamos trabajando con la plantilla que viene por defecto en Prestashop ¿cómo podemos personalizar la estética de la tienda más allá de las opciones que vienen en la plantilla?
Aparte de añadir código CSS. Lo que te voy a mostrar también sirve para añadir código javascript y elementos al <head> de Prestashop (como código de verificación de Facebook, analytics y otros)
APÚNTATE A MI PLATAFORMA DE CURSOS. ACCEDE A TODOS LOS CURSOS POR SOLO 10€/MES
ÍNDICE DEL POST
- 1.- Personalización de la plantilla que viene por defecto en Prestashop 1.7 y Prestashop 1.6
- 2.- Módulos para modificar código CSS de la plantilla en Prestashop 1.6 y Prestashop 1.7 | Añadir javascript | añadir al <head>
- 3.- Modificar CSS requiere conocimiento del lenguaje
- 4.- Opción plantilla Warehouse
- 5.- Acciones que debes hacer antes de realizar modificaciones del CSS
- 6.- Ejemplo de modificación del color de fondo del footer en la plantilla por defecto de Prestashop 1.7 con CSS
- 7.- Ejemplo de modificación del color de fondo del footer en la plantilla por defecto de Prestashop 1.6 con CSS
- 8.- ¿Dónde puedo aprender CSS?
1.- Personalización de la plantilla que viene por defecto en Prestashop 1.7 y Prestashop 1.6
La plantilla que viene por defecto en Prestashop 1.6 y 1.7 tiene muy pocas opciones de personalización.
La plantilla de Prestashop 1.6 tiene pocas opciones, pero la plantilla por defecto de Prestashop 1.7 prácticamente no tiene ninguna.
Entonces, ¿cómo podemos personalizar un poco más el diseño?
La única opción que nos queda es modificar los archivos CSS de la plantilla. Pero a veces es complicado encontrar el archivo CSS que debemos modificar. Además, cuando se actualice la plantilla se borrarían todas las modificaciones.
Por lo que, mi recomendación es utilizar un módulo que me añada una ventana CSS para poder añadir código a la plantilla. De esta manera gano en dos aspectos:
a.- No tengo que buscar el archivo CSS a modificar. Simplemente, añado el código al módulo CSS
b.- Si actualizo la plantilla, los cambios no se perderán ya que están en el módulo y no directamente en los archivos CSS de la plantilla.
2.- Módulos para modificar código CSS de la plantilla en Prestashop 1.6 y Prestashop 1.7 | Añadir javascript | añadir al <head>
Existen varias opciones gratuitas para poder incorporar un módulo que nos permita añadir código CSS a la plantilla de Prestashop sin necesidad de modificar los archivos.
i.- Prestashop 1.6.- Si estás utilizando Prestashop 1.6 o Prestashop 1.5, puedes utilizar este módulo gratuito: Prestashop CSS Module
Es posible que más adelante también sea válido para Prestashop 1.7. Fíjate en la descripción del módulo, donde habla de las compatibilidades.
ii.- Prestashop 1.7.- Si estás utilizando Prestashop 1.7 puedes utilizar el módulo gratuito de la empresa St-Themes que descargar desde este enlace: Custom Code Module
NOTA: Los desarrolladores del módulo indican que es compatible con todas las versiones posteriores a Prestashop 1.7.1.0
3.- Modificar CSS requiere conocimiento del lenguaje
Añadir código CSS para realizar modificaciones en la plantilla no es fácil, y para hacerlos debes adquirir o tener conocimientos del lenguaje.
Es cierto que es un tipo de código fácil de aprender, conocido no solo por programadores, sino también por diseñadores gráficos y diseñadores web.
Pero es necesario formarse en él.
Nota: Yo no te puedo dar soporte para realizar modificaciones en tu plantilla. Primero, porque no soy un especialista. Aunque, en su momento lo estudié en el ciclo de grado superior de desarrollo de aplicaciones web, no lo utilizo habitualmente y por tanto solo se hacer cosas muy básicas. Segundo, porque esa no es la finalidad de este post. Pero, en cualquier caso, podéis hacer consultas en los comentarios a ver si especialistas en CSS os pueden echar una mano.
4.- Opción plantilla Warehouse
Si quieres poder personalizar tu plantilla y no tener que aprender conocimientos CSS, mi recomendación es que no uses la plantilla que viene por defecto con Prestashop y adquieras una plantilla premium.
Mi recomendación es la plantilla Warehouse. En mi opinión, es la mejor plantilla para Prestashop. Podrás crear una web a tu medida, sin necesidad de aprender CSS.
Las plantillas de calidad como la plantilla Warehouse, ya incluyen un apartado para poder añadir código CSS o Javascript entre las opciones de la plantilla, y si se quisiera añadir algún código, no sería necesario instalar ningún módulo. En el caso de la plantilla Warehouse, tienes esta opción en el editor de temas (theme editor).
5.- Acciones que debes hacer antes de realizar modificaciones del CSS
Para no volverte “loco” mientras añadas código CSS a través de alguno de estos módulos, desactiva la cache y obliga a compilación de plantillas.
Si no lo haces, es posible, que los cambios que vayas haciendo no se vean reflejados en la web.
Ve a “Parámetros avanzados > Rendimiento”:
En el bloque “SMARTY”
i.- Caché: pon “NO”
ii.- Compilación o cache de plantillas: pon “Forzar compilación” o “Force compilation”
Quitar caché y forzar compilación en Prestashop 1.6
Desactivar caché y forzar compilación en Prestashop 1.7
En el bloque “CCC” pon todas las opciones en “NO” y pulsa «Guardar».
Cuando hayas hecho las modificaciones CSS, puedes volver a modificar estos parámetros de rendimiento.
Vamos a ver ahora un sencillo ejemplo de como modificar el color de fondo del footer en Prestashop 1.7
i.- Descargar módulo: En primer lugar, vamos a descargar e instalar el módulo: Custom Code Module.
Para ello, accederemos a la siguiente página: Descargar Custom Code Módulo
Para descargar el módulo, haremos clic en el enlace: “Free Prestashop 1.7 custom code module”.
Guárdalo en el escritorio y no lo descomprimas
Custom code module CSS Prestashop 1.7
ii.- Instalar módulo: ahora procederemos a instalar el módulo descargado
Para instalar el módulo en Prestashop 1.7, iremos a: “PERSONALIZAR > Módulos > Módulos y servicios”.
Ahora haz clic en el botón “Subir un módulo”. Luego haz clic en el enlace: “selecciona el archivo”.
Elige el módulo y haz clic en “Abrir”.
Posteriormente haz clic en el botón “Configurar”, para que se abra el módulo.
iii.- Identificar lo que se quiere modificar: Para identificar el selector de ID o selector de clase que tenemos que utilizar, abriremos el inspector de código del navegador.
En el caso de Mozilla Firefox, iremos al menú y seleccionaremos: “Desarrollador web > Inspector” y se abrirá una ventana en la parte inferior de la pantalla.
A continuación, haremos clic en “Inspector” y después volveremos a hacer clic en sobre la web cuando me marque la parte del footer a modificar.
Hecho esto, nos aparecerá un código remarcado, que en este caso nos marca el selector de clase que debemos utilizar:
Vemos que la clase footer-container podría valer
Ahora, volveremos a la configuración del módulo y en el área de texto “Custom code CSS” pondremos lo siguiente:
.footer-container {
background-color:#D9D9D9;
}
Y haremos clic en el botón “Save” situado al final de la página
Añadimos código CSS al módulo de Prestashop 1.7
Ahora, vuele a la home y ten pulsada la tecla CTRL y haz clic en F5 para recargar la página y los archivos CSS de esta.
Verás que el color de fondo del footer ha cambiado
Modificación del color de fondo del footer vía CSS
Vamos a ver ahora un sencillo ejemplo de cómo modificar el color de fondo del footer en Prestashop 1.6
i.- Descargar módulo: lo primero que vamos a hacer es descargar el CSS Module para Prestashop 1.6.
Para ello, haremos clic en el siguiente enlace: CSS Module.
A continuación, haremos clic en el enlace: “Download the Prestashop CSS Module”
Descargar CSS Module
Ahora, baja en la página que te aparece y haz clic en el botón: “DOWNLOAD FREE MODULE”.
A continuación, te tendrás que registrar como si fueras a hacer la compra del módulo a coste cero.
Al final, recibirás varios correos. En el correo “CSS Module Download” te vendrá un enlace para descargar definitivamente el módulo.
ii.- Instalar módulo: Par instalar el módulo, iremos a: “Modulos y servicios > Modulos y servicios”.
A continuación, haremos clic en “Añadir un nuevo módulo” y te aparecerá un bloque denominado: “AÑADIR UN NUEVO MODULO”.
Haremos clic en: “Selecciona un archivo”, elegiremos el módulo que nos acabamos de descargar (comprimido) y haremos clic en “Abrir”.
A continuación, haremos clic en: “Subir este módulo”.
Se mostrará el módulo “CSS Editing Module” y haremos clic en “Instalar”.
Instalar y configurar CSS editing module
Ahora, haz clic en “Continuar con la instalación”.
A continuación, se abrirá el módulo con un área de texto para introducir Código CSS.
iii.- Identificar selector CSS que se quiere modificar: Para identificar el selector clase o ID que debemos utilizar, abriremos el inspector de código del navegador.
En el caso de Mozilla Firefox, iremos al menú y seleccionaremos: “Desarrollador web > Inspector” y se abrirá una ventana en la parte inferior de la pantalla.
A continuación, haremos clic en “Inspector” y después volveremos a hacer clic en sobre la web cuando me marque el footer
Identificar clase para añadir código CSS
iv.- Añadir código CSS: Volvemos a la configuración del módulo “CSS Editing Module” y en el área de texto denominado “Custom CSS” ponemos el siguiente código:
.footer-container {
background-color:#D9D9D9;
}
Y hacemos clic en el botón “Guardar”.
Añadir código CSS al módulo CSS Editing Module
NOTA: En este caso ha coincidido que el selector para cambiar el color de fondo del footer en Prestashop 1.7 y 1.6 es el mismo, pero no tiene por qué ser así.
Volvemos a la parte pública de la web y hacemos clic en CTRL + F5 para recargar la página y los archivos CSS
Color de fondo modificado en footer plantilla Prestashop 1.6
8.- ¿Dónde puedo aprender CSS?
En internet hay un montón de documentación para aprender a utilizar CSS. Aquí te dejo algún enlace que te puede interesar.
Guía Básica para empezar con CSS
Webs y canales youtube para aprender CSS
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í.
muy util he realizo los pasos tal y como lo explicas y genial.
Estoy intentado ahora eliminar las subcategorias del menu horizontal, estoy probando con .top-menu[data-depth=”2″]{display:none!important;} , pero sin exito, no se si porque el css esta mal o que no se pueden realiar estas modificaciones por este modulo.
Muchas gracis.
Tengo la plantilla warehouse y quiero quitar el mensaje «Producto disponible con otras opciones». No sé si se puede configurar desde el back office, he intentado poner display:none en el css pero no sé si lo estoy haciendo bien.
Buenas Sebastián
Sí una opción sería esa vía CSS con un display: none; o display: none!important;
Otra sería buscar esa traducción en Prestashop y modificarla.
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 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, Curso Copywrting, Woocommerce, WordPress, etc. etc.
Muchas gracias, Joaquín. Información muy valiosa, especialmente para los que acabamos de empezar.
Tengo una duda: ¿con este módulo podría llegar a cambiar el tamaño del logo?
Veo que tiene varias secciones, y que una de ellas es para el Head code, pero he estado haciendo pruebas y lo único que he conseguido es que el logo se desplazara hacia la derecha de la página (no me preguntes cómo… :S)
¡Gracias!
Hola Patricia.
En principio el código CSS no es para cambiar tamaños. ¿has probado a subir el logo a un tamaño más grande? ¿tiene tu plantilla opciones de personalización sobre el logo?
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.
Muchas gracias, Joaquín, por tu respuesta. Considero apuntarme a tus cursos seriamente, porque estoy muy pez y ya he visto que controlas 🙂
Mi plantilla no tiene opciones de personalización sobre el logo, es la clásica de Prestashop 1.7. He visto que recomiendas otras plantillas, pero la verdad es que quiero arrancar todo el aspecto logístico antes de invertir en una plantilla mejor (aunque a la larga lo haré seguro).
De momento había visto que se podía cambiar el tamaño del logo retocando del código fuente, pero no sé como acceder al código fuente.
Si quieres añadir código CSS, una forma muy sencilla es a través de un módulo (si la plantilla no tiene la opción incorporada).
Aquí tienes un post sobre eso: Módulos para añadir CSS a Prestashop
Hola, he probado multiples formas de modificar la fuente en prestashop 1.7 de la plantilla por defeco y no hay caso… si tienes algunos datos quedamos prestos. Garcias por tu tiempo y disponibildad.
el link de la fuente
la font-family
font-family: ‘Montserrat’, sans-serif;
Buenas,
¿has echado un vistazo a este post: https://victor-rodenas.com/2012/08/06/utilizar-fuentes-de-google-font-en-prestashop/?
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.
Y si lo arruine y quiero devolverlo a como estaba ¿como se hace?
PD: Buen tutorial <3
Muy buenas.
Pues elimina el código CSS que has añadido al módulo y listo.
***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, SEO Tiendas online, Analytics para ecommece, Plantilla warehouse, Blog Prestashop etc. etc.****
Saludos, excelente aporte, pude realizar un cambio de color en un texto satisfactoriamente, sin embargo cuando intento realizar un segundo cambio no lo procesa, que debería hacer para realizar mas de un cambio en la plantilla, gracias
Buenas Xiomara.
Seguramente el código CSS que has introducido no será el adecuado para el efecto que quieres dar.
exelente tutorial amigo….
Buenas.
Me alegro que haya sido de tu interés este post sobre este módulo para modificar CSS en Prestashop