
Hello, today i want to show you how easily you can highlight selected category in default prestashop module: block categories. This module displays all available categories in your store. By default it is located in left hand side column. Selected category <li> element has got class="selected", take a look on module template file:
<li {if isset($last) && $last == 'true'}class="last"{/if}>
<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if}
title="{$node.desc|strip_tags|trim|escape:'htmlall':'UTF-8'}">{$node.name|escape:'htmlall':'UTF-8'}</a>
{if $node.children|@count > 0}
<ul>
{foreach from=$node.children item=child name=categoryTreeBranch}
{if $smarty.foreach.categoryTreeBranch.last}
{include file="$branche_tpl_path" node=$child last='true'}
{else}
{include file="$branche_tpl_path" node=$child last='false'}
{/if}
{/foreach}
</ul>
{/if}
</li>
What does it mean? It mean that you can add simple css definition into your global.css file. So, please open yout theme directory (/themes/YOUR_THEME/) and then open global.css file. Add somewhere (no matter where) this code:
#categories_block_left li a.selected {
background: orange;
}
Ofcourse instead background:orange; you can use other color or url to image like:
#categories_block_left li a.selected {
background: url('http://url.to.your.image.dot.com/image.jpg');
}
effect:

Article written byMilosz Myszczuk, PrestaShop expert. CEO and founder of the VEKIA interactive agency. Learn more.
If you like this article, support our work!

Omnibus Directive Pro module for PrestaShop. It records price history and displays the lowest 30-day...
39.99 €

Free Shipping Progress Bar is a free PrestaShop module: show shoppers how much is left for free deli...

Keep “Add to cart” visible on long product pages! Sticky Cart Bar FREE shows a slim, sticky stri...

Free PrestaShop addon for EU Omnibus compliance. It automatically records price history and shows th...