> ## Documentation Index
> Fetch the complete documentation index at: https://quickbutik.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Category Object

> Display category pages with basic category information

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.

<Info>
  **Usage**: Available on product list pages - use to display basic category information
</Info>

## Basic Category Information

Access the core category details that are available:

<CodeGroup>
  ```mustache Basic Category Display theme={null}
  <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>
  ```

  ```mustache Category with Breadcrumbs theme={null}
  <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>
  ```
</CodeGroup>

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

<CodeGroup>
  ```mustache Basic Product Display in Category Context theme={null}
  <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>
  ```
</CodeGroup>

## Complete Category Template Example

<CodeGroup>
  ```mustache Complete Category Template theme={null}
  <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>
  ```
</CodeGroup>

## Usage Notes

<Warning>
  **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.
</Warning>

## Best Practices

<CardGroup cols={2}>
  <Card title="Content Organization" icon="layout">
    Use description1 for main category content and description2 for additional information
  </Card>

  <Card title="SEO Optimization" icon="search">
    Use category names and descriptions effectively for search engine optimization
  </Card>

  <Card title="HTML Content" icon="code">
    Category descriptions support HTML content, use proper markup for structure
  </Card>

  <Card title="Accessibility" icon="universal-access">
    Use semantic HTML and proper heading hierarchy for category content
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Product Object" icon="box" href="/theme-development/pages/product">
    Learn about individual product page implementation
  </Card>

  <Card title="Navigation Object" icon="bars" href="/theme-development/global/navigation">
    Build category navigation and breadcrumbs
  </Card>

  <Card title="SEO Object" icon="search" href="/theme-development/global/seo">
    Optimize category pages for search engines
  </Card>

  <Card title="Basket Object" icon="shopping-cart" href="/theme-development/global/basket">
    Integrate shopping cart functionality
  </Card>
</CardGroup>