Liquid filters

Filters are simple methods that modify the output of numbers, strings, variables and objects. They are placed within an output tag {{ }} and are denoted by a pipe character |.

Input

<!-- item.title = "Invisible Watch" -->
{{ item.title | upcase }}

Output

INVISIBLE WATCH

In the example above, item is the object, title is its attribute, and upcase is the filter being applied.

Some filters require a parameter to be passed.

Input

{{ item.title | remove: "Invisible" }}

Output

Watch

Multiple filters can be used on one output. They are applied from left to right.

Input

<!-- item.title = "Invisible Watch" -->
{{ item.title | upcase | remove: "INVISIBLE"  }}

Output

WATCH

Array filters

Array filters change the output of arrays. Array is a synonym to list. For example, order.line_items is an array of line items or order.transactions is an array of transactions.

join

Joins the elements of an array with the character passed as the parameter. The result is a single string.

Input

{{ product.tags | join: ', ' }}

Output

tag1, tag2, tag3

first

Returns the first element of an array.

Input

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | first }}

Output

sale

You can use first with dot notation when you need to use the filter inside a tag.

{% if product.tags.first == "sale" %}
  This product is on sale!
{% endif %}

last

Returns the last element of an array.

Input

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | last }}

Output

awesome

You can use last with dot notation when you need to use the filter inside a tag.

{% if product.tags.last == "sale"%}
  This product is on sale!
{% endif %}

Using last on a string returns the last character in the string.

Input

<!-- product.title = "Awesome Shoes" -->
{{ product.title | last }}

Output

s

concat

Concatenates (combines) an array with another array. The resulting array contains all the elements of the original arrays. concat will not remove duplicate entries from the concatenated array unless you also use the uniq filter.

Input

{% assign fruits = "apples, oranges, peaches, tomatoes" | split: ", " %}
{% assign vegetables = "broccoli, carrots, lettuce, tomatoes" | split: ", " %}

{% assign plants = fruits | concat: vegetables %}

{{ plants | join: ", " }}

Output

apples, oranges, peaches, tomatoes, broccoli, carrots, lettuce, tomatoes

You can string together multiple concat filters to combine more than two arrays:

Input

{% assign fruits = "apples, oranges, peaches" | split: ", " %}
{% assign vegetables = "broccoli, carrots, lettuce" | split: ", " %}
{% assign animals = "dogs, cats, birds" | split: ", " %}

{% assign things = fruits | concat: vegetables | concat: animals %}

{{ things | join: ", " }}

Output

apples, oranges, peaches, broccoli, carrots, lettuce, dogs, cats, birds

index

Returns the item at the specified index location in an array. Note that array numbering starts from zero, so the first item in an array is referenced with [0].

Input

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags[2] }}

Output

womens

map

Accepts an array element's attribute as a parameter and creates an array out of each array element's value.

Input

<!-- collection.title = "Spring", "Summer", "Fall", "Winter" -->
{% assign collection_titles = collections | map: 'title' %}
{{ collection_titles }}

Output

SpringSummerFallWinter

flat_map ⭐

Creates a flattened array of values taken from the specified attribute of each element of the input array.

Input

<!-- 
    order = {
        line_items: [{
            discount_allocations: [{
                amount: 1.23
            }, {
                amount: 2.34
            }]
        }, {
            discount_allocations: [{
                amount: 3.45
            }]
        }]
    }
-->
{{ order.line_items | flat_map: "discount_allocations" | json }}

Output

[{"amount":1.23},{"amount":2.34},{"amount":3.45}]

group_by ⭐

Groups elements of the same property value. Creates an object where keys are the specified property value, and values are arrays of elements with the same property value.

Input

<!--
    order = {
        line_items: [{
            price: 1.23,
            vendor: "A"
        }, {
            price: 2.34, 
            vendor: "B"
        }, {
            price: 3.45, 
            vendor: "A"
        }]
    }
-->
{{ order.line_items | group_by: "vendor" | json }

Output

{"A":[{"price":1.23,"vendor":"A"},{"price":3.45,"vendor":"A"}],"B":[{"price":2.34,"vendor":"B"}]}

map_values ⭐

Transforms an object by running each of the object's property value by a given filter. First parameter of map_values is the filter name. The filter receives the object values one by one as its first parameter. All remaining parameters provided to map_values are passed down to the given filter.

Input

<!--
    dimensions = { depth: 3, height: 5, width: 7 } 
-->

{% assign doubled = dimensions | map_values: "times", 2 %}
{{ doubled.depth }}
{{ doubled.height }}
{{ doubled.width }}

Output

6
10
14

reverse

Reverses the order of the items in an array.

Input

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

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

Output

plums, peaches, oranges, apples

size

Returns the size of a string (the number of characters) or an array (the number of elements).

Input

{{ 'The quick brown fox jumps over a lazy dog.' | size }}

Output

42

You can use size with dot notation when you need to use the filter inside a tag.

{% if collections.frontpage.products.size > 10 %}
  There are more than 10 products in this collection!
{% endif %}

sort

Sorts the elements of an array by a given attribute of an element in the array.

{% assign products = collection.products | sort: 'price' %}
{% for product in products %}
  <h4>{{ product.title }}</h4>
{% endfor %}

The order of the sorted array is case-sensitive.

Input

<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
   {{ product.title }}
{% endfor %}

Output

A B a b

where

Creates an array including only the objects with a given property value, or any truthy value by default.

Input

All products:
{% for product in collection.products %}
- {{ product.title }}
{% endfor %}

{% assign kitchen_products = collection.products | where: "type", "kitchen" %}

Kitchen products:
{% for product in kitchen_products %}
- {{ product.title }}
{% endfor %}

Output

All products:
- Vacuum
- Spatula
- Television
- Garlic press

Kitchen products:
- Spatula
- Garlic press

You can use a property name with where that has no target value when that property is a boolean or truthy. For example, the available property of products.

Example

{% assign available_products = collection.products | where: "available" %}

Available products:
{% for product in available_products %}
- {{ product.title }}
{% endfor %}

uniq

Removes any duplicate instances of elements in an array.

Input

{% assign fruits = "orange apple banana apple orange" %}
{{ fruits | split: ' ' | uniq | join: ' ' }}

Output

orange apple banana

Format filters

date

Converts a timestamp into a specified date format.

format	description	example value
%d	Two-digit day of the month (with leading zeros)	01 to 31
%m	Two digit representation of the month	01 to 12
%y	Two digit representation of the year	21
%Y	Four digit representation for the year	2021
%H	Two digit representation of the hour in 24-hour format	00 to 23
%I	Two digit representation of the hour in 12-hour format	01 to 12
%p	Upper-case 'AM' or 'PM' based on the given time	AM or PM
%P	Lower-case 'am' or 'pm' based on the given time	am or pm
%M	Two digit representation of the minute	00 to 59
%S	Two digit representation of the second	00 to 59
%s	Unix Epoch Time timestamp	1612328167

Input

{{ order.created_at | date: "%Y-%m-%d %H:%M:%S" }}

Output

2021-02-03 04:56:07

e164 ⭐

Formats a phone number according to the E.164 standard. If a country calling code is not included in the phone number, then you can pass an ISO 3166 country code as an additional parameter.

{{ "[phone]" | e164 }}
=> [phone]

{{ "[phone]" | e164 }}
=> [phone]

{{ "020 8743 8000" | e164: "GB" }}
=> [phone]

{{ "7325 7731" | e164: "HKG" }}
=> [phone]

To format a phone number associated with a shipping address:

{{ order.shipping_address.phone | e164: order.shipping_address.country_code }}

iso3166_alpha3 ⭐

Converts a two-letter ISO 3166 country code to its three-letter equivalent.

{{ "US" | iso3166_alpha3 }}
=> USA

To format a shipping address country as an ISO 3166 alpha-3 country code:

{{ order.shipping_address.country_code | iso3166_alpha3 }}

json

Converts a string, or object, into JSON format.

By default it produces a single-line JSON. You can pass an optional parameter "pretty", to get a multi-line, indented JSON output.

The json filter is useful for debugging to check what are all available properties of a given object.

Input

{{ order.transacations | json: "pretty" }}

[
    {
        "id": 5689665290299,
        "order_id": 4592641409083,
        "kind": "sale",
        "gateway": "bogus",
        "status": "success",
        "message": "Bogus Gateway: Forced success",
        "created_at": "2022-10-06T10:09:20+02:00",
        "test": true,
        "authorization": "53433",
        "location_id": null,
        "user_id": null,
        "parent_id": null,
        "processed_at": "2022-10-06T10:09:20+02:00",
        "device_id": null,
        "error_code": null,
        "source_name": "web",
        "payment_details": {
            "credit_card_bin": "1",
            "avs_result_code": null,
            "cvv_result_code": null,
            "credit_card_number": "•••• •••• •••• 1",
            "credit_card_company": "Bogus"
        },
        "receipt": {
            "paid_amount": "23.00"
        },
        "amount": "23.00",
        "currency": "USD",
        "admin_graphql_api_id": "gid://shopify/OrderTransaction/5689665290299"
    }
]

json_parse, parse_json⭐

Allows parsing string in a format compliant with JSON file requirements into an object. It enables access to individual fields within the object using dot notation.

{%- capture material %}
{"properties":{"name":"Cotton","color":"White","structure":"Woven"}}
{%- endcapture %}

{%- assign material = material | json_parse %}

material: {{ material }}
material_json: {{ material | json }}
material_name: {{ material.properties.name }}

Output

material: [object Object]
material_json: {"properties":{"name":"Cotton","color":"White","structure":"Woven"}}
material_name: Cotton

moment ⭐

Returns a current or specified time converted to a desired time zone.

The filter has two parameters: a date format and a time zone identifier.

{{ "now" | moment: "YYYY-MM-DD HH:mm:ss", "America/Chicago" }}
=> 2024-03-13 14:55:00

format	description	example value
DD	Two-digit day of the month (with leading zeros)	01 to 31
MM	Two digit representation of the month	01 to 12
YY	Two digit representation of the year	21
YYYY	Four digit representation for the year	2021
HH	Two digit representation of the hour in 24-hour format	00 to 23
hh	Two digit representation of the hour in 12-hour format	01 to 12
A	Upper-case 'AM' or 'PM' based on the given time	AM or PM
a	Lower-case 'am' or 'pm' based on the given time	am or pm
mm	Two digit representation of the minute	00 to 59
ss	Two digit representation of the second	00 to 59

Math filters

Math filters allow you to apply mathematical tasks.

Math filters can be linked and, as with any other filters, are applied in order of left to right. In the example below, minus is applied first, then times, and finally divided_by.Copy

You save {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price }}%

abs

Returns the absolute value of a number.

Input

{{ -25 | abs }}

Output

25

abs will also work on a string if the string only contains a number.

Input

{{ "-19.86" | abs }}

Output

19.86

at_most

Limits a number to a maximum value.

Input

{{ 4 | at_most: 5 }}
{{ 4 | at_most: 3 }}

Output

4
3

at_least

Limits a number to a minimum value.

Input

{{ 4 | at_least: 5 }}
{{ 4 | at_least: 3 }}

Output

5
4

ceil

Rounds an output up to the nearest integer.

Input

{{ 1.2 | ceil }}
{{ 3.0 | ceil }}
{{ 3.45 | ceil }}

Output

2
3
4

Liquid tries to convert the input to a number before the filter is applied.

Input

{{ "4.5" | ceil }}

Output

5

divided_by

Divides an output by a number. The output is rounded down to the nearest integer.

Input

<!-- product.price = 200 -->
{{ product.price | divided_by: 10 }}

Output

20

floor

Rounds an output down to the nearest integer.

Input

{{ 4.6 | floor }}
{{ 4.3 | floor }}

Output

4
4

minus

Subtracts a number from an output.

Input

<!-- product.price = 200 -->
{{ product.price | minus: 15 }}

Output

185

modulo

Divides an output by a number and returns the remainder.

Input

{{ 12 | modulo: 5 }}

Output

2

plus

Adds a number to an output.

Input

<!-- product.price = 200 -->
{{ product.price | plus: 15 }}

Output

215

round

Rounds the output to the nearest integer or specified number of decimals.

Input

{{ 4.6 | round }}
{{ 4.3 | round }}
{{ 4.5612 | round: 2 }}

Output

5
4
4.56

times

Multiplies an output by a number.

Input

<!-- product.price = 200 -->
{{ product.price | times: 1.15 }}

Output

230

to_fixed

Convert a number into a string, rounding the number to keep only the given number of decimals.

Input

{{ 1.2345 | to_fixed: 2 }}

Output

1.23

The difference between round and to_fixed it that round returns a number so it trims trailing zeros while to_fixed will preserve them.

Input

{{ 4.5000 | round: 2 }}
{{ 4.5000 | to_fixed: 2 }}

Output

4.5
4.50

String filters

String filters are used to manipulate outputs and variables of the string type.

append

Appends characters to a string.

Input

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

Output

website.com/index.html

base64_decode

Decodes a string to Base64 format

Input

{{ 'b25lIHR3byB0aHJlZQ==' | base64_decode }}

Output

one two three

base64_encode

Encodes a string to Base64 format

Input

{{ 'one two three' | base64_decode }}

Output

b25lIHR3byB0aHJlZQ==

capitalize

Capitalizes the first word in a string

Input

{{ "title" | capitalize }}

Output

Title

downcase

Converts a string into lowercase.

Input

{{ 'UPPERCASE' | downcase }}

Output

uppercase

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.

Input

{{ "<p>test</p>" | escape }}

Output

<p>test</p>

extract_number ⭐

Extracts a first number from a string. It works for integers (123), decimal numbers (123.45), and negative numbers (-123). The extracted number is still a text so it doesn't strip leading zeros (0123).

Input

{%- capture note -%}
Foo 123 Bar 456
{%- endcapture -%}
{{ note | extract_number }}

Output

123

extract_numbers ⭐

Extracts all numbers from a string. It works for integers (123), decimal numbers (123.45), and negative numbers (-123). The extracted numbers are still a text to preserve leading zeros (0123). The result is an array.

Input

{%- capture note -%}
Foo 012
Bar 3.4
Baz -56
{%- endcapture -%}
{{ note | extract_numbers | join: " " }}

Output

012 3.4 -56

md5

Calculates an MD5 hash from a string.

An example use case for this filter is to calculate a checksum of a request payload, and include it in a request header. Such a checksum is required by some APIs, for example, the Richard Photo Lab API.

{{ output | strip_all | md5 }}

newline_to_br

Inserts a <br > linebreak HTML tag in front of each line break in a string.

Input

{% capture var %}
One
Two
Three
{% endcapture %}
{{ var | newline_to_br }}

Output

<br />One<br />Two<br />Three<br />

prepend

Adds the specified string to the beginning of another string.

Input

{{ 'sale' | prepend: 'Made a great ' }}

Output

Made a great sale

remove

Removes all occurrences of a substring from a string.

Input

{{ "Hello, world. Goodbye, world." | remove: "world" }}

Output

Hello, . Goodbye, .

remove_first

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

Input

{{ "Hello, world. Goodbye, world." | remove_first: "world" }}

Output

Hello, . Goodbye, world.

replace

Replaces all occurrences of a string with a substring.

Input

<!-- product.title = "Awesome Shoes" -->
{{ product.title | replace: 'Awesome', 'Mega' }}

Output

Mega Shoes

replace_first

Replaces the first occurrence of a string with a substring.

Input

<!-- product.title = "Awesome Awesome Shoes" -->
{{ product.title | replace_first: 'Awesome', 'Mega' }}

Output

Mega Awesome Shoes

slice

The slice filter returns a substring, starting at the specified index. An optional second parameter can be passed to specify the length of the substring. If no second parameter is given, a substring of one character will be returned.

Input

{{ "hello" | slice: 0 }}
{{ "hello" | slice: 1 }}
{{ "hello" | slice: 1, 3 }}

Output

h
e
ell

If the passed index is negative, it is counted from the end of the string.

Input

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

Output

ll

split

The split filter takes on a substring as a parameter. The substring is used as a delimiter to divide a string into an array. You can output different parts of an array using array filters.

Input

{% assign words = "Hi, how are you today?" | split: ' ' %}

{%- for word in words -%}
{{ word }}
{% endfor %}

Output

Hi,
how
are
you
today? 

strip

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

Input

{{ '   too many spaces      ' | strip }}

Output

too many spaces

lstrip

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

Input

{{ '   too many spaces           ' | lstrip }}!

Output

too many spaces           !

rstrip

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

Input

{{ '              too many spaces      ' | rstrip }}!

Output

              too many spaces!

strip_all ⭐

Strips tabs, spaces, and newlines (all whitespace) from the entire string.

Input

{%- capture note -%}
Line 1
   Line 2
      Line 3
{%- endcapture -%}
{{ note | strip_all }}

Output

Line 1Line 2Line 3

strip_html

Strips all HTML tags from a string.

Input

{{ "<h1>Hello</h1> World" | strip_html }}

Output

Hello World

strip_newlines

Removes any line breaks/newlines from a string.

Input

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

{{ string_with_newlines | strip_newlines }}

Output

Hellothere

truncate

Truncates a string down to the number of characters passed as the first parameter. An ellipsis (...) is appended to the truncated string and is included in the character count.

Input

{{ "The cat came back the very next day" | truncate: 13 }}

Output

The cat ca...

Custom ellipsis

truncate takes an optional second parameter that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (...), but you can specify a different sequence.

The length of the second parameter counts against the number of characters specified by the first parameter. For example, if you want to truncate a string to exactly 10 characters, and use a 3-character ellipsis, use 13 for the first parameter of truncate, since the ellipsis counts as 3 characters.

Input

{{ "ABCDEFGHIJKLMNOPQRSTUVWXYZ" | truncate: 18, ", and so on" }}

Output

ABCDEFG, and so on

No ellipsis

You can truncate to the exact number of characters specified by the first parameter and show no trailing characters by passing a blank string as the second parameter:

Input

{{ "I'm a little teapot, short and stout." | truncate: 15, "" }}

Output

I'm a little te

truncatewords

Truncates a string down to the number of words passed as the first parameter. An ellipsis (...) is appended to the truncated string.

Input

{{ "The cat came back the very next day" | truncatewords: 4 }}

Output

The cat came back...

Custom ellipsis

truncatewords takes an optional second parameter that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (...), but you can specify a different sequence.

Input

{{ "The cat came back the very next day" | truncatewords: 4, "--" }}

Output

The cat came back--

No ellipsis

You can avoid showing trailing characters by passing a blank string as the second parameter:

Input

{{ "The cat came back the very next day" | truncatewords: 4, "" }}

Output

The cat came back

upcase

Converts a string into uppercase.

Input

{{ 'i want this to be uppercase' | upcase }}

Output

I WANT THIS TO BE UPPERCASE

url_decode

Decodes a string that has been encoded as a URL or by url_encode.

Input

{{ "%27Stop%21%27+said+Fred" | url_decode }}

Output

'Stop!' said Fred

url_encode

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

Input

{{ "[e-mail]" | url_encode }}

john%40liquid.com

Note that url_encode will turn a space into a + sign instead of a percent-encoded character.

Input

{{ "Tetsuro Takara" | url_encode }}

Output

Tetsuro+Takara

xml_escape

This is a special filter available in Exporteo to facilitate the setup of an XML output template.

Replaces characters that are special characters in XML documents.

Char	Escape String
<	&lt;
>	&gt;
"	&quot;
'	&apos;
&	&amp;

Input

{{ "Jane & Joe O'Neill" | xml_escape }}

Output

Jane & Joe O'Neill