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

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.

eCommerce Products in this Category

If you are using the eCommerce Module, you can also use the following:

{%- include 'ecommerce/products', 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