Subcategory List

Subcategory List

A full subcategory link list, allowing users to quickly see and click into subcategories.


  • Bicycles
  • Auto Parts
  • Computers & Electronics
  • Fitness & Supplements
  • Furniture & Homewares
  • Health & Beauty
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Gifts
  • Toys & Games
  • Jewellery & Accessories
  • Animal & Petcare
  • Arts & Crafts
  • Events & Party Supplies
  • Books & Stationery
  • Food & Beverages


Subcategory List

Coding Instructions

Step 1: Connect to your website via FTP

Step 2: Open up the Category page template

Open the category.template.html template in a text editor. (We suggest either Sublime Text or Atom.) This template file can be found in /httpdocs/assets/themes/[THEME-NAME]/templates/cms/category.template.html. If using a different template, you will have to go into that template instead of the 'skeletal' template.

Add a [%content_menu%] at line 33 which is after the closing <h1> tag.

Step 3: Add Sub Category Code into template

Add the following code and save the template:

[%content_menu content_type:'category' sortby:'sortorder, name' show_empty:'1' category:'[@id@]' start_category:'[@id@]'%]
    [%param header%]
        <div class="col-xs-12">
    [%param *level_1%]
    <div class="col-xs-6 col-sm-4">
        <a href="[@url@]"><i class="fa fa-chevron-right"></i> [@name@]</a>
    [%param footer%]

The [%content_menu%] dynamically generates a menu based on the content type you define in the parameters. These parameters will be used in the [%content_menu%]:

Parameter Description
content_type The content type you'd like to target for the menu.
sortorder The sort order for the pages in your menu.
show_empty Shows empty content pages as a part of the menu.
category Targets a specific category to generate a menu from.
start_category Targets a specific category at any level to begin the menu from, thus changing what each level param references.

Inside this [%content_menu%], there are three [%params%]: header, level_1, and footer. The level_1 param loops through every item that matches the parameters we defined at the top of the [%content_menu%] and gives the defined html markup:

<div class="col-xs-6 col-sm-4">
    <a href="[@url@]"><i class="fa fa-chevron-right"></i> [@name@]</a>

We are using two B@se data tags here:

B@se Tag Description URL to the contents page.
Subcategory List The name of the content.

The header and footer param wrap around the level_1 param. the header param is opening a <div class="col-xs-12">, the level_1 is looping through the subcategories, and then footer param is closing the main col-xs-12 div.

Now every category page with subcategories will show a list of these subcategories under the category title.

Was this article useful?

Be notified when this page is updated. Optional.