Control Flow

Control flow tags let you show or hide content based on conditions. The underlying data stays the same, but you decide which parts of the template each visitor sees.

if

The most common conditional. Show content when a condition is true:

{% if product.available %}
  <button>Add to Cart</button>
{% endif %}

if / else

Show one thing when true, another when false:

{% if product.available %}
  <button>Add to Cart</button>
{% else %}
  <span class="sold-out">Sold Out</span>
{% endif %}

if / elsif / else

Check multiple conditions in order. The first one that matches wins:

{% if product.type == 'physical' %}
  <p>Free shipping on orders over £50</p>
{% elsif product.type == 'digital' %}
  <p>Instant download after purchase</p>
{% elsif product.type == 'service' %}
  <p>Book your session online</p>
{% else %}
  <p>Contact us for details</p>
{% endif %}

You can use as many elsif blocks as you need. The else block is optional and runs when nothing else matches.

unless

The inverse of if. Renders content when the condition evaluates to false:

{% unless product.available %}
  <span class="sold-out">Sold Out</span>
{% endunless %}

This is the same as writing {% if product.available == false %}, but reads more naturally. Use unless when you want to say "show this unless something is true."

unless does not support elsif or else. If you need multiple branches, use if instead.

case / when

Match a single value against several options. This is cleaner than a long chain of elsif blocks when you are comparing against known values:

{% case product.type %}
  {% when 'physical' %}
    <p>Ships worldwide</p>
  {% when 'digital' %}
    <p>Instant download</p>
  {% when 'service' %}
    <p>Book online</p>
  {% else %}
    <p>Contact us</p>
{% endcase %}

Each when checks for an exact match. The else block runs if nothing matches.

You can match multiple values in a single when:

{% case product.type %}
  {% when 'physical', 'bundle' %}
    <p>Ships worldwide</p>
  {% when 'digital' %}
    <p>Instant download</p>
{% endcase %}

Combining conditions

Use and and or to combine conditions:

{% if product.available and product.price > 0 %}
  <button>Add to Cart</button>
{% endif %}

{% if product.type == 'digital' or product.type == 'service' %}
  <p>No shipping needed</p>
{% endif %}

You cannot mix and and or in the same condition. If you need complex logic, nest your if statements:

{% if product.available %}
  {% if product.price > 0 or product.type == 'service' %}
    <button>Buy Now</button>
  {% endif %}
{% endif %}

Checking for nil

Use nil to check if a value does not exist:

{% if product.featured_image != nil %}
  <img src="{{ product.featured_image.src }}" />
{% endif %}

You can also write this more simply. Since nil is falsy, a plain if works:

{% if product.featured_image %}
  <img src="{{ product.featured_image.src }}" />
{% endif %}

contains

Check if a string contains a substring, or if an array contains a value:

{% if product.title contains 'Limited' %}
  <span class="badge">Limited Edition</span>
{% endif %}

{% if product.tags contains 'sale' %}
  <span class="badge">On Sale</span>
{% endif %}

On this page