Menu

Liquid is an open source templating language created by Shopify which can be used in your Email Design System. Part of liquid are the filters and in the context of Taxi these can be used to change the output of a field in your EDS.

This page covers all of the liquid filters you can use in Taxi. You can also read more in the Shopify documentation.

Append

This will append either a static value, or the value from a field to the end of another string.

For example, if you are pasting in image urls you could append .jpg to the url if someone accidentally misses this out. 

{% if image contains '.jpg' %}{{image}}{% else %}{{image | append: '.jpg'}}{% endif %}

Capitalize

This will make the text from a field capitalised. If you have text that always needs to be capitalised, use this filter so no one can forget to add this in. 

{{text | capitalize}}

'my headline' would become 'My headline'.

Divided_by

Divide the value of a number field by another number.

{{number | divided_by: 2}}

If the value of a field was 10, the output would be 5.

Downcase

This will make text lower case if there are any uppercase letters.

{{text | downcase}}

'TEXT' would become 'text'.

Escape

Replace characters from a field with escape sequences (for example encoded characters). This is often useful if you need to use the value from a field in a url.

{{text | escape}}

Minus

Subtract a number from the value of a number field.

{{number | minus: 6}}

If the value of a field was 10, the output would be 4.

Plus

Add a number to the value of a number field. This is often used for line height, to set it automatically higher than the size of the font.

replace-style="line-height:{{font_size | plus: 6}};"

If the value of a field was 10, the output would be 16.

Prepend

This enables you to add words or characters before the content of a field. For example if you paste in a hex code but accidentally miss out the # before the code, you could append this to the colour field.

{% if colour contains '#' %}{{colour}}{% else %}{{colour | prepend: '#'}}{% endif %}

Remove

Removes a specific word or character from a field. For example removing spaces from a link.

{{href | remove: ' '}}

Remove_first

Removes the first time a word or character appears in a field.

{{text | remove_first: 'word'}}

Replace

This replaces one word or character(s) in a field with another word or character(s). For example if your brand needs to use 'and' instead of '&' and you want to make sure no one includes an ampersand by accident.

{{text | replace: '&', 'and'}}

Replace_first

Replace the first time a word or character appears in a field with another word or character.

{{text | replace_first: '&', 'and'}}

Strip

Removes all whitespace from the value of a field.

{{text | strip}}

Strip_html

Removes all HTML from a field. This can be useful if someone pastes some text into the email which also contains some HTML.

{{text | strip_html}}

Times

Multiplies the number in a field by another number.

{{number | times: 3}}

If the value of a field was 10, the output would be 30.

Truncate

This limits the number of characters that can be used in a field.

{{text | truncate: 30}}

This means the text field can only have 30 characters.

For limiting characters we would recommend using expectations in your Email Design System. With these you can define a character limit in text fields to stop headlines or CTAs becoming too long.

Truncatewords

This limits the number of words that can be used in a field

{{text | truncatewords: 5}}

This means the text field can only have 5 words.

Truncate_html_words

The truncate filter also takes HTML into consideration when it defines the character limit. If you have some bold text the total characters include the <strong> tags. For example: <strong>This is my text</strong>

When you use the truncate filter on this text with a limit of 15 characters this will be the output: <strong>This

If you want to only include the text in the truncate character limit then you can use the truncate_html_text filter. 

{{text | truncate_html_text: 15}}

Upcase

Makes every character from a field upper case. For example if the headlines need to be uppercase. 

{{Text | upcase}}

'Headline' would become 'HEADLINE'.

← Back to /Code