Liquid basics

Liquid is the template language of Sooquna themes. It has two kinds of markup: output in {{ }} and tags in {% %}.

{% if product.available %}
  <p>{{ product.title }} – {{ product.price | money }}</p>
{% endif %}

The examples on these pages render against a sample store; outputs are checked by the renderer’s tests, so they’re what you’ll get.

Output and filters

{{ value }} prints a value. Filters change it, left to right, separated by |:

{{ product.title | upcase | truncate: 20 }}
{{ product.featured_image | image_url: width: 600 | image_tag: loading: 'lazy' }}

Output is escaped automatically. That’s the most important difference from Shopify.

Tags

Tags are logic: if, for, assign, render… See all tags.

Several tags in a row read better inside liquid, one per line, with echo for output:

{%- liquid
  assign on_sale = false
  if product.compare_at_price > product.price
    assign on_sale = true
  endif
  echo product.title
-%}

Whitespace control

A - inside the delimiters removes whitespace on that side, including line breaks: {%- if x -%} and {{- value -}}. Use it in loops and attributes to keep the HTML tidy.

Operators

Operator	Meaning
==, !=	equal, not equal
<, >, <=, >=	comparisons
contains	a string contains a substring, or an array contains a string
and, or	combine conditions

Mixing and / or

Sooquna checks and and or from left to right: true or false and false is false. Shopify checks them from right to left and gets true. Don’t mix them in one condition: nest if tags or assign the parts first.

There are no parentheses in conditions, and filters can’t be used inside if: assign the filtered value first.

{%- assign brightness = settings.brand_color | color_brightness -%}
{%- if brightness > 128 -%}dark text{%- else -%}light text{%- endif -%}

Truthy and falsy

Only nil and false are falsy. Everything else is truthy, including empty strings, 0 and empty arrays. To check for “nothing there”, compare with blank or empty:

{%- if section.settings.heading != blank -%}<h2>{{ section.settings.heading }}</h2>{%- endif -%}
{%- if collection.products == empty -%}<p>No products yet.</p>{%- endif -%}

blank is nil, false, an empty or whitespace-only string, or an empty array or object.

Types

Type	Example
String	'Doha' or "Doha"
Number	4, 4.5 (prices are integers in minor units: 4500 is 45.00)
Boolean	true, false
Nil	nil (an unset value)
Array	product.tags, or 'S,M,L' | split: ','
Range	(1..5), (1..section.settings.columns)

Read array items with [0] or first/last, and object properties with .name or ['name']. settings[key] reads a property whose name is in a variable.

Comments

{% comment %}Not rendered.{% endcomment %}
{% # A one-line comment %}

Next

• Auto-escaping
• Tags, Filters, Objects
• Limits