Categories on the Front End - Category Detail Layouts

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

{%- include 'category_parent', layout: 'parent' -%} - outputs parent Categories using the defined layout

{%- 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