Guía – Cambiar el fondo de tu tienda según categoría en Prestashop 1.5

En esta guía, explicaremos como tener un fondo distinto en nuestra tienda Prestashop, según en la categoría donde nos situemos.

Lo primero que vamos hacer, es editar el fichero:

/themes/default/header.tpl

En nuestro caso, hacemos referencia a la plantilla por defecto de Prestashop.

Una vez hemos abierto el fichero en cuestión, buscaremos la siguiente linea:

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if}">

Y la dejamos así:

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $smarty.get.id_category}categoria{$smarty.get.id_category}{/if}">

Dentro de class, hemos agregado lo siguiente:

{if $smarty.get.id_category}categoria{$smarty.get.id_category}{/if}

Esto nos permitirá ahora, identificar el body con clases distintas en el css, según en la categoría donde estemos.

Por ejemplo para poner un fondo a la pagina, si estamos en la categoría con “id 5”, iríamos por ejemplo al fichero:

/themes/default/css/global.css

Y añadimos lo siguiente:

.categoria5 {background:red;}

He puesto un color por poner un color cualquier, también podríamos haber puesto una imagen….

Si fuera para la categoría con id 6, pues añadiríamos en el css…

.categoria6 {background:black;}

He vuelto a poner un color cualquier, también podríamos haber puesto una imagen….

Y así sucesivamente.

Print Friendly
Hosting Prestashop