Wrappers and functions in Quickbutik’s Mustache implementation provide essential tools for transforming and manipulating data. These helper functions extend Mustache’s capabilities for specific use cases like image optimization, translations, and asset linking.

Prerequisites: This guide covers the available wrapper functions. Make sure you understand basic Mustache syntax and object access patterns first.

Key Concept: Wrappers use the {{#function}}content{{/function}} syntax to process and transform data

​
Available Wrappers

According to the Quickbutik platform, only the following wrappers are supported:

WrapperPurposeUsage
{{#img}}Image manipulation and optimization{{#img}}{{product.firstimage}}_400x400{{/img}}
{{#lang}}Text translation via Control Panel{{#lang}}My text here{{/lang}}
{{#assets}}Link to correct path for specific file{{#assets}}css/style.css{{/assets}}
{{#breadcrumbs}}Output breadcrumbs/category structure{{#breadcrumbs}} {{url}} {{title}} {{^last}} {{/last}} {{/breadcrumbs}}
{{#asset_flags}}Return flag icon for language{{#asset_flags}}{{id}}{{/asset_flags}}

​
Image Wrapper ({{#img}})

The image wrapper is essential for handling product images and media optimization:

<!-- Resize image to specific dimensions -->
<img src="{{#img}}{{product.firstimage}}_400x400{{/img}}" alt="{{product.title}}">

<!-- Different sizes for different uses -->
<img src="{{#img}}{{product.firstimage}}_150x150{{/img}}" alt="{{product.title}}" class="thumbnail">
<img src="{{#img}}{{product.firstimage}}_800x600{{/img}}" alt="{{product.title}}" class="main-image">

​
Image Size Options

Size FormatDescriptionUse Case
_100x100Square thumbnailProduct grid thumbnails
_300x200Landscape cardProduct cards, lists
_400x400Medium squareProduct detail thumbnails
_800x600Large landscapeProduct detail main image
_1200x800Extra largeLightbox, zoom functionality

​
Settings Home Elements Images

{{#settings.home_elements}}
    {{#element}}
        {{#image1_link}}
            <div class="element-image">
                <img src="{{#img}}{{image1_link}}_800x400{{/img}}" alt="{{title}}">
            </div>
        {{/image1_link}}
        
        {{#use_image2}}
            {{#image2_link}}
                <div class="element-secondary-image">
                    <img src="{{#img}}{{image2_link}}_400x300{{/img}}" alt="{{title}}">
                </div>
            {{/image2_link}}
        {{/use_image2}}
    {{/element}}
{{/settings.home_elements}}

​
Language Wrapper ({{#lang}})

Handle multi-language content and translations via the Control Panel:

<!-- Simple text translation -->
<h1>{{#lang}}Welcome to our store{{/lang}}</h1>
<button>{{#lang}}Add to Cart{{/lang}}</button>
<p>{{#lang}}Free shipping on orders over $50{{/lang}}</p>

<!-- Translate navigation elements -->
<nav class="main-navigation">
    {{#linklist.main}}
        <a href="{{url}}" class="nav-link {{#current}}active{{/current}}">
            {{#lang}}{{name}}{{/lang}}
        </a>
    {{/linklist.main}}
</nav>

<!-- Translate common UI elements -->
<div class="user-actions">
    {{#shop.login_active}}
        {{#user.logged_in}}
            <a href="{{user.login_url}}">{{#lang}}My Account{{/lang}}</a>
        {{/user.logged_in}}
        
        {{^user.logged_in}}
            <a href="{{user.login_url}}">{{#lang}}Log In{{/lang}}</a>
        {{/user.logged_in}}
    {{/shop.login_active}}
</div>

​
Assets Wrapper ({{#assets}})

Link to correct paths for theme files like CSS, JavaScript, and other assets:

<!-- Link to theme CSS files -->
<link rel="stylesheet" href="{{#assets}}css/style.css{{/assets}}">
<link rel="stylesheet" href="{{#assets}}css/responsive.css{{/assets}}">

<!-- Link to theme JavaScript files -->
<script src="{{#assets}}js/main.js{{/assets}}"></script>
<script src="{{#assets}}js/cart.js{{/assets}}"></script>

Output breadcrumbs/category structure regardless of the current page:

<!-- Simple breadcrumb navigation -->
<nav class="breadcrumbs">
    {{#breadcrumbs}}
        <a href="{{url}}">{{title}}</a>
        {{^last}} > {{/last}}
    {{/breadcrumbs}}
</nav>

Within the {{#breadcrumbs}} loop:

PropertyTypeDescription
urlStringLink URL for the breadcrumb item
titleStringDisplay text for the breadcrumb item
lastBooleanTrue if this is the last (current) breadcrumb item

​
Asset Flags Wrapper ({{#asset_flags}})

Return flag icons for languages (used within the languages loop):

{{#shop.app.languages}}
<div class="language-selector">
    <h4>{{#lang}}Choose Language{{/lang}}</h4>
    {{#shop.languages}}
    <a href="{{url}}" class="language-option">
        <img src="{{#asset_flags}}{{id}}{{/asset_flags}}" 
             alt="{{id}}" 
             class="flag">
        {{id}}
    </a>
    {{/shop.languages}}
</div>
{{/shop.app.languages}}

​
Combining Wrappers

​
Complete Examples with Multiple Wrappers

<div class="product-card">
    <!-- Product image with optimization -->
    <div class="product-image">
        {{#product.firstimage}}
            <img src="{{#img}}{{product.firstimage}}_300x300{{/img}}" alt="{{product.title}}">
        {{/product.firstimage}}
        {{^product.firstimage}}
            <img src="{{#assets}}images/no-image.png{{/assets}}" alt="{{#lang}}No image available{{/lang}}">
        {{/product.firstimage}}
    </div>
    
    <!-- Product information with translations -->
    <div class="product-info">
        <h3>{{product.title}}</h3>
        <p class="price">{{product.price}}</p>
        
        {{#product.soldOut}}
            <span class="status out-of-stock">{{#lang}}Out of Stock{{/lang}}</span>
        {{/product.soldOut}}
        
        {{^product.soldOut}}
            <button class="add-to-cart">{{#lang}}Add to Cart{{/lang}}</button>
        {{/product.soldOut}}
    </div>
</div>

​
Best Practices

Image Optimization

Always use the {{#img}} wrapper with appropriate dimensions for optimal performance

Translation Consistency

Wrap all user-facing text with {{#lang}} for proper multi-language support

Asset Management

Use {{#assets}} for all theme files to ensure correct paths across environments

Breadcrumb Navigation

Implement breadcrumbs for better user navigation and SEO benefits

​
Common Patterns

​
Error Handling and Fallbacks

<!-- Product image with fallback -->
{{#product.firstimage}}
    <img src="{{#img}}{{product.firstimage}}_400x400{{/img}}" alt="{{product.title}}">
{{/product.firstimage}}
{{^product.firstimage}}
    <img src="{{#assets}}images/placeholder.jpg{{/assets}}" alt="{{#lang}}No image available{{/lang}}">
{{/product.firstimage}}

​
Next Steps

Global Objects

Learn how to use wrappers with global object data

Product Pages

Apply wrappers in product page templates

Template Structure

Understand how wrappers fit into overall theme architecture

Best Practices

Follow coding standards and optimization guidelines