Introduction

Categories provide an excellent method for grouping your WebApp and Module items. Once you have categorised items to a category, you can use it to call specific items within a WebApp or Module onto a page. 

Alternatively, you can output all items that have been categorised to a specific category and it’s subcategories.

Using Categories in Pages and in Dynamic Content Layouts

Static Pages:

{{context.exports.categories.data}} - Outputs all categories globally.

{{context.exports.categories.data['1234']}} - Outputs a specific category, replace “1234” with the desired Category ID.

WebApp / Module / eCommerce Layouts:


Display All Categories for this Item


The following code snippet will output all categories the current WebApp, Module or eCommerce Item or Product is categorised too:

{% for category_id in this.category_array -%}
  {{context.exports.categories.data[category_id].name}}
{% endfor -%}

If you'd like to customise how the categories are displayed, you can add a div with a class or ID within this for loop and then write your custom CSS.


Display first, second or third category for this item

If the WebApp item is categorised to more than one category, you can do the following to only output a particular category:

{{context.exports.categories.data[this.category_array[0]].name}}


Check if an item has a category assigned to it


If you want to make sure the category item in the array you are calling exists first, then you should do the following:

First category in the array:

{% if this.category_array[0] != blank %}
  {{context.exports.categories.data[this.category_array[0]].name}}
{% endif %}

Second category in the array (and so on):

{% if this.category_array[1] != blank %}
  {{context.exports.categories.data[this.category_array[1]].name}}
{% endif %}


Change Content of a Layout Based on Category

What if you want to change the content on a Detail View if a particular category has been assigned to it?

In this example, you'd need to know the ID of a category you want to display; this can be found in Admin when you select a category. E.g. let's say we want to display something special when something has the category "Featured" and you know it has an ID of "111111":

{% assign featured_id = "111111" %}
{% for category_id in this.category_array -%}
  {% if category_id == featured_id %}
    <!-- Add Featured Content Here -->
  {% endif %}
{% endfor %}

Category Layouts

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

Did this answer your question?