7

Personaliza tu plantilla por defecto de Prestashop 1.6

Si has decidido empezar a trabajar con prestashop 1.6, verás que dispones de cientos y cientos de plantillas disponibles en internet, generalmente de pago, para poder adecuar tu web al tipo de producto que vendes.

No obstante, la plantilla por defecto de prestashop default-bootstrap tiene muchas posibilidades, sobretodo si tienes unos mínimos conocimientos de CSS. En esta publicación quiero darte a conocer unos consejos para poder personalizar la plantilla por defecto de prestashop sin tener que recurrir a la tienda para comprar una diferente y ahorrarte así unos euros.

Lo primero que tienes que hacer antes de nada, es crear una copia de la plantilla por defecto para trabajar con esta nueva y mantener siempre la plantilla por defecto de prestashop intacta, evitando así cualquier desagradable imprevisto 🙂

Como empezar a personalizar la plantilla prestashop default-bootstrap

Accede a tu backoffice a: Preferencias > Temas > Añadir tema

 

tema nuevo prestashop

 

Una vez accedes a crear un tema nuevo, selecciona las características generales que tenga la plantilla nueva y eliges en “Usar este tema como modelo” la plantilla default-bootstrap.

 

duplicar plantilla por defecto prestashop

Ahora solo tienes que acceder a Preferencias > Temas y verás que además de la plantilla por defecto, tienes una plantilla más instalada. Selecciona esta nueva plantilla, y marca utilizar este tema.

Creamos una hoja de estilo CSS personalizada

Para poder personalizar la plantilla modificando el CSS, lo que vamos a hacer es, antes que nada, crear una hoja de estilo CSS para adjuntarla a nuestra tienda, y añadir ahí todos los cambios que queramos hacer. De esta manera, solo será necesario cargar este archivo para darle una aspecto completamente nuevo. Vayamos por partes:

  1. Creamos un archivo de estilo: estilo-tienda.css . Puedes utilizar un bloc de notas, aunque yo te recomiendo un programa como notepad++.
  2. Accedemos al administrador de archivos donde está alojada nuestra web, y localizamos el archivo header.tpl. Lo abrimos y añadimos este código en la línea 49,  para que tu plantilla añada los estilos que vamos a crear:
    <link href=”{$css_dir}estilo-tienda.css” rel=”stylesheet” type=”text/css” media=”screen” />
  3. Ahora, deberemos recompilar las plantillas para que el cambio surta efecto. Accede a Parámetros avanzados > Rendimiento y forzar la recompilaciónforzar compilación

A partir de este momento, podemos modificar todo aquello que queramos, y quedará guardado en este archivo que será leido cada vez que se carguen las páginas de nuestra tienda. Veamos ahora un ejemplo de cambio en nuestra web.

Por ejemplo, vamos a cambiar el color de fondo del header de nuestra tienda. Para acceder al estilo, haz clic la zona en cuestión con el botón derecho del ratón y marca “inspeccionar” (esta función puede variar dependiendo del explorador que utilices, en mi caso google chrome) y busca el header en el código. Automáticamente te aparecerá el estilo en la parte derecha como aparece en la imagen:

inspector elementos

Por lo tanto, si queremos cambiar el color de fondo del header, solo tenemos que ir a nuestro archivo personalizado de CSS y añadir

header {
background-color: #000000;
}

Listo, guarda cambios, y a partir de ahora el header aparecerá en color negro. No es un buen ejemplo real, pero sí que marca el inicio de un nuevo diseño de tu web, adaptado a los colores corporativos de tu empresa.

 

Cristian Ballesteros

Apasionado de la informática, de la política, del deporte y vida sana. Independiente, emprendedor, incansable, constante, ilusionador, ilusionado… Coordino la web latiendadeelectricidad.com

7 Comments

  1. Hola cristian,

    Y cómo puedo hacer lo mismo con el tema classic de prestashop 1.7.

    gracias

    • En prestashop 1.7 puedes modificar la plantilla de una manera mucho más sencilla. Solo tienes que acceder al administrador de archivos de tu hosting, y entrar en: themes / classic / assets / css / custom.css y añadir aquí el codigo css que quieras añadir. Así de sencillo 🙂

  2. Hola, gracias por el aporte. Lo he probado pero no me va, por favor me puedes confirmar la ruta del archivo header.tpl me he vuelto loco buscando y solo encontre uno con 48 lineas, yo inclui la linea que comentas en el archivo prestashop/pdf/header (como te digo lo cambie en este directorio porque es el único header con 48lineas) si me puedes confirmar la ruta…
    También el directorio donde dejar el archivo CSS por favor. Creo que el fallo lo tengo o en que no lo cambio en el archivo header correcto o que el CSS no me lo localiza, gracias

    • El archivo header.tpl puedes encontrarlo en la carpeta themes.
      Cuando accedas a esta carpeta, veras tantas carpetas como temas tengas. Si has seguido este artículo, y has creado un nuevo tema, la ruta exacta es: carpeta raiz>themes>Nombre del tema
      Ahí dentro lo tienes listo para modificar.

Responder a Vicente Cancelar respuesta