Objects and attributes form the foundation of Mustache templating in Quickbutik. Understanding how to access and manipulate object properties is essential for building dynamic, data-driven themes using only supported Quickbutik properties.
What are Objects? Objects in Mustache are data structures that contain information about your store, products, users, and other entities. Each object has attributes (properties) that hold specific values.
Basic Object Access
Nested Object Access
<!-- Accessing shop object attributes --> <h1>{{shop.name}}</h1> <p>{{shop.contact_text}}</p> <!-- Accessing product object attributes --> <h2>{{product.title}}</h2> <p>Price: {{product.price}}</p>
Available Object Types Quickbutik provides several types of objects you can work with:
Global Objects Available on all pages throughout your theme:
Object Description Availability shopStore information and settings All pages userCurrent user/customer data All pages basketShopping cart contents All pages linklistMenu and navigation data All pages settingsTheme customization options All pages seoSEO meta information All pages
Page-Specific Objects Available only on specific page types:
Object Description Available On productIndividual product data Product pages categoryCategory and product listings Category pages orderOrder confirmation details Order/Thank you pages blogBlog post and article data Blog pages pageStatic page content Static pages
Object Property Access Dot Notation for Nested Properties Use dot notation to access nested properties:
<!-- Simple properties --> {{shop.name}} {{product.title}} {{user.login_url}} <!-- Nested properties --> {{order.customer.email}} {{order.customer.firstname}} {{order.customer.ship_address}} <!-- Settings properties --> {{settings.home_elements}} Array Index Access Access specific array items by their index position:
<!-- Access first item (index 0) --> {{product.images.0.image}} {{linklist.main.0.name}} <!-- Access second item (index 1) --> {{product.images.1.image}} {{shop.cconverter_currencies.1.currency}} <!-- Access nested array items --> {{linklist.main.0.children.0.name}} Working with Different Property Types Understanding the different types of data that object properties can contain:
String Properties <!-- Simple text values --> <h1>{{product.title}}</h1> <p>{{product.description}}</p> <span class="sku">{{product.sku}}</span> <p>{{shop.contact_text}}</p> Number Properties <!-- Numeric values --> <p>Price: {{product.price}}</p> <p>Items: {{basket.items_count}}</p> <p>Order ID: {{order.id}}</p> <p>Quantity: {{qty}}</p> Boolean Properties <!-- Boolean properties for conditions --> {{#product.soldOut}} <span class="sold-out-badge">{{#lang}}Sold Out{{/lang}}</span> {{/product.soldOut}} {{#product.has_before_price}} <span class="sale-badge">{{#lang}}Sale{{/lang}}</span> {{/product.has_before_price}} {{#user.logged_in}} <p>{{#lang}}Welcome back{{/lang}}</p> {{/user.logged_in}} {{#basket.isEmpty}} <p>{{#lang}}Your cart is empty{{/lang}}</p> {{/basket.isEmpty}} Array Properties <!-- Arrays of objects --> {{#product.images}} <img src="{{#img}}{{image}}_400x400{{/img}}" alt="{{alttext}}"> {{/product.images}} <!-- Navigation arrays --> {{#linklist.main}} <a href="{{url}}" class="nav-link">{{name}}</a> {{/linklist.main}} <!-- Order items array --> {{#order.items}} <div class="order-item"> <h4>{{title}}</h4> <p>{{#lang}}Quantity{{/lang}}: {{qty}}</p> </div> {{/order.items}} Object Properties (Nested Objects) <!-- Customer address object --> <div class="address"> <p>{{order.customer.ship_address}}</p> <p>{{order.customer.ship_city}}, {{order.customer.ship_zipcode}}</p> <p>{{order.customer.ship_country}}</p> </div> <!-- Settings home elements --> {{#settings.home_elements}} {{#element}} <h2>{{title}}</h2> {{#image1_link}} <img src="{{#img}}{{image1_link}}_600x400{{/img}}" alt="{{title}}"> {{/image1_link}} {{/element}} {{/settings.home_elements}} Common Object Usage Patterns <header class="site-header"> <h1>{{shop.name}}</h1> <a href="{{shop.url}}">{{#lang}}Visit Store{{/lang}}</a> </header> <div class="contact-info"> {{#shop.address}} <p>{{shop.address}}</p> <p>{{shop.zipcode}} {{shop.city}}</p> {{/shop.address}} {{#shop.phone}} <p>{{#lang}}Phone{{/lang}}: {{shop.phone}}</p> {{/shop.phone}} {{#shop.contact_text}} <div class="contact-content"> {{&shop.contact_text}} </div> {{/shop.contact_text}} </div> Product Data Management <div class="product-details"> <h1>{{product.title}}</h1> <div class="product-price"> {{#product.has_before_price}} <span class="original-price">{{product.before_price}}</span> {{/product.has_before_price}} <span class="current-price">{{product.price}} {{product.currency}}</span> </div> <div class="product-meta"> <p>{{#lang}}SKU{{/lang}}: {{product.sku}}</p> {{#product.gtin}} <p>{{#lang}}EAN{{/lang}}: {{product.gtin}}</p> {{/product.gtin}} <div class="stock-status"> {{#product.soldOut}} <span class="out-of-stock"> {{#shop.soldout_text}} {{shop.soldout_text}} {{/shop.soldout_text}} {{^shop.soldout_text}} {{#lang}}Out of Stock{{/lang}} {{/shop.soldout_text}} </span> {{/product.soldOut}} {{^product.soldOut}} <span class="in-stock">{{#lang}}Available{{/lang}}</span> {{/product.soldOut}} </div> </div> {{#product.description}} <div class="product-description"> {{&product.description}} </div> {{/product.description}} </div> <!-- User authentication status --> {{#shop.login_active}} {{#user.logged_in}} <div class="user-info"> <p>{{#lang}}Welcome back{{/lang}}</p> <nav class="user-nav"> <a href="{{user.login_url}}">{{#lang}}My Account{{/lang}}</a> </nav> </div> {{/user.logged_in}} {{^user.logged_in}} <div class="auth-links"> <a href="{{user.login_url}}">{{#lang}}Login{{/lang}}</a> </div> {{/user.logged_in}} {{/shop.login_active}} Working with Context and Parent Access When iterating through arrays or working within sections, you may need to access parent object properties:
<!-- Access parent product while iterating variants --> {{#product.options}} <div class="product-option"> <h4>{{option_title}}</h4> {{#option_values}} <div class="variant"> <span>{{name}}</span> <!-- Access parent product title using ../ --> <p>{{#lang}}For{{/lang}}: {{../../title}}</p> </div> {{/option_values}} </div> {{/product.options}} <!-- Access global shop info within product loops --> {{#related_products}} <div class="product-card"> <h3>{{rp.title}}</h3> <p>{{rp.price}}</p> <!-- Access global shop currency --> <p>{{#lang}}Currency{{/lang}}: {{../shop.name}}</p> </div> {{/related_products}} Object Property Debugging When working with objects, you might need to debug what properties are available:
<!-- Check if property exists --> {{#product.description}} <div class="description">{{&product.description}}</div> {{/product.description}} {{^product.description}} <div class="no-description">{{#lang}}No description available{{/lang}}</div> {{/product.description}} <!-- Check for images --> {{#product.images}} <div class="has-images">{{#lang}}Images available{{/lang}}</div> {{/product.images}} {{^product.images}} <div class="no-images">{{#lang}}No images available{{/lang}}</div> {{/product.images}} Best Practices
Check Property Existence Always check if a property exists before using it to avoid template errors
Understand Object Hierarchy Learn the structure of objects to access nested properties efficiently
Handle Missing Data Gracefully Provide fallbacks for optional properties that might not always be present
Common Property Access Mistakes Property Access Errors : These common mistakes can break your templates:
Wrong property names : {{product.name}} instead of {{product.title}}Missing context : Forgetting ../ when accessing parent propertiesArray confusion : Using {{product.images}} instead of iterating with {{#product.images}}Case sensitivity : {{Product.title}} instead of {{product.title}} Advanced Object Patterns Conditional Property Display <!-- Show additional info only if it exists --> <div class="product-specifications"> {{#product.supplier_name}}<p><strong>{{#lang}}Supplier{{/lang}}:</strong> {{product.supplier_name}}</p>{{/product.supplier_name}} {{#product.supplier_sku}}<p><strong>{{#lang}}Supplier SKU{{/lang}}:</strong> {{product.supplier_sku}}</p>{{/product.supplier_sku}} {{#product.gtin}}<p><strong>{{#lang}}EAN{{/lang}}:</strong> {{product.gtin}}</p>{{/product.gtin}} </div> Object Property Chaining <!-- Chain through multiple levels --> {{settings.home_elements.element.title}} {{order.customer.ship_address}} {{product.options.option_values.name}} <!-- Safe chaining with existence checks --> {{#settings.home_elements}} {{#element}} {{#title}} <h2>{{title}}</h2> {{/title}} {{#page.content}} <div class="content"> {{&page.content}} </div> {{/page.content}} {{/element}} {{/settings.home_elements}} Supported Object Properties Reference Shop Object Properties <!-- Basic store info --> {{shop.name}} {{shop.url}} {{shop.address}} {{shop.zipcode}} {{shop.city}} {{shop.phone}} {{shop.contact_text}} {{shop.soldout_text}} <!-- Feature flags --> {{#shop.cconverter_active}}...{{/shop.cconverter_active}} {{#shop.app.languages}}...{{/shop.app.languages}} {{#shop.taxtoggle_active}}...{{/shop.taxtoggle_active}} {{#shop.login_active}}...{{/shop.login_active}} <!-- Currency converter --> {{#shop.cconverter_currencies}} {{currency}} {{#current}}...{{/current}} {{/shop.cconverter_currencies}} <!-- Languages --> {{#shop.languages}} {{id}} {{url}} {{#asset_flags}}{{id}}{{/asset_flags}} {{/shop.languages}} <!-- Tax toggle --> {{#shop.exclude_tax}}...{{/shop.exclude_tax}} {{shop.incl_tax_url}} {{shop.excl_tax_url}} Product Object Properties <!-- Basic product info --> {{product.title}} {{product.id}} {{product.sku}} {{product.gtin}} {{product.price}} {{product.price_raw}} {{product.before_price}} {{product.currency}} {{product.description}} <!-- Images --> {{product.firstimage}} {{product.secondimage}} {{#product.images}} {{image}} {{image_id}} {{alttext}} {{/product.images}} <!-- Supplier info --> {{product.supplier_name}} {{product.supplier_sku}} <!-- Status --> {{#product.soldOut}}...{{/product.soldOut}} {{#product.has_before_price}}...{{/product.has_before_price}} <!-- Variants --> {{#product.hasOptions}}...{{/product.hasOptions}} {{#product.options}} {{option_title}} {{#option_values}} {{id}} {{name}} {{/option_values}} {{/product.options}} <!-- Custom data fields --> {{product.datafield_1}} {{product.datafield_2}} <!-- etc. --> Next Steps 