> ## Documentation Index
> Fetch the complete documentation index at: https://quickbutik.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Conditionals

> Master advanced conditional logic, boolean operations, and dynamic content display in Mustache templates

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.

<Info>
  **Prerequisites**: This guide assumes you understand basic Mustache syntax. Review [Mustache Basics](/theme-development/mustache-basics) first if you're new to Mustache conditionals.
</Info>

## Advanced Conditional Logic

### Complex If-Else Patterns

Combine positive and negative conditionals for sophisticated logic:

<CodeGroup>
  ```mustache User Authentication States theme={null}
  <!-- 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}}
  ```

  ```mustache Product Pricing Display theme={null}
  <!-- 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}}
  ```
</CodeGroup>

### Deeply Nested Conditionals

Handle complex business logic with multiple levels of conditions:

<CodeGroup>
  ```mustache Product Availability Management theme={null}
  <!-- 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}}
  ```
</CodeGroup>

## Working with Arrays and Collections

### Advanced Array Conditionals

Handle complex array states and conditions:

<CodeGroup>
  ```mustache Smart Image Gallery theme={null}
  <!-- 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}}
  ```

  ```mustache Advanced Product Grid theme={null}
  <!-- 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}}
  ```
</CodeGroup>

## Conditional Classes and Attributes

Use conditionals to dynamically apply CSS classes and HTML attributes:

<CodeGroup>
  ```mustache Dynamic Navigation theme={null}
  <!-- 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}}
  ```

  ```mustache Responsive Form Elements theme={null}
  <!-- 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>
  ```
</CodeGroup>

## Theme and Settings Conditionals

Advanced conditional logic based on theme settings and store configuration:

<CodeGroup>
  ```mustache Store Feature Toggles theme={null}
  <!-- 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}}
  ```

  ```mustache Settings-Based Content theme={null}
  <!-- 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}}
  ```
</CodeGroup>

## Error Handling and Edge Cases

Handle various error states and edge cases with conditionals:

<CodeGroup>
  ```mustache Robust Error Handling theme={null}
  <!-- 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}}
  ```
</CodeGroup>

## Blog and Content Conditionals

Handle blog and content page states:

<CodeGroup>
  ```mustache Blog Content Logic theme={null}
  <!-- 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}}
  ```
</CodeGroup>

## Order and Thank You Page Conditionals

<CodeGroup>
  ```mustache Order Confirmation Logic theme={null}
  <!-- 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}}
  ```
</CodeGroup>

## Best Practices for Complex Conditionals

<CardGroup cols={2}>
  <Card title="Provide Fallbacks" icon="shield">
    Always consider what happens when conditions are false and provide appropriate content
  </Card>

  <Card title="Test Edge Cases" icon="bug">
    Test your conditionals with different data states, including empty and error conditions
  </Card>

  <Card title="Keep Logic Readable" icon="eye">
    Use clear indentation and comments to make complex conditionals easy to follow
  </Card>
</CardGroup>

## Debugging Complex Conditionals

<CodeGroup>
  ```mustache Debug Conditional Logic theme={null}
  <!-- 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>
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Wrappers and Functions" icon="function" href="/theme-development/wrappers-and-functions">
    Learn how to combine conditionals with helper functions
  </Card>

  <Card title="Objects and Attributes" icon="database" href="/theme-development/objects-and-attributes">
    Understanding what properties are available for conditional logic
  </Card>

  <Card title="Global Objects" icon="globe" href="/theme-development/global/shop">
    Explore conditional properties in store and user objects
  </Card>

  <Card title="Advanced Patterns" icon="rocket" href="/theme-development/advanced/dynamic-elements">
    Discover advanced templating techniques and patterns
  </Card>
</CardGroup>