Category Detail Layouts
Category Detail Pages give you additional features including Breadcrumbs, Parent Category Lists, Child Category Lists and more.
In this set of Articles, we'll show you the Liquid syntax needed to get the most out of Categories on the Front End. Once you have enabled a Detail Page for a Category, you can output any of the following on your Detail Layout:
Output breadcrumb of Categories to the current Category page using the defined layout:{%- include 'category_breadcrumbs', layout: 'breadcrumb' -%}
Output parent Categories using the defined layout: {%- include 'category_parent', layout: 'parent' -%}
Output child Categories using the defined layout: {%- include 'category_children', layout: 'children' -%}
Output all items categorised to the current Category Page using the defined layout: {%- include 'category_items', layout: 'items' -%}
Note that this will only output items in this specific Category. To output all items that belong to sub-Categories, then add another parameter of show_all_sub_items: 'true'.
You can use the Category ID {{this.id}} to filter WebApp, Module or Product Lists and display the Items with this Category assigned (and those belonging to Categories which are children of this Category). We'll include some examples here of how the {{this.id}} variable can be used specifically on the Category Detail Page to filter by that Detail Page's Category dynamically: Learn more about filtering WebApps and Modules by Category
For example, the following code will output Products on the Category Detail Page, filtered by that Category:
Change the ID to fetch different WebApps.
Module 3 refers to the Blog; you can change the ID to fetch different Modules.
The following tags are available within the advanced category layouts:
Field Name | Liquid Tag | Description |
Category Name | {{ this.name }} | Name of the category |
Category URL | {{ this.full_slug }} | URL of the category |
Category ID | {{ this.id }} | ID of the cateogory |
Category layouts are stored in the following folder structure, which you can view via Code Editor: layouts/categories/
Within this folder you will find the following:
- detail/- detail layouts contain the code displayed on category pages
- default.liquid - the default detail layout for categories
- list/ - list layouts allow you to customise how categories are displayed on category detail pages
- breadcrumb.liquid - allows you to customise how categories are displayed within breadcrumbs on the current category detail page
- children.liquid - allows you to customise how child categories are displayed on the current category detail page
- items.liquid - allows you to customise how items that are categorised to the current category are displayed
- parent.liquid - allows you to customise how parent categories are displayed on the current category detail page