Liquid Syntax

The Three Delimiter Types

Every Liquid template uses exactly three kinds of delimiters. Understanding when to use each one is the foundation of all theme development.

• {{ }} — Output: evaluates an expression and prints the result into the HTML stream
• {% %} — Logic tags: control flow, loops, variable assignment, and includes — produce no direct output
• {% comment %} ... {% endcomment %} — Comments: removed entirely before rendering; visible only in source files

Output Tags {{ }}

Output tags wrap a Liquid expression. Shopify evaluates the expression, converts it to a string, and inserts it at that position in the HTML. You can chain filters inside output tags using the pipe character.

{{ product.title }}
{{ product.price | money }}
{{ product.description | strip_html | truncate: 160 }}

1. product.title — accesses the title property of the product object on a product page
2. | money — filter formats the integer price (cents) as localized currency ($18.99)
3. | strip_html — removes HTML tags from the description before display
4. | truncate: 160 — limits text to 160 characters with an ellipsis

Logic Tags {% %}

Logic tags implement conditionals, loops, and template composition. They never print text directly — they control what surrounding HTML is included in the output.

{% if product.available %}
  <button type="submit" name="add" class="btn btn--primary">
    Add to cart
  </button>
{% else %}
  <p class="stock-status stock-status--sold-out">Sold out</p>
{% endif %}

Here, product.available is a boolean Shopify sets based on inventory. If any variant has stock (or inventory tracking is off), it returns true. The {% else %} branch renders when every variant is unavailable.

Whitespace Control

Liquid preserves whitespace by default. In tightly packed HTML (especially inline elements), extra newlines can cause layout bugs. Use hyphens inside delimiters to strip whitespace: {%- tag -%} or {{- variable -}}.

{%- if collection.products.size > 0 -%}
  <div class="grid">{%- endif -%}