Conditionals

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

<!-- Product pricing with sale conditions -->
{{#product.has_before_price}}
    <div class="price-container sale">
        <div class="price-display">
            <span class="original-price">{{product.before_price}}</span>
            <span class="sale-price">{{product.price}}</span>
            <span class="discount-badge">{{#lang}}Sale{{/lang}}</span>
        </div>
    </div>
{{/product.has_before_price}}

{{^product.has_before_price}}
    <div class="price-container regular">
        <div class="price-display">
            <span class="current-price">{{product.price}}</span>
        </div>
    </div>
{{/product.has_before_price}}

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

<!-- Complex product listing with conditional features -->
{{#products}}
    <div class="product-card {{#has_before_price}}sale{{/has_before_price}} {{#soldOut}}unavailable{{/soldOut}}">
        <div class="product-badges">
            {{#has_before_price}}
                <span class="badge sale">{{#lang}}Sale{{/lang}}</span>
            {{/has_before_price}}
        </div>
        
        <div class="product-image">
            {{#firstimage}}
                <img src="{{#img}}{{firstimage}}_300x300{{/img}}" alt="{{title}}">
            {{/firstimage}}
            {{^firstimage}}
                <img src="{{#assets}}images/no-image.png{{/assets}}" alt="{{#lang}}No image available{{/lang}}">
            {{/firstimage}}
        </div>
        
        <div class="product-info">
            <h3>{{title}}</h3>
            
            <div class="price-section">
                {{#has_before_price}}
                    <span class="old-price">{{before_price}}</span>
                    <span class="sale-price">{{price}}</span>
                {{/has_before_price}}
                
                {{^has_before_price}}
                    <span class="price">{{price}}</span>
                {{/has_before_price}}
            </div>
            
            <div class="product-actions">
                {{^soldOut}}
                    <a href="{{url}}" class="view-product">{{#lang}}View Product{{/lang}}</a>
                {{/soldOut}}
                
                {{#soldOut}}
                    <button class="out-of-stock" disabled>{{#lang}}Out of Stock{{/lang}}</button>
                {{/soldOut}}
            </div>
        </div>
    </div>
{{/products}}

{{^products}}
    <div class="no-products">
        <div class="empty-category">
            <h3>{{#lang}}No products in this category yet{{/lang}}</h3>
            <p>{{#lang}}Check back soon for new arrivals{{/lang}}</p>
            <a href="{{shop.url}}" class="btn">{{#lang}}Browse All Products{{/lang}}</a>
        </div>
    </div>
{{/products}}

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

<!-- Forms with conditional validation and styling -->
<form class="contact-form {{#user.logged_in}}authenticated{{/user.logged_in}}">
    {{#response_data}}
        {{#success}}
            <div class="form-success">
                {{&success_message}}
            </div>
        {{/success}}
        
        {{#errors}}
            <div class="form-errors">
                {{#error_message}}
                    <p class="error-text">{{.}}</p>
                {{/error_message}}
            </div>
        {{/errors}}
    {{/response_data}}
    
    <div class="form-group">
        <label for="name">{{#lang}}Name{{/lang}} *</label>
        <input type="text" 
               id="name" 
               name="name"
               placeholder="{{#lang}}Enter your name{{/lang}}"
               required>
    </div>
    
    <div class="form-group">
        <label for="email">{{#lang}}Email{{/lang}} *</label>
        <input type="email" 
               id="email" 
               name="email"
               placeholder="{{#lang}}Enter your email{{/lang}}"
               required>
    </div>
    
    <div class="form-group">
        <label for="message">{{#lang}}Message{{/lang}}</label>
        <textarea id="message" 
                  name="message"
                  placeholder="{{#lang}}Write your message here{{/lang}}"></textarea>
    </div>
    
    <button type="submit">{{#lang}}Send Message{{/lang}}</button>
</form>

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

<!-- Conditional content based on settings -->
{{#settings.home_elements}}
    {{#is_slider}}
        <div class="home-slider">
            {{#element}}
                {{#title}}
                    <h2 class="slider-title">{{title}}</h2>
                {{/title}}
                
                {{#image1_link}}
                    <div class="slider-image">
                        <img src="{{#img}}{{image1_link}}_1200x600{{/img}}" alt="{{title}}">
                    </div>
                {{/image1_link}}
                
                {{#page.content}}
                    <div class="slider-content">
                        {{&page.content}}
                    </div>
                {{/page.content}}
            {{/element}}
        </div>
    {{/is_slider}}
    
    {{#is_title}}
        <div class="home-title-section">
            {{#element}}
                {{#title}}
                    <h1 class="main-title">{{title}}</h1>
                {{/title}}
                
                {{#page.content}}
                    <div class="title-content">
                        {{&page.content}}
                    </div>
                {{/page.content}}
            {{/element}}
        </div>
    {{/is_title}}
{{/settings.home_elements}}

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

Getting Started

Template Language

Global Objects

Page Objects

Advanced Conditional Logic

Complex If-Else Patterns

Deeply Nested Conditionals

Working with Arrays and Collections

Advanced Array Conditionals

Conditional Classes and Attributes

Theme and Settings Conditionals

Error Handling and Edge Cases

Blog and Content Conditionals

Order and Thank You Page Conditionals

Best Practices for Complex Conditionals

Provide Fallbacks

Test Edge Cases

Keep Logic Readable

Debugging Complex Conditionals

Next Steps

Wrappers and Functions

Objects and Attributes

Global Objects

Advanced Patterns

​Advanced Conditional Logic

​Complex If-Else Patterns

​Deeply Nested Conditionals

​Working with Arrays and Collections

​Advanced Array Conditionals

​Conditional Classes and Attributes

​Theme and Settings Conditionals

​Error Handling and Edge Cases

​Blog and Content Conditionals

​Order and Thank You Page Conditionals

​Best Practices for Complex Conditionals

Provide Fallbacks

Test Edge Cases

Keep Logic Readable

​Debugging Complex Conditionals

​Next Steps

Wrappers and Functions

Objects and Attributes

Global Objects

Advanced Patterns

Advanced Conditional Logic

Complex If-Else Patterns

Deeply Nested Conditionals

Working with Arrays and Collections

Advanced Array Conditionals

Conditional Classes and Attributes

Theme and Settings Conditionals

Error Handling and Edge Cases

Blog and Content Conditionals

Order and Thank You Page Conditionals

Best Practices for Complex Conditionals

Debugging Complex Conditionals

Next Steps