This documentation is to help you use Liquid Filters within your website code.
Mathematical Filters
ABS
The abs filter returns the absolute value of a number.
HTML code
{{-101 | abs}}
Output
101
AT_LEAST
The at_least filter limits a number to a minimum value.
HTML code
{{4 | at_least: 5}}
{{4 | at_least: 3}}
Output
5 4
AT_MOST
The at_most filter limits a number to a maximum value.
HTML code
{{4 | at_most: 5}}
{{4 | at_most: 3}}
x
Output
4 3
CEIL
The ceil filter rounds up a number.
HTML code
{% assign dollar = 100.65 -%}
{{dollar | ceil}}
Output
101
DIVIDED_BY
The divided_by filter divides a number by another number.
HTML Code
{{100 | divided_by: 20}}
Output
5
FLOOR
The floor filter rounds down a number.
HTML Code
{{102.2 | floor}}
Output
102
MINUS
The minus filter subtracts a number from another number.
HTML Code
{{100 | minus: 20}}
Output
80
MODULO
The modulo filter divides the number by the modulo parameter and returns the remainder.
HTML Code
{{3 | modulo: 2}}
Output
1
PLUS
The plus filter add a number to another number.
HTML Code
{{103 | plus: 20}}
Output
123
ROUND
The round filter rounds up a number.
HTML Code
{{3.95 | round}}
Output
4
TIMES
The times filter multiplies a number by another number.
HTML Code
{{3 | times: 2}}
Output
6
String Manipulation Filters
APPEND
The append filter adds entered text to the end of the first part.
HTML Code
{% assign myColor = "red" -%}
{{mycolor | append: ' is my selected color'}}
Output
Red is my selected color
CAPITALIZE
The capitalize filter capitalizes the first letter in each word. Change 'sample text' to 'Sample Text'
HTML Code
{{'sample text with capitalization' | capitalize}}
Output
Sample Text With Capitalization
DOWNCASE
The downcase filter removes the capitalized first letters in each word. Change 'Sample Text' to 'sample text'.
HTML Code
<p>{{'Sample Text' | downcase}}</p>
Output
<p>sample text</p>
ESCAPE
The escape filter outputs HTML encoded instead of rendering in the browser.
HTML Code
{{"<h1>Escaped content</h1>" | escape}}
Output
<h1>Escaped content</h1>
LSTRIP
The lstrip filter is used to remove tabs, spaces, and newlines (all whitespace) from the left side of a string.
HTML Code
<p>{{' Too many spaces on left. More text.' | lstrip}}</p>
Output
<p>Too many spaces on left. More text.</p>
NEWLINE_TO_BR
The newline_to_br filter creates a line break using a <br /> tag for each new line break encountered within the text content.
HTML Code
<p>{% capture var -%} First line
Second line with break {% endcapture -%} {{ var | newline_to_br }}</p>
Output HTML
<p>First line<br />
Second line with break</p>
PREPEND
The prepend filter adds entered text to the beginning of the first part.
HTML Code
{% assign mycolor = "red" -%}
<p>{{myColor | prepend: 'My color is '}}</p>
Output
<p>My color is red</p>
REMOVE
The remove filter removes every occurrence of the declared text from the first part.
HTML Code
<p>{{'Sample text where all occurrence of "text" will be removed.' | remove: 'text'}}</p>
Output
<p>Sample where all occurrence of "" will be removed.</p>
REMOVE_FIRST
The remove_first filter removes only the first occurrence of the specified substring from a string.
HTML Code
<p>{{'I strained to see the train through the rain' | remove_first: "rain."}}</p>
Output
<p>I sted to see the train through the rain.</p>
REPLACE
The replace filter replace the word "text" with "string" in: 'Sample text. All occurrences of "text" will be removed.'
HTML Code
<p>{{'Sample text. All occurrences of "text" have been replaced.' | replace: 'text', 'string'}}</p>
Output
<p>Sample string. All occurrences of "string" have been replaced.</p>
REPLACE_FIRST
The replace_first filter replaces only the first occurrence of the first argument in a string with the second argument.
HTML Code
<p>{{"Take my protein pills and put my helmet on." | replace_first: "my", "your" }}</p>
Output
<p>Take your protein pills and put my helmet on..</p>
RSTRIP
The rstrip filter is used to remove tabs, spaces, and newlines (all whitespace) from the right side of a string.
HTML Code
<p>{{' Too many spaces on right ' | lstrip}}!</p>
Output
<p> Too many spaces on right!</p>
SLICE
The slice filter is used to return a substring of one or more characters beginning at the index specified by the first parameter. An optional second parameter specifies the length of the substring to be displayed. String indices are numbered start at 0
Input
<p>{{'blueberry' | slice: 0, 4}}</p>
Output
<p>blue</p>
STRIP
The strip filter removes tabs, spaces, and newlines (all whitespaces) from the left and right side of a string.
HTML Code
<p>{{' Has too many spaces ' | strip}}!</p>
Output
<p> Has too many spaces!</p>
STRIP_HTML
The strip_html filter is used to remove the HTML code from the string.
HTML Code
{{"<p><strong>My paragraph</strong><p>" | strip_html}}
Output
My paragraph
TRUNCATE
The truncate 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.
HTML Code
<p>{{'Sample text paragraph here' | truncate: 15, '...'}}</p>
Output
<p>Sample text</p>
TRUNCATEWORDS
The truncatewords filter is used to truncate the text output to the defined number of words. By default an ellipsis (...) is appended to the end of the truncated text string.
HTML Code
<p>{{"Sample truncated paragraph that will be shortened when rendered." | truncateword: 2}}</p>
Output
<p>Sample truncated...</p>
Custom Ellipsis
The truncatewords filter has an optional second parameter that specifies the characters to be appended to the truncated text. You can customize what you want to display.
HTML Code
<p>{{"Sample truncated paragraph that will be shortened when rendered." | truncateword: 2, "-"}}</p>
Output
<p>Sample truncated-</p>
No Ellipsis
You can also pass in an empty string as the second parameter to remove any appended characters.
HTML Code
<p>{{"Sample truncated paragraph that will be shortened when rendered." | truncateword: 2, ""}}</p>
Output
<p>Sample truncated</p>
UPCASE
The upcase filter applies capitalization to each letter in a string.
HTML Code
<p>{{'Sample text with uppercase' | upcase}}</p>
Output
<p>SAMPLE TEXT WITH UPPERCASE</p>
URL_DECODE
The url_decode filter converts any URL-unsafe characters in a string into percent-encoded characters. This is ideal for preventing spam bots from finding email addresses on a web page.
HTML Code
<p>{{ "%27The berries are fresh%21%27+said+Mark" | url_decode }}</p>
Output
<p> 'The berries are fresh!' said Mark</p>
URL_ENCODE
The url_encode filter converts any URL-unsafe characters in a string into percent-encoded characters. This is ideal for preventing spam bots from finding email addresses on a web page.
HTML Code
<p>{{ "mark@email.com" | url_encode }}</p>
Output
<p>mark%40email.com</p>
Array Manipulation Filters
FIRST
The first filter is used to return the first item of an array or a string of text.
HTML Code
{{"Picking fresh blueberries." | split: " " | first}}
Output
Picking
Without using the split filter you get the first character of a text string.
HTML Code
{{"Picking fresh blueberries." | first}}
Output
P
HTML Code
{% assign fruit = "raspberry, blackberry, apple, blueberry" | split: ", " %}
{{fruit.first}}
Output
raspberry
JOIN
The join filter joins the array elements and puts the separator between each element.
HTML Code
{% assign fruit = "blueberry, blackberry, raspberry, apple" | split: ", " -%}
{{fruit | join: " and "}}
Output
blueberry and blackberry and raspberry and apple
LAST
The last filter is used to return the last item of an array or a text string.
HTML Code
{{"Picking fresh blueberries." | split: " " | last}}
Output
blueberries.
Without the split filter you get the last character of the text string.
HTML Code
{{"Picking fresh blueberries." | last}}
Output
.
HTML Code
{% assign fruit = "raspberry, blackberry, apple, blueberry" | split: ", " %}
{{fruit.last}}
Output
blueberry
LIMIT
The limit filter is used to limit the number of items returned in an array or a text string.
HTML Code
{% assign limitArray = "1,2,3,4,5,6" | split: "," -%}
{% for items in limitArray | limit: 2 -%}<p>{{items}}</p>{% endfor -%}
Output
<p>1</p> <p>2</p>
HTML Code
{% assign limitString = "How many words does this return" | split: ' ' -%}
<p>{% for items in limitString | limit: 3 -%}{{items}} {% endfor -%}</p>
Output
<p>How many words</p>
REVERSE
The reverse filter reverses the order of the items in an array. Does NOT work on a text string.
HTML Input
{% assign fruit = "apples, raspberry, blackberry, blueberry" | split: ", " %}
{{ fruit | reverse | join: ", " }}
Output
blueberry, blackberry,raspberry,apples
SIZE
The size filter returns the number of characters in a string or the number of items in an array.
HTML Code
{{"Fresh blueberries" | size}}
Output
17
SORT
The sort filter is used to sort the array items in order.
HTML Code
{% assign fruit = "raspberry, blackberry, apple, blueberry" | split: ", " -%}
{{fruit| sort | join: ", "}}
Output
{% assign fruit= "apple, blackberry, blueberry, raspberry
SPLIT
The split filter is used to split the text and create an array of the items.
HTML Code
<p>{{'1,2,3,4,5' | split: ','}}</p>
Output
<p>12345</p>
UNIQ
The uniq filter is used to Removes any duplicate items in an array.
HTML Code
{% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}
{{ my_array | uniq | join: ", " }}
Output
ants, bugs, bees
Date Filters
DATE
The date filter converts a timestamp into another date format.
HTML Code
{{"March 14, 2016" | date: "MM - yyyy"}}
Output
03 - 2019
To get the current date, you can pass the special word "now" to the date filter.
HTML Code
The date is {{"now" | date: "MMMM %d, yyyy"}}
Output
The date is August 18, 2019
You can also use the {{globals.site.dateNow}} tag (See Liquid Globals) with the date filter. The current date is returned in this format: 2021-11-22T14:46:21.3962732-05:00. You can then convert the format as needed with the date filter.
HTML Code
The date is {{globals.site.dateNow | date: "MMMM %d, yyyy"}}
Output
The date is August 18, 2019
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 AM
- %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
Miscellaneous Filters
DEFAULT
The default filter sets a default value for any variable with no assigned value.
HTML Input
{% assign product_price = "" %}
${{product_price | default: 2.99}}
Output
$2.99
