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:
User Authentication States
Product Pricing Display
<!-- 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 Availability Management
<!-- 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:
Smart Image Gallery
Advanced Product Grid
<!-- 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:
Dynamic Navigation
Responsive Form Elements
<!-- 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:
Store Feature Toggles
Settings-Based Content
<!-- 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 