CATEGORIES

Category Detail Layouts

9min
category detail pages give you additional features including breadcrumbs, parent category lists, child category lists and more 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 output breadcrumb of categories to the current category page using the defined layout {% include 'category breadcrumbs', layout 'breadcrumb' %} parent category list output parent categories using the defined layout {% include 'category parent', layout 'parent' %} child category list output child categories using the defined layout {% include 'category children', layout 'children' %} items in this category 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' 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) 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 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 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 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