
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!

Sell optional checkout services your customers choose: gift wrapping, shipping insurance, express ha...
149.00 €

Apply conditional order discounts using native cart rules. Create BOGO deals, buy N get M free, spen...
149.00 €

Control which shipping carriers customers see at checkout. Shipping Method Rules is a PrestaShop pol...
129.00 €

Charge handling, service or packaging fees only when your rules match. Conditional Order Fees adds a...
129.00 €