Supported filters

Mathematical filters

ceil rounded up - {{ 4.3 | ceil }} is 5
divided_by

division - {{ 500 | divided_by: 20 }} is 25
Note: when you divide a number by another number which has one decimal the result will also have an output:
{{399 | divided_by: 2.0}} will output: 199.5

floor rounded down - {{ 4.6 |floor }} is 4
minus substraction - {{ 500 | minus: 20 }} is 480
modulo Divides the number by the modulo parameter and returns the remainder - {{ 3 | modulo: 2 }} is 1, {{ 6 | modulo: 2 }} is 0
plus addition - {{ 500 | plus: 20 }} is 520
round typical rounding - {{ 4.5 | round }} is 5 &{{ 4.4 |round }} is 4
round:x rounding by number of decimals - {{ 4.5612 | round: 2 }} is 4.56
times multiplication - {{ 500 | times: 2 }} is 1000

String manipulation filters

append {{ 'This is the first part' | append: ' appending the second part' }} outputs "This is the first part appending the second part"
capitalize {{ 'Sample text' | capitalize }} outputs "Sample Text"
downcase {{ 'Sample text' | downcase }} outputs "sample text"
escape {{ "<h1>Escaped heading</h1>" | escape }} outputs HTML encoded "&lt;h1&gt;Escaped heading&lt;/h1&gt;"
newline_to_br {% capture var %} One Two Three <br>heloo echo ecko lorem ipsum dolor sin amet {% endcapture %} {{ var | newline_to_br }} creates a line break for each new line encountered
pluralize {{ item.quantity | pluralize: 'item', 'items' }} outputs "item" if item.quantity is 1, or "items" if item.quantity is bigger then 1
prepend {{' this is the second part' | prepend: 'This is the first part' }} outputs "This is the first part this is thesecond part"
remove {{'Sample text. All occurences of "text" will be removed.' | remove: 'text' }} outputs 'Sample . All occurences of "" will be removed.'
replace {{'Sample text. All occurences of "text" will be replaced.' | replace: 'text', 'string' }} outputs 'Sample string. All occurences of "string" will be replaced.'
replace_first {{'Sample text text.' | replace_first: 'text', 'string' }} outputs "Sample string text"
slice {{ 'hello' | slice: -4, 2 }} keeps only the first two letters starting from position -4 in a string, where -1 is the last letter: 'el'.
split {{ '1,2,3,4,5 ' | split: ',' }} splits the text and creates an array ["1","2","3","4","5"]
strip {{ '      too many spaces      ' | strip }} Strips tabs, spaces, and newlines (all whitespace) from the left and right side of a string. Output: 'too many spaces'
lstrip {{ '      too many spaces      ' | lstrip }} Strips tabs, spaces, and newlines (all whitespace) from the left side of a string. Output: 'too many spaces      '
rstrip {{ '      too many spaces      ' | rstrip }} stripsStrips tabs, spaces, and newlines (all whitespace) from the right side of a string. Output: '      too many spaces'
strip_html {{ '<p>My paragraph</p>' | strip_html }} strips the HTML code from the string, this outputs "My paragraph"
strip_newlines {% capture var %} One Two Three <br>heloo echo ecko lorem ipsum dolor sin amet {% endcapture %} {{ var | strip_newlines: '///'}} in this example the strip_newlines: "///" filter removes the line breaks and replaces them with "///"
truncate {{ 'Sample text ' | truncate: 9, '...' }} outputs 'Sample... '
truncatewords {{ '<p>Lorem ipsum dolor sin amet</p>' | truncatewords: 2, '...' }} strips the paragraph to a specified number of words. Example output: "Lorem ipsum..."
unescape {{ "<div style='color:red'><h1>header</h1><p>this is a paragraph</p></div>" | unescape }} Opposite of escape, basically HTML decode.
upcase {{ 'Sample text' | upcase }} outputs "SAMPLE TEXT"

Array manipulation filters

limit array = [1,2,3,4,5,6]
{% for item in array limit:2 %}
This will limit the number of items returned from the array. In this case 1 and 2 will be returned
offset array = [1,2,3,4,5,6]
{% for item in array offset:2 %}
This will offset the items from the array. In this case items 3 and 4 will be returned.
You can combine both offset and limit.
join {{ myArray | join: "///" }} assuming myArray is an array joins the elements and puts the separator between each element
sort {{ myArray | sort }} assuming myArray is an array ["5","4","3"] ]the sort filter outputs ["3","4","5"]
first {{ myArray | first }} Will output the first item in an array
last {{ myArray | last }} Will output the last item in an array
map

array = [{ "id": 9683555, "name": "Childhood Dreams T-Shirt" }, { "id": 9683556, "name": "Kung-Fu Panda T-Shirt" }]

{{array | map: "name"}}

Accepts an array element's attribute as a parameter and creates a string from it's values: Childhood Dreams T-ShirtKung-Fu Panda T-Shirt

   

Date filters

site_date {{ globals.site.dateNow | date }} outputs "09-Jan-2015"
site_datetime {{ globals.site.dateNow | datetime }} outputs "09-Jan-2015 02:46 PM"
date_utc {{ globals.site.dateNow | date_utc }} converts a date to UTC (assuming that the date is always given in the site’s timezone)
date_add

{{ myDate | date_add: amount, datePart }}

myDate - filter input should be a date time object or a string convertible to a date time object

amount - an integer number or a string convertible to an integer number representing the amount of date or time units to add (if positive) or to subtract (if negative) from the input date time object

datePart - a string representing the date or time parts to be added or subtracted. The allowed values are:

  • "year"
  • "month"
  • "day"
  • "hour"
  • "minute"
  • "second"
  • "millisecond"

E.g. using either one of the two line below:

{% assign myDate = "2016-06-15T12:30:30.400" -%}
{% assign myDate = "2016-06-15T12:30:30.400" | convert: "date" -%}

and

{{ myDate | date_add: 1000, "year" }} will output 3016-06-15T12:30:30

{{ myDate | date_add: 3, "month" }} will output 2016-09-15T12:30:30

{{ myDate | date_add: 15, "day" }} will output 2016-06-30T12:30:30

{{ myDate | date_add: "20", "hour" }} will output 2016-06-16T08:30:30

{{ myDate | date_add: "-40", "minute" }} will output 2016-06-15T11:50:30

{{ myDate | date_add: 1800, "second" }} will output 2016-06-15T13:00:30

{{ myDate | date_add: -500, "millisecond" | date_add: 20, "hour" | date_add: -12, "month" | date: "yyyy-MM-ddThh:mm:ss.fff" }} will output 2015-06-16T08:30:29.900

If one of the parameters is of an incompatible type or value, the filter will not alter the input.

 

Date switches

Assuming the value of the dateTime field is 2014-12-09T23:00:00 here are the available switches you can use to format the date:

%d Outputs the day of the month - 18
dd The day of the month. Single-digit days will have a leading zero - 03
ddd The abbreviated name of the day of the week. - Tue
dddd The full name of the day of the week. - Tuesday
%h The hour in a 12-hour clock. Single-digit hours will not have a leading zero - 12
hh The hour in a 12-hour clock. Single-digit hours will have a leading zero - 12
%H The hour in a 24-hour clock. Single-digit hours will not have a leading zero - 0
HH The hour in a 24-hour clock. Single-digit hours will have a leading zero - 0
%m The minute. Single-digit minutes will not have a leading zero - 0
mm The minute. Single-digit minutes will have a leading zero - 00
%M The numeric month. Single-digit months will not have a leading zero - 9
MM The numeric month. Single-digit months will have a leading zero - 09
MMM The abbreviated name of the month, as defined in AbbreviatedMonthNames - sep.
MMMM The full name of the month, as defined in MonthNames - september
%s The second. Single-digit seconds will not have a leading zeroThe second. Single-digit seconds will not have a leading zero - 0
ss The second. Single-digit seconds will have a leading zero - 00
%t The first character in the AM/PM designator, if any - a
tt The AM/PM designator, if any - a.m.
%y The year without the century. If the year without the century is less than 10, the year is displayed with no leading zero - 14
yy The year without the century. If the year without the century is less than 10, the year is displayed with a leading zero - 14
yyyy The year in four or five digits (depending on the calendar used), including the century. Will pad with leading zeroes to get four digits. Thai Buddhist and Korean calendars both have five digit years; users selecting the "yyyy" pattern will see all five digits without leading zeros for calendars that have five digits. Exception: the Japanese and Taiwan calendars always behave as if "yy" was selected - 1914
\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 "\\" - 14

To output 14-6-18 use {{dateVariable | date: "%y-%M-%d"}} (mind the double quotes).

To output 1914\09\03 @ 12:00:00 a.m. use {{dateVariable | date: "yyyy\\MM\\dd @ hh:mm:ss tt"}}

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.

Spaces and any other characters that are not usable switches are rendered without the need for escaping.

timeSpan switches

Let's assume we have created a timeSpan variable by substracting one date from another:

 {% assign dateDiff = globals.site.dateNow | minus: myDate %}

Taking a presumed value of dateDiff being 5.02:39:20.2500250, we can format the date value of {{dateDiff}} with the following switches:

%d Outputs the number of whole days in the time interval - 5
dd The number of whole days in the time interval, padded with leading zeros as needed - 05
%h The number of whole hours in the time interval that are not counted as part of days. Single-digit hours do not have a leading zero - 2
hh The number of whole hours in the time interval that are not counted as part of days. Single-digit hours have a leading zero - 02
%m The number of whole minutes in the time interval that are not included as part of hours or days. Single-digit minutes do not have a leading zero - 39
mm The number of whole minutes in the time interval that are not included as part of hours or days. Single-digit minutes have a leading zero - 39
%s The number of whole seconds in the time interval that are not included as part of hours, days, or minutes. Single-digit seconds do not have a leading zero - 20
ss The number of whole seconds in the time interval that are not included as part of hours, days, or minutes. Single-digit seconds have a leading zero - 20
%f The tenths of a second in a time interval - 2
ff The /hundredths of a second in a time interval - 25
fff The milliseconds in a time interval - 250
ffff The ten-thousandths of a second in a time interval - 2500
fffff The hundred-thousandths of a second in a time interval - 25002
ffffff The millionths of a second in a time interval - 250025
fffffff The ten-millionths of a second (or the fractional ticks) in a time interval - 2500250
%F The tenths of a second in a time interval. Nothing is displayed if the digit is zero -2
FF The hundredths of a second in a time interval. Any fractional trailing zeros or two zero digits are not included - 25
FFF The milliseconds in a time interval. Any fractional trailing zeros are not included - 25
FFFF The ten-thousandths of a second in a time interval. Any fractional trailing zeros are not included - 25
FFFFF The hundred-thousandths of a second in a time interval. Any fractional trailing zeros are not included - 25002
FFFFFF The millionths of a second in a time interval. Any fractional trailing zeros are not displayed - 250025
FFFFFFF The ten-millions of a second in a time interval. Any fractional trailing zeros or seven zeros are not displayed - 250025
string Literal string delimiter - date:"'Result : 'dd'"'' will output - Result : 05
\ The escape character. If you want to display a character that would be normally interpreted as a switch, for example /ddd will output - d05

To output 5-3-13 use {{dateDiff}} (mind the double quotes).

To output Result : d05-h03-m18 use {{dateDiff | date:"'Result : '\ddd'-'\hhh'-'\mmm"}}

Do note whether the result is in the past or future system will return a value without any + or - signs. Output will be just the difference, e.g, d05-h03-m18

Other Filters

convert Converts variables into different formats. Possible dataTypes are:
  • string - {{ 3 | convert: "string" | json }} outputs "3"
  • number - {{ "3" | convert: "number" | json }} outputs 3 (this can now be used with the mathematical filters)
  • boolean - {{ "false" | convert: "boolean" | json }} outputs "false" (it is treated as a boolean variable)
  • date - {{ "2015-01-07" | convert: "date" }} outputs 2015-01-07T00:00:00 in dateTime format
json Displays the data passed in JSON format. For example rendering a single webapp item using - {{ webapp1.items[0] | json }} looks like:
{
 "itemid":"4646524",
 "name":"ABA",
 "urlWithHost":"http://abcd.com/car/ABA",
 "url":"/car/ABA",
 "releaseDate":"2014-06-18",
 "expiryDate":"9999-01-01",
 "lastUpdateDate":"2014-06-18",
 "counter":"1",
 "weight":"",
 "Make":"AC model",
 "Color":"red",
 "Country":"",
 "Review":"no review just yet"
}

Do note you need to make the webapp listing available in a collection before you can access the items in JSON format.

size Can be used to return the number of elements in an array or the number of characters in a string.
url_param_escape/ url_param_unescape

Encodes/decodes a parameter than can be appended to an URL.

{{ "<div> & <span>" | url_param_escape }} / {{ "&lt;hello&gt; &amp; &lt;shopify&gt;" | url_param_unescape }}

number

We use the format strings from .Net, which are available here and here.

By default, if no format string is specified, we use the "N2" format which displays numbers using two decimals and which also includes the group separator if necessary. 

Cultures that use dot '.' as the decimal separator ($ is used as a sample currency):            

  • {{ invoiceTotal | number }}: 1,050.00
  • {{ invoiceTotal | number: "N2" }}: 1,050.00
  • {{ invoiceTotal | number: "N4" }}: 1,050.0000
  • {{ invoiceTotal | number: "F2" }}: 1050.00
  • {{ invoiceTotal | number: "F2" }}: $1050.00

Cultures that use comma ',' as the decimal separator (EUR is used as a sample currency):            

  • {{ invoiceTotal | number }}: 1.050,00
  • {{ invoiceTotal | number: "N2" }}: 1.050,00
  • {{ invoiceTotal | number: "N4" }}: 1.050,0000
  • {{ invoiceTotal | number: "F2" }}: 1050,00
  • {{ invoiceTotal | number: "F2" }}: EUR1050,00
money {{ 145.9 | money }} Formats the price based on the associated currency. (USD145.9)
default Dear {{ customer.name | default: "customer" }} Sets a default value for any variable with no assigned value. Can be used with strings, arrays, and hashes