The category object contains basic information about product categories. It’s available on product list pages and provides access to category name and description fields.
Usage : Available on product list pages - use to display basic category information
Access the core category details that are available:
Basic Category Display
Category with Breadcrumbs
<div class="category-page"> <header class="category-header"> <h1 class="category-title">{{category.name}}</h1> {{#category.description1}} <div class="category-description"> {{&category.description1}} </div> {{/category.description1}} {{#category.description2}} <div class="category-description-secondary"> {{&category.description2}} </div> {{/category.description2}} </header> </div>
Available Properties Core Category Properties Property Type Description category.nameString Category name category.description1String Category description field 1 category.description2String Category description field 2
Product Listings For product listings within categories, you’ll need to use the product objects as they become available within product loops:
Basic Product Display in Category Context
<div class="products-section"> <div class="products-header"> <h2>{{#lang}}Products in{{/lang}} {{category.name}}</h2> </div> <!-- Note: Product loops and properties are handled separately from the category object --> <!-- You would use individual product properties within product listing contexts --> <div class="category-content"> {{#category.description1}} <div class="category-intro"> {{&category.description1}} </div> {{/category.description1}} {{#category.description2}} <div class="category-additional"> <h3>{{#lang}}Additional Information{{/lang}}</h3> {{&category.description2}} </div> {{/category.description2}} </div> </div> Complete Category Template Example Complete Category Template
<div class="category-page"> <!-- Breadcrumbs --> <nav class="breadcrumbs"> {{#breadcrumbs}} <a href="{{url}}">{{title}}</a> {{^last}} > {{/last}} {{/breadcrumbs}} </nav> <!-- Category Header --> <header class="category-header"> <div class="category-intro"> <h1 class="category-title">{{category.name}}</h1> {{#category.description1}} <div class="category-description"> {{&category.description1}} </div> {{/category.description1}} </div> </header> <!-- Main Content Area --> <div class="category-content"> <!-- Products would be handled in separate product listing contexts --> <!-- The category object only provides basic category information --> {{#category.description2}} <section class="category-additional"> <h2>{{#lang}}Additional Information{{/lang}}</h2> <div class="additional-content"> {{&category.description2}} </div> </section> {{/category.description2}} </div> </div> Usage Notes Limited Category Object : The category object only provides basic information (name and two description fields). Product listings, subcategories, pagination, and filtering functionality are not part of the category object itself and would need to be implemented through other means in the theme system.
Best Practices
Content Organization Use description1 for main category content and description2 for additional information
SEO Optimization Use category names and descriptions effectively for search engine optimization
HTML Content Category descriptions support HTML content, use proper markup for structure
Accessibility Use semantic HTML and proper heading hierarchy for category content
Next Steps 