Skip to main content
All CollectionsEmailCampaign personalisation with Liquid
Filter Liquid outputs
Filter Liquid outputs

You can use filters on outputs to change the way that these outputs are displayed.

Gareth Burroughes avatar
Written by Gareth Burroughes
Updated over a week ago

The output is on the left of the pipe (|), and this output is what gets rendered The filter is on the right of the pipe, and this filter affects the output before it is rendered. For example:

Hello ##{{ contact.data.firstname }}, the current date is ##{{ account.datetime }}.

Output (for Ben): Hello ben, the current date is 17/04/2018 16:30:31.

This data can be changed by using the capitalize and date filters. For example:

Hello ##{{ contact.data.firstname | capitalize }}, the current date is ##{{ account.datetime | date: "%a %B %Y" }}.

Output (for Ben): Hello Ben, the current date is 17 April 2018.

An output can include multiple filters. For example:

##{{ account.datetime | date: "%a %B %Y" | upcase }}

Output: 17 APRIL 2018

Text filters

camelcase

Converts a string to camelcase. For example:

{{ "Henry the tiger-cat" | camelcase }}

Output: HenryTheTigerCat

capitalize

Changes the first character of a string to be upper case and the rest to be lower case. For example:

{{ "the Quick broWN FOX" | capitalize }}

Output: The quick brown fox

downcase

Convert an input string to lowercase. For example:

{{ "the Quick broWN FOX" | downcase }}

Output: the quick brown fox

upcase

upcase - convert an input string to uppercase. For example:

{{ "the Quick broWN FOX" | upcase }}

Output: THE QUICK BROWN FOX

size

Size returns the size of an array or string. For example:

{{ "the Quick broWN FOX" | size }}

Output: 19

You can also use the size property. For example:

{{ contact.data.firstname.size }}

replace

Replaces each instance of a substring within a string. For example:

{{ "http://wombles.bingbingfrog.com/wombles" | replace: 'womble','badger' }}

Output: http://badgers.bingbingfrog.com/badgers

replace_first

Replaces the first instance of a substring within a string. For example:

{{ "http://wombles.bingbingfrog.com/wombles" | replace_first: 'womble','badger' }}

Output: http://badgers.bingbingfrog.com/wombles

remove

Removes each occurrence of a substring from within a string. For example:

{{ "http://wombles.bingbingfrog.com/wombles" | remove: 'womble' }}

Output: http://s.bingbingfrog.com/s

remove_first

Removes the first occurrence of a substring from within a string. For example:

{{ "http://wombles.bingbingfrog.com/wombles" | remove_first: 'womble' }}

Output: http://s.bingbingfrog.com/wombles

truncate

Truncates a string down to n characters. It also accepts a second parameter that will append to the string. If no parameter is given then the string will be appended with 3 dots. The appended string is included in the character count. For example:

{{ "If you go down in the woods today you're sure of a big surprise" | truncate: 20 }}

Output: If you go down in...

{{ "If you go down in the woods today you're sure of a big surprise" | truncate: 20,'…(read more)' }}

Outputs: If you g…(read more)

truncate words

Truncates a string down to n words. It also accepts a second parameter that will append to the string. If no parameter is given then the string will be appended with 3 dots. For example:

{{ "If you go down in the woods today you're sure of a big surprise" | truncatewords: 5 }}

Output: If you go down in...

{{ "If you go down in the woods today you're sure of a big surprise" | truncatewords: 5,'…(read more)' }}

Output: If you go down in…(read more)

prepend

Prepends a string to the input. For example:

{{ "rabbits can see behind themselves but have got a blind spot right in front of their face" | prepend: "Did you know, " }}

Output: Did you know, rabbits can see behind themselves but have got a blind spot right in front of their face

append

Appends a string to the input. For example:

{{ "When I'm sad, I stop being sad and be awesome instead." | append: " True story." }}

Output: When I'm sad, I stop being sad and be awesome instead. True story.

slice

Takes a substring from an input starting after the nth character, where n is the first parameter. The length of the substring taken is the second parameter. For example:

{{ "With many cheerful facts about the square on the hypotenuse" | slice: 12,8 }}

Output: eerful f

{{ "With many cheerful facts about the square on the hypotenuse" | slice: -12,8 }}

Output: he hypot

split

Splits a string on a matching pattern. For example:

{{ "red and yellow and pink and green, orange and purple and blue" | split: "and" }}

Output: ["red "," yellow "," pink "," green, orange "," purple "," blue"]

md5

Converts a string into a MD5 hash. For example:

{{ "some string" | md5 }}

Output: 5ac749fbeec93607fc28d666be85e73a

Maths filters

minus

Subtracts from the input number. For example:

{{ 100 | minus: 2 }}

Output: 98
​

plus

Adds to the input number. For example:

{{ 100 | plus: 2 }}

Output: 102
​

times

Multiplies the input number. For example:

{{ 100 | times: 2 }}

Output: 200

divided_by

Divides the input. For example:

{{ 100 | divided_by: 2 }}

Output: 50

Note that if the input is an integer, so will the output be. For example:
​

{{ 100 | divided_by: 7 }}

Output: 14

round

Rounds the input to the nearest integer or specified number of decimals. For example:

{{ 101.99 | round: 1 }}

Output: 102.0

Numeric data stored as text

The round filter can also be used to convert a text value representing a number ("12.5") to a numeric value (12.5). This is useful when working with numeric data stored as text.

floor

Rounds the input down to the . For example:

{{ 101.99 | floor }}

Output: 101

Numeric data stored as text

The floor filter can convert a text value to a numeric value and round it down to the nearest integer (for example, "12.5" is converted to 12). This is useful when working with whole numbers while converting text values to numeric values.

modulo

Outputs the remainder when dividing by the given value. For example:

{{ 100 | modulo: 7 }}

Output: 2

money

Outputs the number as a currency string with the appropriate symbol and number of decimal places. For example:

{{ 100 |money: "GBP" }}

Output: £100.00

{{ 17.1 |money: "USD" }}

Output: $17.10

{{ 1000000 |money: "EUR" }}

Output: 1 000 000,00 €

Array filters

first

Gets the first element of the passed in array.

last

Gets the last element of the passed in array.

join

Join elements of the array with certain character between them. For example:

{{ "Conquest", "War", "Famine", "Death" | join: " and " }}

Output: Conquest and War and Famine and Death

sort

Sorts the elements of an array based on a given attribute of an element in the array. For example:

<!--{% assign products = account.insight.Products | sort: 'price' %}-->
<!--{% for product in products %}-->
{{ product.title }} {{ product.price }}<br/>
<!--{% endfor %}-->

Output: A list of products from the account.insight.Products collection starting with the cheapest and in ascending order of price.

size

Returns the size of an array (or string). For example:

{{ account.insight.Products | size }}

Output: An integer with the number of objects in the account.insight.Products collection.

You can also use the size property. For example:

{{ account.insight.Products.size }}

Date filters

Using date filters

These date filters convert the date to a string. Only use these if you just want to display the date in an email campaign, page, or form.

date

Formats the date in the specified format. For example:

{{ account.date | date: "%a, %b %d, %y" }}

Output: Tue, Apr 17, 2018

Only English date names are available.

add_days

Adds the specified number of days to the date. For example:

This voucher expires tomorrow, {{ account.date | add_days: 1 | date: "%b %d" }}

Output: This voucher expires tomorrow, Apr 18

(Where April 18 is tomorrow's date.)

Negative numbers can be used for subtracting days.

add_weeks

Adds the specified number of weeks to the date. Negative numbers can be used for subtracting weeks.

add_months

Adds the specified number of months to the date. Negative numbers can be used for subtracting months.

add_years

Adds the specified number of years to the date. Negative numbers can be used for subtracting years.

Date formatting

The following parameters can be used for formatting dates.

%a

Abbreviated weekday. For example:

{{ account.datetime | date: "%a" }}

Output: Tue

%A

Full weekday. For example:

{{ account.datetime | date: "%A" }}

Output: Tuesday

%b

Abbreviated month name. For example:

{{ account.datetime | date: "%b" }}

Output: Apr

%B

Full month name. For example:

{{ account.datetime | date: "%B" }}

Output: April

%c

Preferred local date and time representation. For example:

{{ account.datetime | date: "%c" }}

Output (depending on the locale of your account): 17/04/18 16:30:31

%d

Day of the month, zero-padded. For example:

{{ account.datetime | date: "%d" }}

Output: 05

%-d

Day of the month, not zero-padded. For example:

{{ account.datetime | date: "%-d" }}

Output: 5

%D

Formats the date in dd/mm/yyyy format. For example:

{{ account.datetime | date: "%D" }}

Output: 17/04/2018

%e

The blank padded day of the month. For example:

{{ account.datetime | date: "%e" }}

Output: ' 5'

%F

Returns the date component of the input in ISO 8601 format (yyyy-mm--dd). For example:

{{ account.datetime | date: "%F" }}

Output: 2018-04-17

%H

Hour of the day, 24-hour clock (00-23). For example:

{{ account.datetime | date: "%H" }}

Output: 16

%I

Hour of the date, 12-hour clock (1-12). For example:

{{ account.datetime | date: "%I" }}

Output: 4

%j

Day of the year. For example:

{{ account.datetime | date: "%j" }}

Output: 107

%k

Hour of the day, 24-hour clock (1-24). For example:

{{ account.datetime | date: "%k" }}

Output: 16

%m

Month of the year (01-12). For example:

{{ account.datetime | date: "%m" }}

Output: 04

%M

Minute of the hour (00-59). For example:

{{ account.datetime | date: "%M" }}

Output: 30

%p

The meridian indicator (AM/PM). For example:

{{ account.datetime | date: "%p" }}

Output: PM

%r

12-hour time (in %I:%M::S %p format). For example:

{{ account.datetime | date: "%r" }}

Output: 04:30:31 PM

%R

24-hour time (in %H:%M:%S format). For example:

{{ account.datetime | date: "%R" }}

Output: 16:30:31

%U

The number of the week in the current year, starting with the first Sunday as the first day of the week. For example:

{{ account.datetime | date: "%U" }}

Output: 16

%W

The number of the week in the current year, starting with the first Monday as the first day of the week. For example:

{{ account.datetime | date: "%W" }}

Output: 16

%w

The day of the week (0-6) with Sunday being 0. For example:

{{ account.datetime | date: "%w" }}

Output: 2

%x

Preferred local date representation. For example:

{{ account.datetime | date: "%x" }}

Output (depending on the locale of your account): 17/04/2018
or: 4/17/2018

%X

Preferred local time representation. For example:

{{ account.datetime | date: "%X" }}

Output (depending on the locale of your account): 16:30:31
or: 04:30:31 PM

%y

Year without the century (00-99). For example:

{{ account.datetime | date: "%y" }}

Output: 18

%Y

Year with the century. For example:

{{ account.datetime | date: "%Y" }}

Output: 2018

%z

Timezone offset from UTC. For example:

{{ account.datetime | date: "%z" }}

Output: +0100

KNOWN BUG: This currently does not work

%:z

Timezone offset from UTC with a colon. For example:

{{ account.datetime | date: "%:z" }}

Output: +01:00

KNOWN BUG: This currently does not work

%Z

Timezone abbreviated name. For example:

{{ account.datetime | date: "%Z" }}

Output: BST

KNOWN BUG: This currently outputs the timezone offset with a colon.

Strip HTML

To strip any HTML pulled through on a variable use | escape }} or | strip_html }}

Related Articles
Outputs and data objects
Use liquid filters to display contact insight data information in a email
Send an SMS using email
Variables for transactional email templates in BigCommerce
Shopify variables for transactional email templates
Did this answer your question?