Product Object

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>

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

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:

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

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

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:

{{#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}}

{{#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}}

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:

{{^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:

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

<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

Getting Started

Template Language

Global Objects

Page Objects

Basic Product Information

Available Properties

Core Properties

Pricing Properties

Stock Properties

Custom Data Fields

Product Images

Image Properties

Special Image Properties

Product Variants

Variant Properties

Add to Cart Form

Complete Product Page Example

Best Practices

Image Optimization

Accessibility

Variant Handling

SEO Optimization

Next Steps

Category Object

Basket Object

Order Object

SEO Object

​Basic Product Information

​Available Properties

​Core Properties

​Pricing Properties

​Stock Properties

​Custom Data Fields

​Product Images

​Image Properties

​Special Image Properties

​Product Variants

​Variant Properties

​Add to Cart Form

​Related Products

​Related Product Properties

​Complete Product Page Example

​Best Practices

Image Optimization

Accessibility

Variant Handling

SEO Optimization

​Next Steps

Category Object

Basket Object

Order Object

SEO Object

Basic Product Information

Available Properties

Core Properties

Pricing Properties

Stock Properties

Custom Data Fields

Product Images

Image Properties

Special Image Properties

Product Variants

Variant Properties

Add to Cart Form

Related Products

Related Product Properties

Complete Product Page Example

Best Practices

Next Steps