Liquid Filters
Filters are simple methods, which modify your data. Filters have the following syntax:
{{ product.title | upcase }}
OUTPUT:
PINK DRESS
where upcase is a filter (which is just a method), product is an object, which is supplied for your template, and title is a property of this object.
Sometimes you might want to pass a parameter to your filter:
{{ product.description | truncate: 40 }}
OUTPUT:
This product has long description, whic
(which is a text, trancted to only first 40 characters).
In case it you want to pass several parameters to a filter:
{{ product.description | truncate: 40, '...' }}
OUTPUT:
This product has long description, w...
You can always concatenate several filters. They are applied from left to right.
{{ product.description | upcase | truncate: 40, '...' }}
OUTPUT:
THIS PRODUCT HAS LONG DESCRIPTION, W...
You can find the list of all available filters below:
json
Displays your object in a json form.
Example:
{{ category | json }}
Output:
{ "id": 1, "handle": "shoes", "name": "Shoes"}
money
Displays a number with a store currency symbol or its code. Cents precision is '0' if the number if whole, and '2' otherwise.
Example:
{{ product.price | money }}
Output: $15
money_with_currency
Displays a number with a store currency code and symbol.
Example:
{{ product.price | money_with_currency }}
Output: $15.00 USD
money_with_cents
Same as money, but cents precision is always '2'.
Example:
{{ product.price | money_with_cents }}
Output: $15.00
money_without_currency
Just formatted number.
Example:
{{ product.price | money_without_currency }}
Output: 15.00
without_cents
Price without cents.
Example:
{{ product.price | without_cents }}
Output: 14
upcase
Upcases text.
Example:
{{ product.title | upcase }}
Output: PINK DRESS
downcase
Downcases text.
Example:
{{ product.title | downcase }}
Output: pink dress
titleize
Titleizes text.
Example:
{{ product.title | titleize }}
Output: Pink Dress
size
Length of string.
Exmaple:
{{ "Shoes" | size }}
Output: 5
date
Formats date.
Example:
{{ product.created_at | date }}
Output: 2018-01-01
Example:
{{ 'now' | date: '%d %b %Y' }}
Output: 13 Sep 2018 (today's date)
pluck
Fetches a specific value from collection.
Example:
{{ products | pluck: 'name' }}
Output: ["Shoes", "Hats", "Dresses"]
numeric
Casts string to number.
Example:
{{ '4' | numeric }}
Ouput: 4
plus
Adds up another number.
Example:
{{ 4 | plus: 1 }}
Ouput: 5
minus
Substracts another number.
Example:
{{ 4 | minus: 1 }}
Ouput: 3
times
Multiplies by another number.
Example:
{{ 5 | times: 5 }}
Output: 25
append
Append a string:
{{ "a" | append: "b" }}
Output: ab
prepend
Prepend a string. Adds a string to the beginning of the specified string.
{{ "a" | prepend: "b" }}
Output: ba
escape
Escapes html
divided_by
Integer division by the specified number. The result is rounded down to the nearest integer.
{{ 11 | divided_by: 5 }}
Output: 2
first
Fetches first element of an array.
{% assign array = "shoes, hat, pants, shirt" | split: ", " %}
{{ array.first }}
Output: shoes
last
Fetches last element of an array.
{% assign array = "shoes, hat, pants, shirt" | split: ", " %}
{{ array.last }}
Output: shirt
floor
Rounds a number down to the nearest integer.
{{ 4.0 | floor }}
Output: 4
{{ 22.512 | floor }}
Output: 22
ceil
Rounds a number up to the nearest integer.
{{ 4.0 | ceil }}
Output: 4
{{ 22.512 | ceil }}
Output: 23
join
Joins elements of an array into a single string using the argument as a separator.
Splitting the array beforehand by a delimiter using split filter is necessary.
{% assign cars = "BMW, Audi, Mercedes, Volkswagen" | split: ", " %}
{{ cars | join: " or " }}
Output: BMW or Audi or Mercedes or Volkswagen
lstrip
Removes all whitespaces (spaces, tabs and newlines) from the beginning of a string.
{{ " Shoperb is a dream to use! " | lstrip }}
Output: Shoperb is a dream to use!
map
modulo
Returns the remainder of a division.
{{ 25 | modulo: 8 }}
Output: 1
{{ 123.456 | modulo: 12 }}
Output: 3.456
newline_to_br
remove
Remove each occurance from the string
{{ "ababab" | remove: 'a' }}
Output: bbb
remove_first
{{ "ababab" | remove_first: 'a' }}
Output: babab
Remove first occurnace from the string
replace
Replaces each occurance of string with another string
{{ "ababab" | replace: 'c' }}
Output: cbcbcb
replace_first
Replaces first occurance of string with another string
{{ "ababab" | replace_first: 'c' }}
Output: cbabab
reverse
Reverses string
{{ "string" | reverse }}
Output: gnirts
round
Rounds up integer
{{ 14.6 | round }}
Output: 15
rstrip
Strips whitespace on the right
{{ " string" | rstrip }}
Ouput: string
slice
{{ "hello" | slice: -3, 3 }}
Ouput: llo
split
{{ "a;b;a" | split: ';' }}
Ouput: ["a", "b", "c"]
strip_html
Removes html tags from string
{{ "<p>Hello</p>" | strip_html }}
Output: Hello
truncate
Truncates a string to X letters
{{ "truncate" | truncate: 5 }}
Output: trunc
truncatewords
Truncates a string to X words.
sort
Sorts data in given array or hash. If you have array of objects then you can send a property to sort by it. If you have hash then you can send variable "key" or "value" to sort by key of value.
Examples:
{% assign arr = "c,b,a" | split "," %}
{{arr | sort}} #=> ["a","b","c"]
{% assign arr_arr = [Product#(handle: "b"),Product#(handle: "a")] %}
{{arr_arr | sort: "handle"}} #=> [Product#(handle: "a"),Product#(handle: "b")]
{% assign hash = {b: :b, a: :a} %}
{{hash | sort: "key"}} => {a: :a, b: :b}