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
Access the core product details that every product page needs:
Basic Product Display
Product Status
<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 Property Type Description product.idString Product ID product.skuString Product article number product.titleString Product title product.descriptionString Product description product.gtinString Product EAN code product.supplier_nameString Product supplier product.supplier_skuString Product supplier article number
Pricing Properties Property Type Description product.priceString Product price (formatted) product.price_rawString Product price without formatting product.before_priceString Product comparison price product.has_before_priceBoolean Check if product has a comparison price product.currencyString Currency
Stock Properties Property Type Description product.soldOutBoolean Check if product is out of stock
Custom Data Fields Property Type Description product.datafield_1String Custom product information from data field 1 product.datafield_2String Custom product information from data field 2 product.datafield_xString Custom product information from data field X (replace X with field ID)
Product Images Display product images with responsive optimization:
Basic Image Gallery
Advanced Image Gallery
<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:
Property Type Description imageString Image link image_idString Image ID alttextString Image ALT text
Special Image Properties Property Type Description product.firstimageString Product’s first image product.secondimageString Product’s second image
Product Variants Handle product variants (size, color, etc.) and their selection:
Basic Variant Selection
Advanced Variant Display
{{#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:
Property Type Description option_titleString Product option title option_valuesArray Object containing Product Option’s all Variants
When looping through option_values:
Property Type Description idString Variant ID nameString Variant designation
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.titleString Product title rp.idString Product ID rp.skuString Product article number rp.priceString Product price rp.before_priceString Product comparison price rp.has_before_priceBoolean Check if product has comparison price rp.descriptionString Product description rp.firstimageString Product’s first image rp.secondimageString Product’s second image rp.soldOutBoolean Check if product is out of stock rp.supplier_nameString Product supplier rp.supplier_skuString Product supplier article number rp.hasOptionsBoolean 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 