Category Object

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

Basic Category Information

Access the core category details that are available:

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

<div class="category-page">
    <!-- Breadcrumbs -->
    <nav class="breadcrumbs">
        {{#breadcrumbs}}
            <a href="{{url}}">{{title}}</a>
            {{^last}} > {{/last}}
        {{/breadcrumbs}}
    </nav>
    
    <!-- Category Header -->
    <div class="category-header">
        <h1>{{category.name}}</h1>
        
        {{#category.description1}}
            <div class="category-intro">
                {{&category.description1}}
            </div>
        {{/category.description1}}
        
        {{#category.description2}}
            <div class="category-additional-info">
                {{&category.description2}}
            </div>
        {{/category.description2}}
    </div>
</div>

Available Properties

Core Category Properties

Property	Type	Description
`category.name`	String	Category name
`category.description1`	String	Category description field 1
`category.description2`	String	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:

<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

<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

Product Object

Learn about individual product page implementation

Navigation Object

Build category navigation and breadcrumbs

SEO Object

Optimize category pages for search engines

Basket Object

Integrate shopping cart functionality

Getting Started

Template Language

Global Objects

Page Objects

Basic Category Information

Available Properties

Core Category Properties

Product Listings

Complete Category Template Example

Usage Notes

Best Practices

Content Organization

SEO Optimization

HTML Content

Accessibility

Next Steps

Product Object

Navigation Object

SEO Object

Basket Object

​Basic Category Information

​Available Properties

​Core Category Properties

​Product Listings

​Complete Category Template Example

​Usage Notes

​Best Practices

Content Organization

SEO Optimization

HTML Content

Accessibility

​Next Steps

Product Object

Navigation Object

SEO Object

Basket Object

Basic Category Information

Available Properties

Core Category Properties

Product Listings

Complete Category Template Example

Usage Notes

Best Practices

Next Steps