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>

Available Properties

Core Category Properties

PropertyTypeDescription
category.nameStringCategory name
category.description1StringCategory description field 1
category.description2StringCategory 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