Conditionals in Mustache allow you to display content based on whether certain conditions are met. This guide covers advanced conditional patterns and techniques for building dynamic, responsive themes using only supported Quickbutik properties.
Prerequisites: This guide assumes you understand basic Mustache syntax. Review Mustache Basics first if you’re new to Mustache conditionals.

​
Advanced Conditional Logic

​
Complex If-Else Patterns

Combine positive and negative conditionals for sophisticated logic: 
<!-- Handle user login states -->
{{#shop.login_active}}
    {{#user.logged_in}}
        <div class="user-menu authenticated">
            <span>{{#lang}}Welcome back{{/lang}}</span>
            <a href="{{user.login_url}}" class="account-link">
                {{#lang}}My Account{{/lang}}
            </a>
        </div>
    {{/user.logged_in}}
    
    {{^user.logged_in}}
        <div class="user-menu guest">
            <a href="{{user.login_url}}" class="btn btn-primary">
                {{#lang}}Login{{/lang}}
            </a>
            <div class="auth-benefits">
                <p>{{#lang}}Join for exclusive deals and faster checkout{{/lang}}</p>
            </div>
        </div>
    {{/user.logged_in}}
{{/shop.login_active}}

{{^shop.login_active}}
    <div class="no-accounts">
        <p>{{#lang}}Guest checkout available{{/lang}}</p>
    </div>
{{/shop.login_active}}

​
Deeply Nested Conditionals

Handle complex business logic with multiple levels of conditions: 
<!-- Product stock and availability logic -->
{{#product.soldOut}}
    <div class="stock-info unavailable">
        <div class="out-of-stock">
            {{#shop.soldout_text}}
                <p>{{shop.soldout_text}}</p>
            {{/shop.soldout_text}}
            {{^shop.soldout_text}}
                <p>{{#lang}}Currently unavailable{{/lang}}</p>
            {{/shop.soldout_text}}
        </div>
    </div>
{{/product.soldOut}}

{{^product.soldOut}}
    <div class="stock-info available">
        <div class="stock-good">
            <i class="icon-check"></i>
            <span>{{#lang}}Available{{/lang}}</span>
            <button class="add-to-cart">{{#lang}}Add to Cart{{/lang}}</button>
        </div>
    </div>
{{/product.soldOut}}

​
Working with Arrays and Collections

​
Advanced Array Conditionals

Handle complex array states and conditions: 
<!-- Handle different image gallery states -->
{{#product.images}}
    <div class="product-gallery">
        {{#product.images}}
            <div class="image-item">
                <img src="{{#img}}{{image}}_400x400{{/img}}" alt="{{alttext}}">
            </div>
        {{/product.images}}
    </div>
{{/product.images}}

{{^product.images}}
    <div class="no-images">
        {{#product.firstimage}}
            <img src="{{#img}}{{product.firstimage}}_400x400{{/img}}" alt="{{product.title}}" class="main-image">
        {{/product.firstimage}}
        
        {{^product.firstimage}}
            <div class="placeholder-container">
                <img src="{{#assets}}images/placeholder.jpg{{/assets}}" alt="{{#lang}}No image available{{/lang}}">
            </div>
        {{/product.firstimage}}
    </div>
{{/product.images}}

​
Conditional Classes and Attributes

Use conditionals to dynamically apply CSS classes and HTML attributes: 
<!-- Navigation with supported properties -->
{{#linklist.main}}
    <div class="nav-item {{#current}}active{{/current}} {{#hasChildren}}has-dropdown{{/hasChildren}}">
        <a href="{{url}}" class="nav-link">
            {{name}}
            {{#hasChildren}}
                <i class="icon-chevron"></i>
            {{/hasChildren}}
        </a>
        
        {{#hasChildren}}
            <div class="dropdown-menu">
                {{#children}}
                    <a href="{{url}}" class="dropdown-link {{#current}}active{{/current}}">
                        {{name}}
                    </a>
                {{/children}}
            </div>
        {{/hasChildren}}
    </div>
{{/linklist.main}}

​
Theme and Settings Conditionals

Advanced conditional logic based on theme settings and store configuration: 
<!-- Conditional features based on store settings -->
{{#shop.login_active}}
    <div class="account-section">
        {{#user.logged_in}}
            <div class="logged-in-user">
                <a href="{{user.login_url}}" class="account-btn">
                    {{#lang}}My Account{{/lang}}
                </a>
            </div>
        {{/user.logged_in}}
        
        {{^user.logged_in}}
            <div class="guest-user">
                <a href="{{user.login_url}}" class="login-btn">
                    {{#lang}}Sign In{{/lang}}
                </a>
            </div>
        {{/user.logged_in}}
    </div>
{{/shop.login_active}}

{{#shop.cconverter_active}}
    <div class="currency-selector">
        {{#shop.cconverter_currencies}}
            <button class="currency-option {{#current}}active{{/current}}" 
                    data-currency="{{currency}}">
                {{currency}}
            </button>
        {{/shop.cconverter_currencies}}
    </div>
{{/shop.cconverter_active}}

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

​
Error Handling and Edge Cases

Handle various error states and edge cases with conditionals: 
<!-- Contact form response handling -->
{{#response_data}}
    {{#success}}
        <div class="success-message">
            <i class="icon-check-circle"></i>
            {{&success_message}}
        </div>
    {{/success}}
    
    {{#errors}}
        <div class="error-messages">
            <i class="icon-alert-circle"></i>
            {{#error_message}}
                <p class="error-text">{{.}}</p>
            {{/error_message}}
        </div>
    {{/errors}}
{{/response_data}}

<!-- Basket state handling -->
{{#basket.isEmpty}}
    <div class="empty-cart">
        <i class="icon-shopping-cart"></i>
        <p>{{#lang}}Your cart is empty{{/lang}}</p>
        <a href="{{shop.url}}" class="continue-shopping">
            {{#lang}}Start Shopping{{/lang}}
        </a>
    </div>
{{/basket.isEmpty}}

{{^basket.isEmpty}}
    <div class="cart-contents">
        <p>{{basket.items_count}} {{#lang}}items in cart{{/lang}}</p>
        <p>{{#lang}}Total{{/lang}}: {{basket.total_amount}}</p>
        <a href="{{paylink}}" class="checkout-btn">
            {{#lang}}Checkout{{/lang}}
        </a>
    </div>
{{/basket.isEmpty}}

​
Blog and Content Conditionals

Handle blog and content page states: 
<!-- Blog page conditionals -->
{{#is_list}}
    <div class="blog-list">
        <h1>{{blog.title_current}}</h1>
        
        {{#blog.filter_tags}}
            <div class="tag-filters">
                {{#available_tags}}
                    <a href="{{url}}" class="tag-link">{{title}}</a>
                {{/available_tags}}
            </div>
        {{/blog.filter_tags}}
        
        {{#posts}}
            <article class="blog-post-preview">
                {{#hasImage}}
                    <div class="post-image">
                        <img src="{{#img}}{{image}}_400x300{{/img}}" alt="{{title}}">
                    </div>
                {{/hasImage}}
                
                <div class="post-content">
                    <h2><a href="{{url}}">{{title}}</a></h2>
                    <div class="post-meta">
                        <span>{{author}}</span>
                        <span>{{date_pretty}}</span>
                    </div>
                    <div class="post-excerpt">
                        {{&content_short}}
                    </div>
                </div>
            </article>
        {{/posts}}
    </div>
{{/is_list}}

{{#is_post}}
    <article class="blog-post-single">
        <header class="post-header">
            <h1>{{post.title}}</h1>
            <div class="post-meta">
                <span>{{post.author}}</span>
                <span>{{post.date_pretty}}</span>
            </div>
        </header>
        
        {{#post.hasImage}}
            <div class="post-featured-image">
                <img src="{{#img}}{{post.image}}_800x400{{/img}}" alt="{{post.title}}">
            </div>
        {{/post.hasImage}}
        
        <div class="post-content">
            {{&post.content}}
        </div>
    </article>
{{/is_post}}

​
Order and Thank You Page Conditionals

<!-- Order page conditionals -->
{{#order}}
    <div class="order-confirmation">
        <h1>{{#lang}}Thank you for your order{{/lang}}</h1>
        <p>{{#lang}}Order number{{/lang}}: {{order.id}}</p>
        
        <div class="order-summary">
            <h3>{{#lang}}Order Summary{{/lang}}</h3>
            <div class="order-totals">
                <div class="total-line">
                    <span>{{#lang}}Subtotal{{/lang}}</span>
                    <span>{{order.value_excl_tax}}</span>
                </div>
                
                {{#order.tax_amount}}
                    <div class="total-line">
                        <span>{{#lang}}Tax{{/lang}}</span>
                        <span>{{order.tax_amount}}</span>
                    </div>
                {{/order.tax_amount}}
                
                {{#order.shipping_amount}}
                    <div class="total-line">
                        <span>{{#lang}}Shipping{{/lang}}</span>
                        <span>{{order.shipping_amount}}</span>
                    </div>
                {{/order.shipping_amount}}
                
                <div class="total-line total">
                    <span>{{#lang}}Total{{/lang}}</span>
                    <span>{{order.value}}</span>
                </div>
            </div>
        </div>
        
        <div class="order-items">
            {{#order.items}}
                <div class="order-item">
                    <h4>{{title}}</h4>
                    {{#variant}}
                        <p class="variant">{{variant}}</p>
                    {{/variant}}
                    <p>{{#lang}}Quantity{{/lang}}: {{qty}}</p>
                    <p>{{#lang}}Price{{/lang}}: {{price}}</p>
                </div>
            {{/order.items}}
        </div>
    </div>
{{/order}}

​
Best Practices for Complex Conditionals

Provide Fallbacks

Always consider what happens when conditions are false and provide appropriate content

Test Edge Cases

Test your conditionals with different data states, including empty and error conditions

Keep Logic Readable

Use clear indentation and comments to make complex conditionals easy to follow

​
Debugging Complex Conditionals

<!-- Debug what conditions are being evaluated -->
<div class="debug-conditionals" style="display: none;">
    <h4>Conditional Debug Info:</h4>
    <ul>
        <li>User logged in: {{#user.logged_in}}Yes{{/user.logged_in}}{{^user.logged_in}}No{{/user.logged_in}}</li>
        <li>Product sold out: {{#product.soldOut}}Yes{{/product.soldOut}}{{^product.soldOut}}No{{/product.soldOut}}</li>
        <li>Has before price: {{#product.has_before_price}}Yes{{/product.has_before_price}}{{^product.has_before_price}}No{{/product.has_before_price}}</li>
        <li>Has images: {{#product.images}}Yes{{/product.images}}{{^product.images}}No{{/product.images}}</li>
        <li>Basket empty: {{#basket.isEmpty}}Yes{{/basket.isEmpty}}{{^basket.isEmpty}}No{{/basket.isEmpty}}</li>
    </ul>
</div>

​
Next Steps

Wrappers and Functions

Learn how to combine conditionals with helper functions

Objects and Attributes

Understanding what properties are available for conditional logic

Global Objects

Explore conditional properties in store and user objects

Advanced Patterns

Discover advanced templating techniques and patterns