Introduction
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:
Breadcrumbs
{%- include 'category_breadcrumbs', layout: 'breadcrumb' -%}
- outputs breadcrumb of Categories to the current Category page using the defined layout
Parent Category List
{%- include 'category_parent', layout: 'parent' -%}
- outputs parent Categories using the defined layout
Child Category List
{%- include 'category_children', layout: 'children' -%}
- outputs child Categories using the defined layout
Items in this Category
{%- include 'category_items', layout: 'items' -%}
- outputs all items categorised to the current Category Page using the defined layout.
Note- this will not fetch any Items belonging to children of this Category. E.g. If you run this on a "Clothes" Category Detail Page, it will not fetch "Shirts". If you wish to fetch sub-category items in this way- see "WebApp, Module and Products in this Category" below.
WebApp, Module and Products in this Category
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).
Learn more about filtering WebApps and Modules by 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:
Products
For example, the following code will output Products on the Category Detail Page, filtered by that Category:
{%- include 'ecommerce/products', layout: "my_layout", category_ids: this.id, type: 'list' -%}
WebApps
Change the ID to fetch different WebApps.
{%- include 'webapp', id: '1', layout: "my_layout", category_ids: this.id, type: 'list' -%}
Modules
Module 3 refers to the Blog; you can change the ID to fetch different Modules.
{%- include 'module', id: '3', layout: "my_layout", category_ids: this.id, type: 'list' -%}
Default Fields
The following tags are available within the advanced category layouts:
Field Name: Category Name
Liquid Tag: {{ this.name }}
Description: name of the category
Field Name: Category URL
Liquid Tag: {{ this.full_slug }}
Description: URL of the category
Field Name: Category ID
Liquid Tag: {{ this.id }}
Description: ID of the Category
Folder Structure
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