Liquid If / Unless

Conditional Rendering in Themes

Conditionals are the most-used Liquid tags in production themes. They let you show different HTML based on inventory, customer login state, cart contents, market, or any other store data — without duplicating entire template files.

if / elsif / else

The {% if %} tag evaluates a condition. If true, Liquid renders everything until {% elsif %}, {% else %}, or {% endif %}. You can chain multiple {% elsif %} branches for multi-way decisions.

{% if cart.item_count > 0 %}
  <a href="{{ routes.cart_url }}" class="header__cart">
  Cart ({{ cart.item_count }})
  </a>
{% else %}
  <a href="{{ routes.cart_url }}" class="header__cart">Cart</a>
{% endif %}

cart.item_count is an integer updated on every page load. It reflects the total quantity of all line items (two of the same product counts as 2). Use cart.item_count > 0 rather than checking cart.items.size — they are equivalent but item_count is more readable.

Product availability branching

{% if product.compare_at_price > product.price %}
  <span class="price price--sale">{{ product.price | money }}</span>
  <s class="price price--compare">{{ product.compare_at_price | money }}</s>
{% elsif product.available == false %}
  <span class="badge badge--sold-out">Sold out</span>
{% else %}
  <span class="price">{{ product.price | money }}</span>
{% endif %}

1. compare_at_price > price — Shopify shows a 'compare at' price when the merchant sets a higher MSRP
2. product.available == false — all variants are out of stock or unavailable
3. The final else branch handles the standard in-stock, non-sale case

unless — Inverted Conditions

{% unless %} renders its body when the condition is false. It is equivalent to {% if condition == false %} but reads more naturally for guard clauses.

{% unless product.available %}
  <p class="notice">This product is currently unavailable. Join our waitlist below.</p>
  {% render 'back-in-stock-form', product: product %}
{% endunless %}