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.
Usage: Available on product pages - use to display product information, images, pricing, variants, and purchase forms

​
Basic Product Information

Access the core product details that every product page needs: 
<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>

​
Available Properties

​
Core Properties

PropertyTypeDescription
product.idStringProduct ID
product.skuStringProduct article number
product.titleStringProduct title
product.descriptionStringProduct description
product.gtinStringProduct EAN code
product.supplier_nameStringProduct supplier
product.supplier_skuStringProduct supplier article number

​
Pricing Properties

PropertyTypeDescription
product.priceStringProduct price (formatted)
product.price_rawStringProduct price without formatting
product.before_priceStringProduct comparison price
product.has_before_priceBooleanCheck if product has a comparison price
product.currencyStringCurrency

​
Stock Properties

PropertyTypeDescription
product.soldOutBooleanCheck if product is out of stock

​
Custom Data Fields

PropertyTypeDescription
product.datafield_1StringCustom product information from data field 1
product.datafield_2StringCustom product information from data field 2
product.datafield_xStringCustom product information from data field X (replace X with field ID)

​
Product Images

Display product images with responsive optimization: 
<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>

​
Image Properties

When looping through product.images:
PropertyTypeDescription
imageStringImage link
image_idStringImage ID
alttextStringImage ALT text

​
Special Image Properties

PropertyTypeDescription
product.firstimageStringProduct’s first image
product.secondimageStringProduct’s second image

​
Product Variants

Handle product variants (size, color, etc.) and their selection: 
{{#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}}

​
Variant Properties

When using product.options:
PropertyTypeDescription
option_titleStringProduct option title
option_valuesArrayObject containing Product Option’s all Variants
When looping through option_values:
PropertyTypeDescription
idStringVariant ID
nameStringVariant designation

​
Add to Cart Form

Create functional purchase forms with variant support: 
{{^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}}
Display related or recommended products using the related_products object: 
{{#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}}
When looping through related_products, access properties with rp. prefix:
PropertyTypeDescription
rp.titleStringProduct title
rp.idStringProduct ID
rp.skuStringProduct article number
rp.priceStringProduct price
rp.before_priceStringProduct comparison price
rp.has_before_priceBooleanCheck if product has comparison price
rp.descriptionStringProduct description
rp.firstimageStringProduct’s first image
rp.secondimageStringProduct’s second image
rp.soldOutBooleanCheck if product is out of stock
rp.supplier_nameStringProduct supplier
rp.supplier_skuStringProduct supplier article number
rp.hasOptionsBooleanCheck if product has variants

​
Complete Product Page Example

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

​
Best Practices

Image Optimization

Always use the {{#img}} wrapper with appropriate sizes for responsive images

Accessibility

Include proper alt text, labels, and ARIA attributes for screen readers

Variant Handling

Use JavaScript to update pricing and availability when variants change

SEO Optimization

Include structured data for products to enhance search results

​
Next Steps

Category Object

Learn about displaying product listings and category pages

Basket Object

Understand cart functionality and integration

Order Object

Display order confirmation and thank you pages

SEO Object

Optimize product pages for search engines