1.1 What is Liquid?

Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.

Liquid has been in production use since June 2006 and is now used by many other hosted web applications.

Who uses Liquid?

• Jekyll
• Salesforce Desk
• Zendesk
• 500px
• …and many more!

1.2 Introduction

Liquid code can be categorized into objects, tags, and filters.

Objects

Objects tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: {{ and }}.

{{ page.title }}

Introduction

In this case, Liquid is rendering the content of an object called page.title, and that object contains the text Introduction.

Tags

Tags create the logic and control flow for templates. They are denoted by curly braces and percent signs: {% and %}.

The markup used in tags does not produce any visible text. This means that you can assign variables and create conditions and loops without showing any of the Liquid logic on the page.

{% if user %}
  Hello {{ user.name }}!
{% endif %}

Hello Adam!

Tags can be categorized into three types:

• Control flow
• Iteration
• Variable assignments

You can read more about each type of tag in their respective sections.

Filters

Filters change the output of a Liquid object. They are using within an output and are separated by a |.

{{ "/my/fancy/url" | append: ".html" }}

/my/fancy/url.html

1.3 Operators

Liquid includes many logical and comparison operators.

Basic operators

For example:

{% if product.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endif %}

You can use multiple operators in a tag:

{% if product.type == "Shirt" or product.type == "Shoes" %}
  This is a shirt or a pair of shoes.
{% endif %}

contains

contains checks for the presence of a substring inside a string.

{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

contains can also check for the presence of a string in an array of strings.

{% if product.tags contains 'Hello' %}
  This product has been tagged with 'Hello'.
{% endif %}

contains can only search strings. You cannot use it to check for an object in an array of objects.

1.4 Truthy and falsy

In programming, anything that returns true in a conditional is called truthy. Anything that returns false in a conditional is called falsy. All object types can be described as either truthy or falsy.

• Truthy
• Falsy
• Summary

Truthy

All values in Liquid are truthy except nil and false.

In the example below, the string “Tobi” is not a boolean, but it is truthy in a conditional:

{% assign tobi = "Tobi" %}

{% if tobi %}
  This condition will always be true.
{% endif %}

Strings, even when empty, are truthy. The example below will result in empty HTML tags if settings.fp_heading is empty:

{% if settings.fp_heading %}
  <h1>{{ settings.fp_heading }}</h1>
{% endif %}

<h1></h1>

Falsy

The falsy values in Liquid are nil and false.

Summary

The table below summarizes what is truthy or falsy in Liquid.

1.5 Types

Liquid objects can have one of six types:

• String
• Number
• Boolean
• Nil
• Array

You can initialize Liquid variables with the assign or capture tags.

String

Declare a string by wrapping a variable’s value in single or double quotes:

{% assign my_string = "Hello World!" %}

Number

Numbers include floats and integers:

{% assign my_int = 25 %}
{% assign my_float = 39.756 %}

Boolean

Booleans are either true or false. No quotations are necessary when declaring a boolean:

{% assign foo = true %}
{% assign bar = false %}

Nil

Nil is a special empty value that is returned when Liquid code has no results. It is not a string with the characters “nil”.

Nil is treated as false in the conditions of if blocks and other Liquid tags that check the truthfulness of a statement.

In the following example, if the user does not exist (that is, user returns nil), Liquid will not print the greeting:

{% if user %}
  Hello {{ user.name }}!
{% endif %}

Tags or outputs that return nil will not print anything to the page.

The current user is {{ user.name }}

The current user is

Array

Arrays hold lists of variables of any type.

Accessing items in arrays

To access all the items in an array, you can loop through each item in the array using an iteration tag.

<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{% for user in site.users %}
  {{ user }}
{% endfor %}

Tobi Laura Tetsuro Adam

Accessing specific items in arrays

You can use square bracket [ ] notation to access a specific item in an array. Array indexing starts at zero.

<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[3] }}

Tobi
Laura
Adam

Initializing arrays

You cannot initialize arrays using only Liquid.

You can, however, use the split filter to break a string into an array of substrings.

2.1 Control flow

Control flow tags can change the information Liquid shows using programming logic.

case/when

Creates a switch statement to compare a variable with different values. case initializes the switch statement, and when compares its values.

{% assign handle = 'cake' %}
{% case handle %}
  {% when 'cake' %}
     This is a cake
  {% when 'cookie' %}
     This is a cookie
  {% else %}
     This is not a cake nor a cookie
{% endcase %}

This is a cake

if

Executes a block of code only if a certain condition is true.

{% if product.title == 'Awesome Shoes' %}
  These shoes are awesome!
{% endif %}

These shoes are awesome!

unless

The opposite of if – executes a block of code only if a certain condition is not met.

{% unless product.title == 'Awesome Shoes' %}
  These shoes are not awesome.
{% endunless %}

These shoes are not awesome.

This would be the equivalent of doing the following:

{% if product.title != 'Awesome Shoes' %}
  These shoes are not awesome.
{% endif %}

elsif / else

Adds more conditions within an if or unless block.

<!-- If customer.name = 'anonymous' -->
{% if customer.name == 'kevin' %}
  Hey Kevin!
{% elsif customer.name == 'anonymous' %}
  Hey Anonymous!
{% else %}
  Hi Stranger!
{% endif %}

Hey Anonymous!

2.2 Iteration

Iteration tags run blocks of code repeatedly.

for

Repeatedly executes a block of code. For a full list of attributes available within a for loop, see forloop (object).

  {% for product in collection.products %}
    {{ product.title }}
  {% endfor %}

hat shirt pants

break

Causes the loop to stop iterating when it encounters the break tag.

{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

1 2 3

continue

Causes the loop to skip the current iteration when it encounters the continue tag.

{% for i in (1..5) %}
  {% if i == 4 %}
    {% continue %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

1 2 3   5

for (parameters)

limit

Limits the loop to the specified number of iterations.

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
  {{ item }}
{% endfor %}

1 2

offset

Begins the loop at the specified index.

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %}
  {{ item }}
{% endfor %}

3 4 5 6

range

Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.

{% assign num = 4 %}
{% for i in (1..num) %}
  {{ i }}
{% endfor %}

3 4 5
1 2 3 4

reversed

Reverses the order of the loop.

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
  {{ item }}
{% endfor %}

6 5 4 3 2 1

cycle

Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time cycle is called, the next string that was passed as a parameter is output.

cycle must be used within a for loop block.

{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}

one
two
three
one

Uses for cycle include:

• applying odd/even classes to rows in a table
• applying a unique class to the last product thumbnail in a row

cycle (parameters)

cycle accepts a parameter called cycle group in cases where you need multiple cycle blocks in one template. If no name is supplied for the cycle group, then it is assumed that multiple calls with the same parameters are one group.

tablerow

Generates an HTML table. Must be wrapped in opening <table> and closing </table> HTML tags.

<table>
{% tablerow product in collection.products %}
  {{ product.title }}
{% endtablerow %}
</table>

<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
    <td class="col3">
      Batman Poster
    </td>
    <td class="col4">
      Bullseye Shirt
    </td>
    <td class="col5">
      Another Classic Vinyl
    </td>
    <td class="col6">
      Awesome Jeans
    </td>
  </tr>
</table>

tablerow (parameters)

cols

Defines how many columns the tables should have.

{% tablerow product in collection.products cols:2 %}
  {{ product.title }}
{% endtablerow %}

<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
  </tr>
  <tr class="row2">
    <td class="col1">
      Batman Poster
    </td>
    <td class="col2">
      Bullseye Shirt
    </td>
  </tr>
  <tr class="row3">
    <td class="col1">
      Another Classic Vinyl
    </td>
    <td class="col2">
      Awesome Jeans
    </td>
  </tr>
</table>

limit

Exits the tablerow after a specific index.

{% tablerow product in collection.products cols:2 limit:3 %}
  {{ product.title }}
{% endtablerow %}

offset

Starts the tablerow after a specific index.

{% tablerow product in collection.products cols:2 offset:3 %}
  {{ product.title }}
{% endtablerow %}

range

Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.

<!--variable number example-->

{% assign num = 4 %}
<table>
{% tablerow i in (1..num) %}
  {{ i }}
{% endtablerow %}
</table>

<!--literal number example-->

<table>
{% tablerow i in (3..5) %}
  {{ i }}
{% endtablerow %}
</table>

2.3 Variable

Variable tags create new Liquid variables.

assign

Creates a new variable.

{% assign my_variable = false %}
{% if my_variable != true %}
  This statement is valid.
{% endif %}

  This statement is valid.

Wrap a variable in quotations " to save it as a string.

{% assign foo = "bar" %}
{{ foo }}

bar

capture

Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through {% capture %} are strings.

{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}

I am being captured.

increment

Creates a new number variable, and increases its value by one every time it is called. The initial value is 0.

{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}

0
1
2

Variables created through the increment tag are independent from variables created through assign or capture.

In the example below, a variable named “var” is created through assign. The increment tag is then used several times on a variable with the same name. Note that the increment tag does not affect the value of “var” that was created through assign.

{% assign var = 10 %}
{% increment var %}
{% increment var %}
{% increment var %}
{{ var }}

0
1
2
10

decrement

Creates a new number variable, and decreases its value by one every time it is called. The initial value is -1.

{% decrement variable %}
{% decrement variable %}
{% decrement variable %}

-1
-2
-3

Like increment, variables declared inside decrement are independent from variables created through assign or capture.

3.1 append

Concatenates two strings and returns the concatenated value.

{{ "/my/fancy/url" | append: ".html" }}

/my/fancy/url.html

append can also be used with variables:

{% assign filename = "/index.html" %}
{{ "website.com" | append: filename }}

website.com/index.html

3.2 capitalize

Makes the first character of a string capitalized.

{{ "title" | capitalize }}

Title

capitalize only capitalizes the first character of the string, so later words are not affected:

```liquid

```text
My great title

3.3 ceil

Rounds the input up to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.

{{ 1.2 | ceil }}

2

{{ 2.0 | ceil }}

2

{{ 183.357 | ceil }}

184

Here the input value is a string:

{{ "3.5" | ceil }}

4

3.4 date

Converts a timestamp into another date format. The format for this syntax is the same as strftime.

{{ article.published_at | date: "%a, %b %d, %y" }}

Fri, Jul 17, 15

{{ article.published_at | date: "%Y" }}

2015

date works on strings if they contain well-formatted dates:

{{ "March 14, 2016" | date: "%b %d, %y" }}

Mar 14, 16

3.5 default

Allows you to specify a fallback in case a value doesn’t exist. default will show its value if the left side is nil, false, or empty.

In this example, product_price is not defined, so the default value is used.

{{ product_price | default: 2.99 }}

2.99

In this example, product_price is defined, so the default value is not used.

{% assign product_price = 4.99 %}
{{ product_price | default: 2.99 }}

4.99

In this example, product_price is empty, so the default value is used.

{% assign product_price = "" %}
{{ product_price | default: 2.99 }}

2.99

3.6 divided_by

Divides a number by the specified number.

The result is rounded down to the nearest integer (that is, the floor).

{{ 4 | divided_by: 2 }}

2

{{ 16 | divided_by: 4 }}

4

{{ 5 | divided_by: 3 }}

1

3.7 downcase

Makes each character in a string lowercase. It has no effect on strings which are already all lowercase.

{{ "Parker Moore" | downcase }}

parker moore

{{ "apple" | downcase }}

apple

3.8 escape

Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn’t change strings that don’t have anything to escape.

{{ "Have you read 'James & the Giant Peach'?" | escape }}

Have you read 'James & the Giant Peach'?

{{ "Tetsuro Takara" | escape }}

Tetsuro Takara

3.9 escape_once

Escapes a string without changing existing escaped entities. It doesn’t change strings that don’t have anything to escape.

{{ "1 < 2 & 3" | escape_once }}

1 < 2 & 3

{{ "1 < 2 & 3" | escape_once }}

1 < 2 & 3

3.10 first

Returns the first item of an array.

{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}

{{ my_array.first }}

apples

{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}

{{ my_array.first }}

zebra

3.11 floor

Rounds a number down to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.

{{ 1.2 | floor }}

1

{{ 2.0 | floor }}

2

{{ 183.357 | floor }}

183

Here the input value is a string:

{{ "3.5" | floor }}

3

3.12 join

Combines the items in an array into a single string using the argument as a separator.

{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}

{{ beatles | join: " and " }}

John and Paul and George and Ringo

3.13 last

Returns the last item of an array.

{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}

{{ my_array.last }}

plums

{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}

{{ my_array.last }}

tiger

3.14 lstrip

Removes all whitespaces (tabs, spaces, and newlines) from the beginning of a string. The filter does not affect spaces between words.

{{ "          So much room for activities!          " | lstrip }}

So much room for activities!          

3.15 map

Creates an array of values by extracting the values of a named property from another object.

In this example, assume the object site.pages contains all the metadata for a website. Using assign with the map filter creates a variable that contains only the values of the category properties of everything in the site.pages object.

{% assign all_categories = site.pages | map: "category" %}

{% for item in all_categories %}
{{ item }}
{% endfor %}

business
celebrities
lifestyle
sports
technology

3.16 minus

Subtracts a number from another number.

{{ 4 | minus: 2 }}

2

{{ 16 | minus: 4 }}

12

{{ 183.357 | minus: 12 }}

171.357

3.17 modulo

Returns the remainder of a division operation.

{{ 3 | modulo: 2 }}

1

{{ 24 | modulo: 7 }}

3

{{ 183.357 | modulo: 12 }}

3.357

3.18 newline_to_br

Replaces every newline (\n) with an HTML line break (<br>).

{% capture string_with_newlines %}
Hello
there
{% endcapture %}

{{ string_with_newlines | newline_to_br }}

<br />
Hello<br />
there<br />

3.19 plus

Adds a number to another number.

{{ 4 | plus: 2 }}

6

{{ 16 | plus: 4 }}

20

{{ 183.357 | plus: 12 }}

195.357

3.20 prepend

Adds the specified string to the beginning of another string.

{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}

Some fruit: apples, oranges, and bananas

You can also prepend variables:

{% assign url = "liquidmarkup.com" %}

{{ "/index.html" | prepend: url }}

liquidmarkup.com/index.html

3.21 remove

Removes every occurrence of the specified substring from a string.

{{ "I strained to see the train through the rain" | remove: "rain" }}

I sted to see the t through the 

3.22 remove_first

Removes only the first occurrence of the specified substring from a string.

{{ "I strained to see the train through the rain" | remove_first: "rain" }}

I sted to see the train through the rain

3.23 replace

Replaces every occurrence of an argument in a string with the second argument.

{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}

Take your protein pills and put your helmet on

3.24 replace_first

Replaces only the first occurrence of the first argument in a string with the second argument.

{% assign my_string = "Take my protein pills and put my helmet on" %}
{{ my_string | replace_first: "my", "your" }}

Take your protein pills and put my helmet on

3.25 reverse

Reverses the order of the items in an array. reverse cannot reverse a string.

{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}

{{ my_array | reverse | join: ", " }}

plums, peaches, oranges, apples

reverse cannot be used directly on a string, but you can split a string into an array, reverse the array, and rejoin it by chaining together filters:

{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}

.moT rojaM ot lortnoc dnuorG

3.26 round

Rounds an input number to the nearest integer or, if a number is specified as an argument, to that number of decimal places.

{{ 1.2 | round }}

1

{{ 2.7 | round }}

3

{{ 183.357 | round: 2 }}

183.36

3.27 rstrip

Removes all whitespace (tabs, spaces, and newlines) from the right side of a string.

{{ "          So much room for activities!          " | rstrip }}

          So much room for activities!

3.28 size

Returns the number of characters in a string or the number of items in an array. size can also be used with dot notation (for example, {{ my_string.size }}). This allows you to use size inside tags such as conditionals.

{{ "Ground control to Major Tom." | size }}

28

{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}

{{ my_array | size }}

4

Using dot notation:

{% if site.pages.size > 10 %}
  This is a big website!
{% endif %}

3.29 slice

Returns a substring of 1 character beginning at the index specified by the argument passed in. An optional second argument specifies the length of the substring to be returned.

String indices are numbered starting from 0.

{{ "Liquid" | slice: 0 }}

L

{{ "Liquid" | slice: 2 }}

q

{{ "Liquid" | slice: 2, 5 }}

quid

If the first parameter is a negative number, the indices are counted from the end of the string:

{{ "Liquid" | slice: -3, 2 }}

ui

3.30 sort

Sorts items in an array by a property of an item in the array. The order of the sorted array is case-sensitive.

{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}

{{ my_array | sort | join: ", " }}

Sally Snake, giraffe, octopus, zebra

3.31 split

Divides an input string into an array using the argument as a separator. split is commonly used to convert comma-separated items from a string to an array.

{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}

{% for member in beatles %}
  {{ member }}
{% endfor %}

  John

  Paul

  George

  Ringo

3.32 strip

Removes all whitespace (tabs, spaces, and newlines) from both the left and right side of a string. It does not affect spaces between words.

{{ "          So much room for activities!          " | strip }}

So much room for activities!

3.33 strip_html

Removes any HTML tags from a string.

{{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}

Have you read Ulysses?

3.34 strip_newlines

Removes any newline characters (line breaks) from a string.

{% capture string_with_newlines %}
Hello
there
{% endcapture %}

{{ string_with_newlines | strip_newlines }}

Hellothere

3.35 times

Multiplies a number by another number.

{{ 3 | times: 2 }}

6

{{ 24 | times: 7 }}

168

{{ 183.357 | times: 12 }}

2200.284

3.36 truncate

truncate shortens a string down to the number of characters passed as a parameter. If the number of characters specified is less than the length of the string, an ellipsis (…) is appended to the string and is included in the character count.

{{ "Ground control to Major Tom." | truncate: 20 }}

Ground control to...

3.37 truncatewords

Shortens a string down to the number of words passed as the argument. If the specified number of words is less than the number of words in the string, an ellipsis (…) is appended to the string.

{{ "Ground control to Major Tom." | truncatewords: 3 }}

Ground control to...

3.38 uniq

Removes any duplicate elements in an array.

{% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}

{{ my_array | uniq | join: ", " }}

ants, bugs, bees

3.39 upcase

Makes each character in a string uppercase. It has no effect on strings which are already all uppercase.

{{ "Parker Moore" | upcase }}

PARKER MOORE

{{ "APPLE" | upcase }}

APPLE

3.40 url_encode

Converts any URL-unsafe characters in a string into percent-encoded characters.

{{ "john@liquid.com" | url_encode }}

john%40liquid.com

{{ "Tetsuro Takara" | url_encode }}

Tetsuro+Takara