Subcategories on category page with image and link

Subcategories on category page with image & link

Shows subcategory thumbnails above the products on category pages

Wireframe

Sub categories

Coding Instructions

Step 1. Edit your category template

Open the category template file, which is found at /httpdocs/assets/themes/[THEME-NAME]/templates/cms/category.template.html.

Add the following code to the page, generally right above the first THUMB_LIST works best in most themes:

[%content_menu content_type:'category' start_category:'[@content_id@]' sortby:'sortorder' show_empty:'0'%]
    [%param header%]
        <div class="row subcategories">
    [%/param%]
    [%param *level_1%]
        <div class="col-xs-4 col-sm-3 col-md-2 text-center">
            <p><a href="[@url@]"><img src="[%asset_url type:'content' id:'[@content_id@]' default:'[@config:imageurl@]/na.gif'/%]" class="img-responsive"></a></p>
            <p><a href="[@url@]">[@name@]</a></p>
        </div>
    [%/param%]
    [%param footer%]
        </div>
    [%/param%]
[%/content_menu%]

Optional extra

If you want to hide products from showing up when there are subcategories, you can follow these additional steps.

Please note: If you have products that are only assigned to a parent category, they will no longer be visible when visitors browse through your category pages.

Step 1. Add the ifempty parameter

Inside the content_menu function that you created earlier, add an ifempty parameter like so:

[%content_menu content_type:'category' start_category:'[@content_id@]' sortby:'sortorder' show_empty:'0'%]
    [%param header%]
        <div class="row subcategories">
    [%/param%]
    [%param *level_1%]
        <div class="col-xs-4 col-sm-3 col-md-2 text-center">
            <p><a href="[@url@]"><img src="[%asset_url type:'content' id:'[@content_id@]' default:'[@config:imageurl@]/na.gif'/%]" class="img-responsive"></a></p>
            <p><a href="[@url@]">[@name@]</a></p>
        </div>
    [%/param%]
    [%param footer%]
        </div>
    [%/param%]
    [%param ifempty%]



    [%/param%]
[%/content_menu%]

Step 2. Move the existing thumb_list

Move the existing thumb_list function into this new ifempty parameter. You can find an example of what this code should look like here.

The thumb_list will probably be a few hundred lines long, so make sure you move all of it.

This will ensure that products will only be shown if there are no subcategories returned.


Was this article useful?

Be notified when this page is updated. Optional.