This documentation is to help you use Liquid Filters within your website code.
Mathematical Filters
{% assign dollar = 100.65 -%}
Declared Variable Value {{dollar}}
= 100.65
-
CEIL
The
Inputceil
filter rounds up a number.{{dollar | ceil}}
Output101
-
DIVIDED BY
The
Inputdivided_by
filter divides a number by another number.{{100 | divided_by: 20}}
Output5
-
FLOOR
The
Inputfloor
filter rounds down a number.{{102.2 | floor}}
Output102
-
MINUS
The
Inputminus
filter subtracts a number from another number.{{100 | minus: 20}}
Output80
-
MODULO
The
Inputmodulo
filter divides the number by the modulo parameter and returns the remainder.{{3 | modulo: 2}}
Output1
-
PLUS
The
Inputplus
filter add a number to another number.{{103 | plus: 20}}
Output123
-
ROUND
The
Inputround
filter rounds up a number.{{3.95 | round}}
Output4
-
TIMES
The
Inputtimes
filter multiplies a number by another number.{{3 | times: 2}}
Output6
String Manipulation Filters
{% assign myColor = "red" -%} Declared Variable Value: {{myColor}}
= red
-
APPEND
The
Inputappend
filter adds entered text to the end of the first part.{{mycolor | append: ' is my selected color'}}
OutputRed is my selected color
-
CAPITALIZE
The
Inputcapitalize
filter capitalizes the first letter in each word. Change 'sample text' to 'Sample Text'{{'sample text with capitalization' | capitalize}}
OutputSample Text With Capitalization
-
DOWNCASE
The
Inputdowncase
filter removes the capitalized first letters in each word. Change 'Sample Text' to 'sample text'{{'Sample Text' | downcase}}
Outputsample text
-
ESCAPE
The
Inputescape
filter outputs HTML encoded "<h1>Escaped content</h1>"{{"<h1>Escaped content</h1>" | escape}}
Output
<h1>Escaped content</h1>
-
PLURALIZE
The
Inputpluralize
filter outputs the plural version of a item.{{"<h1>quantity | pluralize: 'item', 'items'}}
Output -
PREPEND
The
Inputprepend
filter adds entered text to the beginning of the first part.<p>{{myColor | prepend: 'My color is '}}</p>
OutputMy color is red
-
REMOVE
The
Inputremove
filter removes every occurrence of the declared text from the first part.<p>{{'Sample text where all occurrence of "text" will be removed.' | remove: 'text' }}</p>
OutputSample where all occurrence of "" will be removed.
-
REPLACE
The
Inputreplace
filter replace the word "text" with "string" in: 'Sample text. All occurrences of "text" will be removed.'<p>{{'Sample text. All occurrences of "text" have been replaced.' | replace: 'text', 'string'}}</p>
OutputSample string. All occurrences of "string" have been replaced.
-
SLICE
The
Inputslice
filter is used to keep only the first two letters starting from position -4 in a string, where -1 is the last letter.<p>{{'sprout' | slice: -4, 2}}</p>
Outputsp
-
SPLIT
The
Inputsplit
filter is used to split the text and create an array of the items. For example: ["1","2","3","4","5"].{{'1,2,3,4,5' | split: ','}}
Output1,2,3,4,5
-
STRIP
The
Inputstrip
filter removes tabs, spaces, and newlines (all whitespaces) from the left and right side of a string.{{' Has too many spaces ' | strip}}
OutputHas too many spaces
-
LSTRIP
The
Inputlstrip
filter is used to remove tabs, spaces, and newlines (all whitespaces) from the left side of a string.{{' Too many spaces on left. More text.' | lstrip}}
OutputToo many spaces on left. More text.
-
RSTRIP
The
Inputlstrip
filter is used to remove tabs, spaces, and newlines (all whitespace) from the left side of a string.{{' Too many spaces on right ' | rstrip}}
OutputToo many spaces on right
-
STRIP_HTML
The
Inputstrip_html
filter is used to remove the HTML code from the string.{{<h1><strong>My paragraph</strong><h1>' | strip_html}}
OutputMy paragraph
-
TRUNCATE
The
Inputtruncate
filter is used to truncate the string output to the defined number of characters. The truncate amount also includes spaces and the number of characters used is the read more identifier.{{'Sample text paragraph here' | truncate: 15, '...'}}
OutputSample text ...
-
TRUNCATE_WORDS
The
Inputtruncate_words
filter is used to truncate the paragraph output to the defined number of words. The truncate amount also includes spaces and the number of characters used is the read more identifier.{{'Sample text paragraph' | truncate_words: 2, '...'}}
OutputSample text
-
UNESCAPE
The
Inputunescape
filter is the opposite of escape. Basically HTML decode the string.{{"<h1><div style='color:red'>Unescaped content</h1>" | unescape}}
Output -
UPCASE
The
Inputupcase
filter applies capitalization to each letter in a string.{{'Sample text with uppercase' | upcase}}
OutputSAMPLE TEXT WITH UPPERCASE
Array Manipulation Filters
LIMIT
The limit
filter limits the number of items returned from the array. In this case 1 and 2 will be returned. Can be combined with OFFSET
.
Input
{% assign limitArray = "1,2,3,4,5,6" | split: ',' -%} {% for item in limitArray limit:2 -%}<p>{{item}}</p>{% endfor -%}
Output {% assign limitArray = "1,2,3,4,5,6" | split: ',' -%}
{% for item in limitArray limit:2 -%}
{{item}}
{% endfor -%}
OFFSET
The offset
filter offsets the items from the array. In this case items 4, 5 and 6 will be returned. Can be combined with limit
.
Input
{% assign offsetArray = "1,2,3,4,5,6" | split: ',' -%} {% for item in offsetArray offset:3 -%}<p>{{item}}</p>{% endfor -%}
Output {% assign offsetArray = "1,2,3,4,5,6" | split: ',' -%}
{% for item in offsetArray offset:3 -%}
{{item}}
{% endfor -%}
JOIN
The {{join}}
filter joins the array elements and puts the separator between each element.
Input
{{joinArray | join: "/"}}
Output {% assign joinArray = "1,2,3,4,5,6" | split: ',' -%}
{{joinArray | join: "/"}}
SIZE
The {{size}}
filter returns the number of characters in a string or the number of items in an array.
Input
{{"Fresh blueberries" | size}}
Output
17
or
Input
{% assign fruitArray = "blueberries, blackberries, raspberries, strawberries" | split: ", " | size -%}
Output
4
SORT
The {{sort}}
filter is used to sort the array items in order.
Input
{% assign sortArray = "5,2,1,4,3,6" -%} {{sortArray | sort}}
Output {% assign sortArray = "5,2,1,4,3,6" -%}
{{sortArray | sort}}
FIRST
The {{first}}
filter will output the first item in an array [6,2,5,4,1,3].
Input
{% assign firstArray = "6,2,5,4,1,3" -%} {{firstArray | first}}
Output {% assign firstArray = "6,2,5,4,1,3" -%}
{{firstArray | first}}
LAST
The {{last}}
filter will output the last item in an array [6,2,5,4,1,3].
Input
{% assign lastArray = "6,2,5,4,1,3" -%} {{lastArray | last}}
Output {% assign lastArray = "6,2,5,4,1,3" -%}
{{lastArray | last}}
MAP
Accepts an array element's attribute as a parameter and creates a string from it's values.
{% assign mapArray = { "id": 9683555, "name": "Childhood Dreams T-Shirt" }, { "id": 9683556, "name": "Kung-Fu Panda T-Shirt" } -%} {{MapArray | map: "name"}}
Date Filters
DATE
The {{date}}
filter outputs the current server date.
Input
{{globals.site.dateNow | datetime}}
Output
{{globals.site.dateNow | date}}
DATETIME
The {{date}}
filter outputs the current server date and time.
Input
{{globals.site.dateNow | date}}
Output
{{globals.site.dateNow | datetime}}
Date Switches
- %d - outputs the day of the month. Example: 18
- dd - outputs the day of the month using two digits format. Single digit days will have a leading zero. Example: 03
- ddd - outputs the abbreviated name of the day of the week. Example: Tue
- dddd - outputs the full name of the day of the week. Example: Tuesday
- %h - outputs the hour in a 12-hour clock. Single digit hours will not have a leading zero. Example: 3
- hh - outputs the hour in a 12-hour clock. Single digit hours will have a leading zero. Example: 03
- %H - outputs the hour in a 24-hour clock. Single digit hours will not have a leading zero. Example: 9
- HH - outputs the hour is a 24-hour clock. Single digit hours will have a leading zero. Example: 09
- %m - outputs the minute. Single digit minutes will not have a leading zero. Example: 13
- mm - outputs the minute. Single digit minutes will have a leading zero. Example 09
- %M - outputs the numeric month. Single digit months will not have a leading zero. 9
- MM - outputs the numeric month. Single digit months will have a leading zero. 09
- MMM - outputs the abbreviated name of the month. Example: Aug
- MMMM - outputs the full name of the month. Example: August
- %s - outputs the second. Single digit seconds will not have a leading zero. Example: 6
- ss - outputs the second. Single digit seconds will have a leading zero. Example: 06
- %t - outputs the first character in the AM/PM designator. Example: a
- tt - outputs the AM/PM designator. Example A.M.
- %y - outputs the year without the century. Single digit years will not have a leading zero. Example 14 for the year 2014
- yy - outputs the year with the century. Single digits years will have a leading zero. Example 09 for the year 2009
- yyyy - outputs the year with the century in four or five digits (depending on the calendar used). Leading zeros will be added to get four digits. Example: 2019
- /c - Where c is any character. Displays the character literally. Useful for escaping characters that are usually rendered as switches (m, h, s, etc.) To display the backslash character, use "\\".
Note: To use "\" (the backslash character) as separator for date elements you need to escape it in the liquid tag. Using "\\" renders "\" in the front-end.
Misc Filters
-
CONVERT
The
convert
filter converts variables into another format. Possible datatypes for conversions:string
Outputs the value as a string.
Input{{3 | convert: 'string"}}
Output{{3 | convert: "string"}}
number
Outputs a number that can now be used with the Mathematical filters.
Input{{"3" | convert: 'number"}}
Output{{"3" | convert: "number"}}
boolean
Outputs "false" and is treated as a boolean variable.
Input{{"false" | convert: 'boolean"}}
Output{{"false" | convert: "boolean"}}
date
Outputs the value in the dataTime format 2015-01-07T00:00:00.
Input{{"2019-08-01" | convert: 'date"}}
Output{{"2019-08-01" | convert: "date"}}
-
NUMBER
Coming soon.
-
MONEY
Coming soon.
-
DEFAULT
Sets a default value for any variable with no assigned value. Can be used with strings, arrays, and hashes.
InputWelcome {{customer.name | default: "Customer"}}
OutputWelcome {{customer.name | default: "Customer" }}
Comments
0 comments
Please sign in to leave a comment.