There is one area that always frustrates new users in Magneto. It’s trying to add image based navigation grids to categories that have no products. For example, one of your top level categories is circular saws. You sell four types of circular saws. You want to have a navigation grid at the top level, with those four categories.
Here is an example:
For the sake of this example, I am going to assume that you have two columns, with right sidebar.
In Magento backend, navigate to CMS> Static Blocks.
Create a new static block called ‘saws_cat’. Click on the HTML tab, so you are viewing in HTML.
Insert the following code:
<div class=”col2-right-layout”>
<div class=”category-products”>
<ul class=”products-grid”>
<li class=”item first”>
<h2 class=”product-name”>Circular/h2>
</li>
<li class=”item”>
<h2 class=”product-name”>Worm Drive/h2>
</li>
<li class=”item”>
<h2 class=”product-name”>Heavy Duty/h2>
</li>
<li class=”item last”>
<h2 class=”product-name”>Commercial/h2>
</li>
</ul>
<ul class=”products-grid”>
<li class=”item first”>
</li>
<li class=”item”> </li>
<li class=”item”> </li>
<li class=”item last”> </li>
</ul>
<ul class=”products-grid”>
<li class=”item first”> </li>
<li class=”item”> </li>
<li class=”item”> </li>
<li class=”item last”> </li>
</ul>
<script type=”text/javascript”>// <![CDATA[
decorateGeneric($$(‘ul.products-grid’), [‘odd’,’even’,’first’,’last’])
// ]]></script>
</div>
</div>
This will create an unordered list, just like the one magento uses to style the product grid. Just add your images above the Category names with a <br> tag, and then highlight both and link to the appropriate category page, and you have a category grid that matches Magento perfectly. Now insert the static block you just created in the top level category and you’re done.