Compártelo ya!!

 

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.

 

¿Aún no conoces la plantilla Warehouse?: Mega Guía plantilla Warehouse, la mejor plantilla para Prestashop

 

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?

 

 

 

 

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.

 

En este post puedes ver todas las opciones de personalización de las plantillas por defecto de Prestashop 1.6 y 1.7: Personalizar plantillas prestashop por defecto

 

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

 

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.

 

Aprende a configurar los transportistas en Prestashop: Configurar Transportistas Prestashop

 

 

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.

 

Aquí tienes una mega guía sobre la plantilla Warehouse (tienes enlaces para ampliar info): Guía Plantilla Warehouse.

 

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”

 

desactivar cache y forzar compilación plantilla prestashop 1.6 modificar css

Quitar caché y forzar compilación en Prestashop 1.6

 

para modificar css prestashop 1.7 vaciar caché y forzar compilacion

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.

 

 

6.- Ejemplo de modificación del color de fondo del footer en la plantilla por defecto de Prestashop 1.7 con CSS

 

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 para prestashop 1.7

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:

 

herramientas desarrolladores navegador inspeccionar CSS

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 el código al módulo de prestashop 1.7

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

 

modificar color fondo del footer prestashop 1.7

Modificación del color de fondo del footer vía CSS

 

 

7.- Ejemplo de modificación del color de fondo del footer en la plantilla por defecto de Prestashop 1.6 con 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 para prestashop 1.6

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

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.

 

Aprende a crear una tienda online con mi curso Prestashop

 

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

 

Identificador de clase navegador para css prestashop

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”.

 

codigo css prestashop 1.6 code module

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

 

modificar color de fondo css plantilla prestashop 1.6

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

Aprende CSS desde cero

Guía CSS

 

 

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!!

DESCARGA GRATIS!!!!

 

1.- Guía para crear una tienda online de éxito
2.- Guía SEO para Prestashop
3.- Training Woocommerce, plugins imprescindibles y recomendados

Mira en tu buzón de correo, para confirmar la suscripción.