Yoolk Liquid

Home Filters Standard-filters

Standard Filters

These are the default filters. They have been written by Shopify.

Array Filters

Array filters are used to modify the output of arrays.

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

first can be used in dot notation, in cases where it needs to be used inside a tag.

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

Gets the last element passed in an array.

Input

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

Output

awesome

last can be used in dot notation, in cases where it needs to be used 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.name = "Awesome Shoes" -->
{{ product.name | last }}

Output

s
map

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

Input

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

Output

SpringSummerFallWinter
size

Returns the size of a string or an array.

Input

{{ 'this is a 30 character string' | size }}

Output

30

size can be used in dot notation, in cases where it needs to be used 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.name }}</h4>
{% endfor %}

The order of the sorted array is case-sensitive.

Input

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

Output

A B a b

String Filters

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

append

Appends characters to a string.

Input

{{ 'sales' | append: '.jpg' }}

Output

sales.jpg
camelcase

Converts a string into CamelCase.

Input

{{ 'coming-soon' | camelcase }}

Output

ComingSoon
capitalize

Capitalizes the first word in a string

Input

{{ 'capitalize me' | capitalize }}

Output

Capitalize me
downcase

Converts a string into lowercase.

Input

{{ 'UPPERCASE' | downcase }}

Output

uppercase
escape

Escapes a string.

Input

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

Output

<!-- The <p> tags are not rendered -->
<p>test</p>
newline_to_br

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

Input

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

Output

One <br>
Two<br>
Three<br>
prepend

Prepends characters to a 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.name = "Awesome Shoes" -->
{{ product.name | replace: 'Awesome', 'Mega' }}

Output

Mega Shoes
replace_first

Replaces the first occurrence of a string with a substring.

Input

<!-- product.name = "Awesome Awesome Shoes" -->
{{ product.name | 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: 2 }}
{{ "hello" | slice: 1, 3 }}

Output

e
ell

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

Input

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

Output

el
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.

Input

{% assign words = "Uses cheat codes, calls the game boring." | split: ' ' %}
First word: {{ words.first }}
First word: {{ words[0] }}
Second word: {{ words[1] }}
Last word: {{ words.last }}
All words: {{ words | join: ', ' }}

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

Output

First word: Uses
First word: Uses
Second word: cheat
Last word: boring.
All words: Uses, cheat, codes,, calls, the, game, boring.

Uses cheat codes, calls the game boring.
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

<!-- Notice the empty spaces to the right of the string -->
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_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.

{{ product.description | strip_newlines }}
truncatewords

Truncates a string down to ‘x’ words, where x is the number passed as a 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...
uniq

Removes any duplicate instances of an element in an array.

Input

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

Output

orange apple banana
upcase

Converts a string into uppercase

Input

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

Output

I WANT THIS TO BE UPPERCASE
url_escape

Identifies all characters in a string that are not allowed in URLS, and replaces the characters with their escaped variants.

Input

{{ "<hello> & <shopify>" | url_escape }}

Output

%3Chello%3E%20&%20%3Cshopify%3E

Math Filters

Math filters allow you to apply mathematical tasks. It can be linked and, as with any other filters, are applied in order of left to right.

ceil

Rounds an output up to the nearest integer.

Input

{{ 4.6 | ceil }}
{{ 4.3 | ceil }}

Output

5
5
divided_by

Divides an output by a number.

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
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
modulo

Divides an output by a number and returns the remainder.

Input

{{ 12 | modulo:5 }}

Output

2