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

# Product Object

> Display individual product information, images, variants, and purchase options

The `product` object contains all information about a single product. It's available on product pages and provides access to everything needed to display product details, handle variants, and enable purchasing.

<Info>
  **Usage**: Available on product pages - use to display product information, images, pricing, variants, and purchase forms
</Info>

## Basic Product Information

Access the core product details that every product page needs:

<CodeGroup>
  ```mustache Basic Product Display theme={null}
  <div class="product-page">
      <h1 class="product-title">{{product.title}}</h1>
      
      <div class="product-meta">
          <p class="product-sku">{{#lang}}SKU{{/lang}}: {{product.sku}}</p>
          {{#product.gtin}}<p class="product-gtin">{{#lang}}EAN{{/lang}}: {{product.gtin}}</p>{{/product.gtin}}
          {{#product.supplier_name}}<p class="product-supplier">{{#lang}}Supplier{{/lang}}: {{product.supplier_name}}</p>{{/product.supplier_name}}
      </div>
      
      <div class="product-price">
          {{#product.has_before_price}}
              <span class="before-price">{{product.before_price}}</span>
          {{/product.has_before_price}}
          <span class="current-price">{{product.price}} {{product.currency}}</span>
      </div>
      
      <div class="product-description">
          {{&product.description}}
      </div>
  </div>
  ```

  ```mustache Product Status theme={null}
  <div class="product-availability">
      {{#product.soldOut}}
          <span class="status sold-out">
              <i class="icon-x-circle"></i>
              {{#lang}}Out of stock{{/lang}}
          </span>
      {{/product.soldOut}}
      
      {{^product.soldOut}}
          <span class="status in-stock">
              <i class="icon-check-circle"></i>
              {{#lang}}In stock{{/lang}}
          </span>
      {{/product.soldOut}}
  </div>
  ```
</CodeGroup>

## Available Properties

### Core Properties

| Property                | Type   | Description                     |
| ----------------------- | ------ | ------------------------------- |
| `product.id`            | String | Product ID                      |
| `product.sku`           | String | Product article number          |
| `product.title`         | String | Product title                   |
| `product.description`   | String | Product description             |
| `product.gtin`          | String | Product EAN code                |
| `product.supplier_name` | String | Product supplier                |
| `product.supplier_sku`  | String | Product supplier article number |

### Pricing Properties

| Property                   | Type    | Description                             |
| -------------------------- | ------- | --------------------------------------- |
| `product.price`            | String  | Product price (formatted)               |
| `product.price_raw`        | String  | Product price without formatting        |
| `product.before_price`     | String  | Product comparison price                |
| `product.has_before_price` | Boolean | Check if product has a comparison price |
| `product.currency`         | String  | Currency                                |

### Stock Properties

| Property          | Type    | Description                      |
| ----------------- | ------- | -------------------------------- |
| `product.soldOut` | Boolean | Check if product is out of stock |

### Custom Data Fields

| Property              | Type   | Description                                                            |
| --------------------- | ------ | ---------------------------------------------------------------------- |
| `product.datafield_1` | String | Custom product information from data field 1                           |
| `product.datafield_2` | String | Custom product information from data field 2                           |
| `product.datafield_x` | String | Custom product information from data field X (replace X with field ID) |

## Product Images

Display product images with responsive optimization:

<CodeGroup>
  ```mustache Basic Image Gallery theme={null}
  <div class="product-gallery">
      {{#product.images}}
      <div class="gallery-item">
          <img src="{{#img}}{{image}}_800x800{{/img}}" 
               alt="{{alttext}}" 
               data-image-id="{{image_id}}"
               loading="lazy">
      </div>
      {{/product.images}}
      
      {{^product.images}}
      <div class="no-image-placeholder">
          <i class="icon-image"></i>
          <span>{{#lang}}No image available{{/lang}}</span>
      </div>
      {{/product.images}}
  </div>
  ```

  ```mustache Advanced Image Gallery theme={null}
  <div class="product-image-gallery">
      <!-- Main image display -->
      <div class="main-image">
          {{#product.firstimage}}
              <img src="{{#img}}{{product.firstimage}}_1000x1000{{/img}}" 
                   alt="{{product.title}}"
                   id="main-product-image">
          {{/product.firstimage}}
          
          {{^product.firstimage}}
              <div class="no-image">
                  <i class="icon-image"></i>
                  <span>{{#lang}}No image{{/lang}}</span>
              </div>
          {{/product.firstimage}}
      </div>
      
      <!-- Thumbnail navigation -->
      {{#product.images}}
      <div class="image-thumbnails">
          {{#product.images}}
          <button class="thumbnail" 
                  data-image="{{#img}}{{image}}_1000x1000{{/img}}"
                  aria-label="{{#lang}}View image{{/lang}} {{image_id}}">
              <img src="{{#img}}{{image}}_100x100{{/img}}" alt="{{alttext}}">
          </button>
          {{/product.images}}
      </div>
      {{/product.images}}
      
      <!-- Secondary image if available -->
      {{#product.secondimage}}
      <div class="secondary-image">
          <img src="{{#img}}{{product.secondimage}}_400x400{{/img}}" 
               alt="{{product.title}} - {{#lang}}Additional view{{/lang}}">
      </div>
      {{/product.secondimage}}
  </div>
  ```
</CodeGroup>

### Image Properties

When looping through `product.images`:

| Property   | Type   | Description    |
| ---------- | ------ | -------------- |
| `image`    | String | Image link     |
| `image_id` | String | Image ID       |
| `alttext`  | String | Image ALT text |

### Special Image Properties

| Property              | Type   | Description            |
| --------------------- | ------ | ---------------------- |
| `product.firstimage`  | String | Product's first image  |
| `product.secondimage` | String | Product's second image |

## Product Variants

Handle product variants (size, color, etc.) and their selection:

<CodeGroup>
  ```mustache Basic Variant Selection theme={null}
  {{#product.hasOptions}}
  <div class="product-variants">
      <h3>{{#lang}}Options{{/lang}}</h3>
      
      {{#product.options}}
      <div class="variant-group">
          <label class="variant-label">{{option_title}}</label>
          
          <select name="variant_{{option_title}}" class="variant-select">
              {{#option_values}}
              <option value="{{id}}">{{name}}</option>
              {{/option_values}}
          </select>
      </div>
      {{/product.options}}
  </div>
  {{/product.hasOptions}}
  ```

  ```mustache Advanced Variant Display theme={null}
  {{#product.hasOptions}}
  <div class="product-options">
      {{#product.options}}
      <div class="option-section">
          <h4 class="option-title">{{option_title}}</h4>
          
          <!-- Option buttons -->
          <div class="option-buttons">
              {{#option_values}}
              <label class="option-button">
                  <input type="radio" 
                         name="variant_{{option_title}}" 
                         value="{{id}}">
                  <span class="button-text">{{name}}</span>
              </label>
              {{/option_values}}
          </div>
      </div>
      {{/product.options}}
  </div>
  {{/product.hasOptions}}
  ```
</CodeGroup>

### Variant Properties

When using `product.options`:

| Property        | Type   | Description                                     |
| --------------- | ------ | ----------------------------------------------- |
| `option_title`  | String | Product option title                            |
| `option_values` | Array  | Object containing Product Option's all Variants |

When looping through `option_values`:

| Property | Type   | Description         |
| -------- | ------ | ------------------- |
| `id`     | String | Variant ID          |
| `name`   | String | Variant designation |

## Add to Cart Form

Create functional purchase forms with variant support:

<CodeGroup>
  ```mustache Basic Add to Cart theme={null}
  {{^product.soldOut}}
  <form action="/cart/add" method="post" class="add-to-cart-form">
      <input type="hidden" name="product_id" value="{{product.id}}">
      
      {{#product.hasOptions}}
          {{#product.options}}
          <input type="hidden" 
                 name="variant_{{option_title}}" 
                 class="variant-input"
                 data-option="{{option_title}}">
          {{/product.options}}
      {{/product.hasOptions}}
      
      <div class="quantity-section">
          <label for="quantity">{{#lang}}Quantity{{/lang}}</label>
          <div class="quantity-controls">
              <button type="button" class="qty-decrease" aria-label="{{#lang}}Decrease quantity{{/lang}}">-</button>
              <input type="number" 
                     name="quantity" 
                     id="quantity" 
                     value="1" 
                     min="1"
                     class="quantity-input">
              <button type="button" class="qty-increase" aria-label="{{#lang}}Increase quantity{{/lang}}">+</button>
          </div>
      </div>
      
      <button type="submit" class="add-to-cart-button">
          <i class="icon-shopping-cart"></i>
          <span>{{#lang}}Add to Cart{{/lang}}</span>
      </button>
  </form>
  {{/product.soldOut}}

  {{#product.soldOut}}
  <div class="sold-out-message">
      <button class="sold-out-button" disabled>
          <i class="icon-x-circle"></i>
          <span>{{#lang}}Out of Stock{{/lang}}</span>
      </button>
  </div>
  {{/product.soldOut}}
  ```
</CodeGroup>

## Related Products

Display related or recommended products using the related\_products object:

<CodeGroup>
  ```mustache Related Products theme={null}
  {{#has_related_products}}
  <section class="related-products">
      <h3>{{#lang}}Related Products{{/lang}}</h3>
      
      <div class="product-grid">
          {{#related_products}}
          <div class="related-product-item">
              <div class="product-link">
                  {{#rp.firstimage}}
                      <img src="{{#img}}{{rp.firstimage}}_300x300{{/img}}" 
                           alt="{{rp.title}}"
                           loading="lazy">
                  {{/rp.firstimage}}
                  
                  <div class="product-info">
                      <h4>{{rp.title}}</h4>
                      <p class="product-sku">{{rp.sku}}</p>
                      
                      {{#rp.supplier_name}}
                          <p class="supplier">{{rp.supplier_name}}</p>
                      {{/rp.supplier_name}}
                      
                      <div class="price">
                          {{#rp.has_before_price}}
                              <span class="before-price">{{rp.before_price}}</span>
                          {{/rp.has_before_price}}
                          <span class="current-price">{{rp.price}}</span>
                      </div>
                      
                      {{#rp.soldOut}}
                          <span class="sold-out-badge">{{#lang}}Out of stock{{/lang}}</span>
                      {{/rp.soldOut}}
                      
                      {{#rp.hasOptions}}
                          <span class="has-variants">{{#lang}}Multiple options{{/lang}}</span>
                      {{/rp.hasOptions}}
                  </div>
              </div>
          </div>
          {{/related_products}}
      </div>
  </section>
  {{/has_related_products}}
  ```
</CodeGroup>

### Related Product Properties

When looping through `related_products`, access properties with `rp.` prefix:

| Property              | Type    | Description                           |
| --------------------- | ------- | ------------------------------------- |
| `rp.title`            | String  | Product title                         |
| `rp.id`               | String  | Product ID                            |
| `rp.sku`              | String  | Product article number                |
| `rp.price`            | String  | Product price                         |
| `rp.before_price`     | String  | Product comparison price              |
| `rp.has_before_price` | Boolean | Check if product has comparison price |
| `rp.description`      | String  | Product description                   |
| `rp.firstimage`       | String  | Product's first image                 |
| `rp.secondimage`      | String  | Product's second image                |
| `rp.soldOut`          | Boolean | Check if product is out of stock      |
| `rp.supplier_name`    | String  | Product supplier                      |
| `rp.supplier_sku`     | String  | Product supplier article number       |
| `rp.hasOptions`       | Boolean | Check if product has variants         |

## Complete Product Page Example

<CodeGroup>
  ```mustache Complete Product Page theme={null}
  <article class="product-page">
      <!-- Breadcrumbs -->
      <nav class="breadcrumbs">
          {{#breadcrumbs}}
              <a href="{{url}}">{{title}}</a>
              {{^last}} > {{/last}}
          {{/breadcrumbs}}
      </nav>
      
      <div class="product-container">
          <!-- Product Images -->
          <div class="product-images">
              <div class="main-image">
                  {{#product.firstimage}}
                      <img src="{{#img}}{{product.firstimage}}_800x800{{/img}}" 
                           alt="{{product.title}}"
                           id="main-image">
                  {{/product.firstimage}}
                  
                  {{^product.firstimage}}
                      <div class="no-image">
                          <i class="icon-image"></i>
                          <span>{{#lang}}No image{{/lang}}</span>
                      </div>
                  {{/product.firstimage}}
              </div>
              
              {{#product.images}}
              <div class="image-thumbnails">
                  {{#product.images}}
                  <button class="thumbnail" data-image="{{#img}}{{image}}_800x800{{/img}}">
                      <img src="{{#img}}{{image}}_100x100{{/img}}" alt="{{alttext}}">
                  </button>
                  {{/product.images}}
              </div>
              {{/product.images}}
              
              {{#product.secondimage}}
              <div class="secondary-image">
                  <img src="{{#img}}{{product.secondimage}}_400x400{{/img}}" 
                       alt="{{product.title}} - {{#lang}}Additional view{{/lang}}">
              </div>
              {{/product.secondimage}}
          </div>
          
          <!-- Product Information -->
          <div class="product-details">
              <header class="product-header">
                  <h1>{{product.title}}</h1>
                  <p class="sku">{{#lang}}SKU{{/lang}}: {{product.sku}}</p>
                  {{#product.gtin}}<p class="gtin">{{#lang}}EAN{{/lang}}: {{product.gtin}}</p>{{/product.gtin}}
                  {{#product.supplier_name}}<p class="supplier">{{#lang}}Supplier{{/lang}}: {{product.supplier_name}}</p>{{/product.supplier_name}}
              </header>
              
              <!-- Pricing -->
              <div class="product-pricing">
                  {{#product.has_before_price}}
                      <span class="original-price">{{product.before_price}}</span>
                      <span class="sale-badge">{{#lang}}Sale{{/lang}}</span>
                  {{/product.has_before_price}}
                  <span class="current-price">{{product.price}} {{product.currency}}</span>
              </div>
              
              <!-- Stock Status -->
              <div class="stock-status">
                  {{#product.soldOut}}
                      <span class="out-of-stock">{{#lang}}Out of stock{{/lang}}</span>
                  {{/product.soldOut}}
                  {{^product.soldOut}}
                      <span class="in-stock">{{#lang}}In stock{{/lang}}</span>
                  {{/product.soldOut}}
              </div>
              
              <!-- Product Variants -->
              {{#product.hasOptions}}
              <div class="product-options">
                  {{#product.options}}
                  <div class="option-group">
                      <label>{{option_title}}</label>
                      <select name="variant_{{option_title}}">
                          {{#option_values}}
                          <option value="{{id}}">{{name}}</option>
                          {{/option_values}}
                      </select>
                  </div>
                  {{/product.options}}
              </div>
              {{/product.hasOptions}}
              
              <!-- Add to Cart Form -->
              {{^product.soldOut}}
              <form action="/cart/add" method="post" class="purchase-form">
                  <input type="hidden" name="product_id" value="{{product.id}}">
                  
                  <div class="quantity-selector">
                      <label for="quantity">{{#lang}}Quantity{{/lang}}</label>
                      <input type="number" name="quantity" id="quantity" value="1" min="1">
                  </div>
                  
                  <button type="submit" class="add-to-cart">
                      {{#lang}}Add to Cart{{/lang}}
                  </button>
              </form>
              {{/product.soldOut}}
              
              <!-- Product Description -->
              <div class="product-description">
                  <h3>{{#lang}}Description{{/lang}}</h3>
                  <div class="description-content">
                      {{&product.description}}
                  </div>
              </div>
              
              <!-- Custom Data Fields -->
              {{#product.datafield_1}}
              <div class="custom-field">
                  <h4>{{#lang}}Additional Information{{/lang}}</h4>
                  <p>{{product.datafield_1}}</p>
              </div>
              {{/product.datafield_1}}
              
              <!-- Supplier Information -->
              {{#product.supplier_name}}
              <div class="supplier-info">
                  <h4>{{#lang}}Supplier Information{{/lang}}</h4>
                  <p><strong>{{#lang}}Supplier{{/lang}}:</strong> {{product.supplier_name}}</p>
                  {{#product.supplier_sku}}
                      <p><strong>{{#lang}}Supplier SKU{{/lang}}:</strong> {{product.supplier_sku}}</p>
                  {{/product.supplier_sku}}
              </div>
              {{/product.supplier_name}}
          </div>
      </div>
      
      <!-- Related Products -->
      {{#has_related_products}}
      <section class="related-products">
          <h3>{{#lang}}You might also like{{/lang}}</h3>
          <div class="related-grid">
              {{#related_products}}
              <div class="related-item">
                  {{#rp.firstimage}}
                      <img src="{{#img}}{{rp.firstimage}}_250x250{{/img}}" alt="{{rp.title}}">
                  {{/rp.firstimage}}
                  <h4>{{rp.title}}</h4>
                  <span class="price">{{rp.price}}</span>
                  {{#rp.soldOut}}
                      <span class="sold-out">{{#lang}}Out of stock{{/lang}}</span>
                  {{/rp.soldOut}}
              </div>
              {{/related_products}}
          </div>
      </section>
      {{/has_related_products}}
  </article>
  ```
</CodeGroup>

## Best Practices

<CardGroup cols={2}>
  <Card title="Image Optimization" icon="image">
    Always use the `{{#img}}` wrapper with appropriate sizes for responsive images
  </Card>

  <Card title="Accessibility" icon="universal-access">
    Include proper alt text, labels, and ARIA attributes for screen readers
  </Card>

  <Card title="Variant Handling" icon="toggle-on">
    Use JavaScript to update pricing and availability when variants change
  </Card>

  <Card title="SEO Optimization" icon="search">
    Include structured data for products to enhance search results
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Category Object" icon="folder" href="/theme-development/pages/category">
    Learn about displaying product listings and category pages
  </Card>

  <Card title="Basket Object" icon="shopping-cart" href="/theme-development/global/basket">
    Understand cart functionality and integration
  </Card>

  <Card title="Order Object" icon="receipt" href="/theme-development/pages/order">
    Display order confirmation and thank you pages
  </Card>

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