Modifiers (Liquid Filters)

Liquid filters (also simply known as modifiers) are functions, written in the Shopify Liquid template language, that change the output of numbers, strings, variables, and Liquid objects.

To apply a Liquid filter to a Liquid object, place a pipe character | after the object and its attribute, and then specify the necessary filter: {{ object.attribute | filter }}

You can consequenty apply several Liquid filters to one variable: {{ object.attribute | filter1 | filter2 }}. The filters are applied from left to right.

Example

Here's how you would apply truncation and capitalization filters to the product's title:

INPUT

{{ product.title | truncate: 13, '' | capitalize }}

OUTPUT
<!-- Original title: "gaming marker Maker Starter Kit" -->
Gaming Marker

String Filters

String filters change the outputs and variables of the string type.

append

Appends characters to the string.

Example of using append

INPUT

{% assign text = "sales_banner" %}
{{ text | append: '.jpg' }}

OUTPUT

sales_banner.jpg

capitalize

Capitalizes the first letter of each word in the string.

Example of using capitalize

INPUT

{% assign text = "capitalize me" %}
{{ text | capitalize }}

OUTPUT

Capitalize Me

downcase

Makes all characters of the string lowercase.

Example of using downcase

INPUT

{{ product.title | downcase }}

OUTPUT
<!-- product.title = "RED Jacket" -->
red jacket

escape

Replaces all special characters in the string with escape sequences so that the string can be used in a URL.

NOTE

The browser will visually display escape symbols as HTML tags.

Example of using espace

INPUT

{{ product.title | escape }}

OUTPUT
<!-- product.title = "<p>Red Jacket</p>" -->
&lt;p&gt;Red Jacket&lt;/p&gt;

escape_once

Replaces special characters in the string with escape sequences, but without changing already existing escaped entities.

NOTE

The browser will visually display escape symbols as HTML tags.

Example of using escape_once

INPUT

{{ product.title | escape_once }}

OUTPUT
<!-- product.title = "&lt;Red & Jacket&lt;" -->
&lt;Red &amp; Jacket&lt;

newline_to_br

Inserts a <br> linebreak HTML tag in front of each line break in the string.

Example of using newline_to_br

INPUT

{{ product.body_html | newline_to_br }}

OUTPUT
<!-- product.body_html = "Gaming Marker 
Maker
Starter
Kit" -->
Gaming Marker
<br/>
Maker
<br/>
Starter
<br/>
Kit

prepend

Prepends characters to the string.

Example of using prepend

INPUT

{{ product.title | prepend: 'Bestseller ' }}

OUTPUT
<!-- product.title = "Gaming Marker" -->
Bestseller Gaming Marker

remove

Removes all occurrences of a given substring from the string.

Example of using remove

INPUT

{{ product.title | remove: 'Holiday sale' }}

OUTPUT
<!-- product.title = "Holiday sale Gaming Marker Holiday sale" -->
Gaming Marker

remove_first

Removes the first occurrence of a given substring from the string.

Example of using remove_first

INPUT

{{ product.title | remove_first: 'Holiday sale' }}

OUTPUT
<!-- product.title = "Holiday sale Gaming Marker Holiday sale" -->
Gaming Marker Holiday sale

replace

Replaces all occurrences of a given substring with another substring.

Example of using replace

INPUT

{{ product.title | replace: 'Hot Sale', 'Bestseller' }}

OUTPUT
<!-- product.title = "Hot Sale Gaming Marker" -->
Bestseller Gaming Marker

replace_first

Replaces the first occurrence of a given substring with another substring.

Example of using replace_first

INPUT

{{product.title | replace_first: 'Hot Sale', 'Bestseller' }}

OUTPUT
<!-- product.title = "Hot Sale Gaming Marker Hot Sale" -->
Bestseller Gaming Marker Hot Sale

singular

Converts a plural word into its singular form.

Example of using singular

INPUT

{{ product.product_type | singular }}

OUTPUT
<!-- product.product_type = Jackets -->
Jacket

size

Returns the number of characters in the string.

Example of using size for strings

INPUT

{{ product.title | size }}

OUTPUT
<!-- product.title = "Gaming marker" -->
13

slice

Returns a substring of the given length, starting at the specified index. Indexing starts from 0.

If the length of the substring isn't specified, only 1 character is included in the substring. You can pass a different length of the substring as an optional second argument.

Example of using slice

INPUT

{{ product.title | slice: 0 }}

OUTPUT
<!-- product.title = "Gaming marker" -->
G

To change the default length of the substring, pass the desired length as a second parameter in such way:

INPUT

{{ product.title | slice: 0, 5 }}

OUTPUT
<!-- product.title = "Gaming marker" -->
Gamin

split

Splits the string by a given substring into an array of strings.

Example of using split

INPUT
{% assign title = product.title | split: ' ' %}
{% for word in title %}
{{ word }} - 
{% endfor %}

OUTPUT
<!-- product.title = "Gaming Marker Maker Starter Kit" -->
Gaming - Marker - Maker - Starter - Kit -

strip

Removes all whitespace characters (tabs, spaces, and newlines) from the left and the right sides of the string. This filter does not change the whitespace characters between words.

Example of using strip

INPUT

{{ product.title | strip }}

OUTPUT
<!-- product.title = "  Gaming    Marker Maker Starter  Kit " -->
Gaming    Marker Maker Starter  Kit

strip_emoji

Removes all emojis and special characters from the string.

Example of using strip_emoji

INPUT

{{ product.body_html | strip_emoji }}

OUTPUT
<!-- product.body_html = "Smoothie Maker To Go ✅🏆🍟" -->
Smoothie Maker To Go

strip_html

Removes all HTML tags from the string.

Example of using strip_html

INPUT

{{ product.body_html | strip_html }}

OUTPUT
<!-- product.body_html = "<u>Red</u> Jacket" -->
Red Jacket

strip_newlines

Removes all line breaks and newlines from the string.

Example of using strip_newlines

INPUT

{{ product.body_html | strip_newlines }}

OUTPUT
<!-- product.body_html = "Gaming 
Marker
Maker" -->
Gaming Marker Maker

truncate

Truncates the string down to a given number of characters.

If the given number of characters is less than the string's length, an ellipsis ... is appended to the truncated string and is included in the character count. You can pass a different appended substring as an optional second argument.

Example of using truncate

Here is the default behaviour of this filter:

INPUT

{{ product.description | truncate: 20 }}

OUTPUT
<!-- product.description = "Bestseller product during the holiday season this year" -->
Bestseller produc...

To change the default ... appended substring, pass the desired substring as a second parameter in such way:

INPUT

{{ product.description | truncate: '20', 'ts!' }}

OUTPUT
<!-- product.description = "Bestseller product during the holiday season this year" -->
Bestseller products!

To remove the appended substring altogether, pass an empty string '' as a second parameter:

INPUT

{{ product.description | truncate: '20', '' }}

OUTPUT
<!-- product.description = "Bestseller product during the holiday season this year" -->
Bestseller product d

truncatewords

Truncates the string down to a given number of words.

If the given number of words is less than the string's total word count, an ellipsis ... is appended to the truncated string. You can pass a different appended substring as an optional second argument.

Example of using truncatewords

Here is the default behaviour of this filter:

INPUT

{{ product.description | truncatewords: 5 }}

OUTPUT
<!-- product.description = "Bestseller product during the holiday season this year" -->
Bestseller product during the holiday...

To remove the appended substring, pass an empty string '' as a second parameter:

INPUT

{{ product.description | truncatewords: 5, '' }}

OUTPUT
<!-- product.description = "Bestseller product during the holiday season this year" -->
Bestseller product during the holiday

upcase

Makes all characters of the string uppercase.

Example of using upcase

INPUT

{{ product.title | upcase }}

OUTPUT
<!-- product.title = "gaming marker" -->
GAMING MARKER

Money filters

Money filters change the outputs of the prices.

currency

Adds the currency letter code.

Example of using currency

INPUT

{{ variant.price | currency }}

OUTPUT

1.47 EUR

convert_to_currency

Converts product prices from the store's default currency into a different one.

Mulwi can use currency exchange rates provided by either Shopify or European Central Bank. You can select which rates to use in the app's settings.

Example of using convert_to_currency

INPUT

{{ variant.price | convert_to_currency: 'USD' }}

OUTPUT
<!-- variant.price = 1.47 EUR -->
1.67 USD

money_without_currency

Formats the price with two decimal places (without rounding).

Example of using money_without_currency

INPUT

{{ product.price | money_without_currency }}

OUTPUT
<!-- product.price = 21.12345 -->
21.12

Math filters

Math filters apply mathematical operations to the outputs and variables of the numeric type.

ceil

Rounds the number up to the nearest integer.

Example of using ceil

INPUT

{% assign number = 4.3 %}
{{ number | ceil }}

OUTPUT
<!-- number = 4.3 -->
5

divided_by

Divides the number by a given value.

Example of using divided_by

INPUT

{{ product.price | divided_by: 10 }}

OUTPUT
<!-- product.price = 200 -->
20

floor

Rounds the number down to the nearest integer.

Example of using floor

INPUT

{{ product.price | floor }}

OUTPUT
<!-- product.price = 4.6 -->
4

minus

Subtracts a given value from the number.

Example of using minus

INPUT

{{ product.price | minus: 15 }}

OUTPUT
<!-- product.price = 20 -->
5

modulo

Returns the remainder of a division operation by a given value.

Example of using modulo

INPUT

{{ product.price | modulo: 2 }}

OUTPUT
<!-- product.price = 21 -->
1

round

Rounds the number to the nearest integer.

You can pass an optional argument to specify the number of decimal places to round to.

Example of using round

INPUT

{{ product.price | round }}

OUTPUT
<!-- product.price = 2.3657 -->
2

To round the number to a certain decimal place, pass the desired number of decimal places as a parameter in such way:

INPUT

{{ product.price | round: 2 }}

OUTPUT
<!-- product.price = 2.3657 -->
2.37

times

Multiplies the number by a given value.

Example of using time

INPUT

{{ product.price | times: 2.5 }}

OUTPUT
<!-- product.price = 10 -->
25

Array filters

Array filters change the outputs of arrays.

find

Returns the first item in an array with a specific property value. For more information, see the Shopify documentation.

Example of using find

INPUT

{% assign collection = context.collections | find: "id", 284736127174 %}
{{ collection.title }}

OUTPUT
<!-- context.collections contains a collection with id 284736127174 titled "Playsets" -->
Playsets

first

Returns the first item of the array.

Example of using first

INPUT

{{ variant.tags | first }}

OUTPUT
<!-- variant.tags = [shoes summer women] -->
shoes

index

Returns the item of the array located at a specified index. Indexing starts from 0.

Example of using index

INPUT

{{ variant.tags | index: 0 }}

OUTPUT
<!-- variant.tags = [apparel accessories women] -->
apparel

join

Joins the items of the array into a string using the specified characters as a separator.

Example of using join

INPUT

{{ variant.tags | join: ', ' }}

OUTPUT
<!-- variant.tags = [summer beach accessories] -->
summer, beach, accessories

last

Returns the last element of the array.

Example of using last

INPUT

{{ variant.tags | last }}

OUTPUT
<!-- variant.tags = [summer beach accessories] -->
accessories

map

Extracts the given attribute from the array's items and returns a new array with the extracted values.

Example of using map

INPUT
<products>
{% for product in context.products %}
{% assign variant_prices = product.variants | map: 'price' %}
<item>
  {% for variant_price in variant_prices %}
      <price>{{ variant_price }}</price>
  {% endfor %}
</item>
{% endfor %}
</products>

OUTPUT
<products>
  <item>
    <price>26</price>
  </item>
  <item>
   <price>32</price>
  </item>
</products>

reverse

Reverses the order of items in the array.

Example of using reverse

INPUT

{{ product.tags | reverse }}

OUTPUT
<!-- product.tags = [toys summer beach] -->
[beach summer toys]

size

Returns the number of items in the array.

Example of using size for array

INPUT

{{ product.tags | size }}

OUTPUT
<!-- product.tags = [shoes clothes toys] -->
3

slice

Returns a subset with the given number of array items, starting at the specified index. Indexing starts from 0.

If the number of items in the subset isn't specified, only 1 item is included in the subset. You can pass a different number of items in the subset as an optional second argument.

Example of using slice

INPUT

{{ product.tags | slice: 0 }}

OUTPUT
<!-- product.tags = [shoes clothes toys] -->
shoes

To change the default number of items in the subset, pass the desired number of items as a second parameter in such way:

INPUT

{{ product.tags | slice: 0, 2 | join: ', ' }}

OUTPUT
<!-- product.tags = [shoes clothes toys] -->
shoes, clothes

sort

Sorts the items of the array by a given attribute of the array's item.

Example of using sort

INPUT

{% assign prices = '67, 12, 99, 23, 56' | split: ',' %}
{{ prices | sort }}

OUTPUT

[12 23 56 67 99]

where

Creates an array that includes only the objects with a given attribute value.

Example of using where

INPUT
{% for product in context.products %}
  <![CDATA[{{ product.variants | where: "in_stock" | map: 'option1' | join: ', ' }}]]>
{% endfor %}

OUTPUT

black, yellow, blue, white

You can also achieve the same result, but without the filter, in such way:

INPUT
{% for product in context.products %}
 {% if product.title contains 'TOY' %}
  <item>
    <name>{{ product.title }}</name>
   </item>
 {% endif %}
{% endfor %}

OUTPUT
<item>
   <name>TOY Mobile Command Center</name>
</item>
<item>
   <name>TOY Fun Family</name>
</item>
<item>
   <name>TOY Juniors</name>
</item>

Additional filters

Additional filters serve other purposes that aren't exclusively related to a single data type.

date

Displays a timestamp into the given format.

Here are the most commonly used format directives:

%a - the abbreviated day of the week (Mon)
%b - the abbreviated month name (Jan)
%^b - uppercased value (JAN)
%d - zero-padded day of the month (01..31)
%-d - no-padded day of the month (1..31)
%y - year (00..99)
%k - an hour of the day, 24-hour clock, blank-padded ( 0..23)
%M - minute of the hour (00..59)

For more information about the date format directives, please refer to the official Ruby documentation.

Example of using date

INPUT

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

OUTPUT
<!-- product.variant_created_at = "2022-04-25 16:15:22 +0300 EEST" -->
Mon, Apr 25, 22

default

Sets a default value for a variable with no assigned value.

Example of using default

INPUT

{{ price | default: 1.99 }}

OUTPUT
<!-- price = "" -->
1.99

debug

Prints out a Liquid object for you to inspect it.

Example of using debug

INPUT

{{ product.title | debug }}

OUTPUT
<!-- product.title = "Gaming Market Maker" -->
debug(Gaming Market Maker)

img_url

Resizes the image into the given dimensions.

Example of using img_url

INPUT
<!-- exact dimensions -->
{{ product.image_url | img_url: "300x300" }}

<!-- changing only width -->
{{ product.image_url | img_url: "600x" }}

<!-- changing only height -->
{{ product.image_url | img_url: "x300" }}

json_parse

Converts a JSON string containing an object into a Liquid object with nested properties.

Example of using json_parse

INPUT
{% assign loc = product.metafields.custom.boat_location | json_parse %}

<boat_location>
  <city>{{ loc.address_city }}</city>
  <state>{{ loc.address_state }}</state>
  <zip>{{ loc.address_zip }}</zip>
  <phone>{{ loc.phone }}</phone>
</boat_location>

OUTPUT
<boat_location>
  <city>Springville</city>
  <state>UT</state>
  <zip>84663</zip>
  <phone>(801) 491-3710</phone>
</boat_location>

json_array

Converts a JSON string containing an array into an array of Liquid objects that you can iterate over.

Example of using json_array

INPUT
{% assign tags = product.metafields.custom.tag_list | json_array %}

{% for tag in tags %}
  {{ tag }}
{% endfor %}

OUTPUT
shoes
clothes
toys

metafield_tag

Converts a metafield's JSON object into an HTML string.

Example of using metafield_tag

INPUT

{{ product.metafields.my_fields.rich_text_meta | metafield_tag }}

OUTPUT

Some HTML text from rich_text_meta

t

Translates the text into another language.

You can pass a two-letter ISO 639 code as an optional argument to specify the translation language explicitly. In this case, Mulwi will always translate text into the given locale, regardless of the language set in feed's translation settings.

If the optional argument isn't specified, the text will be translated into the language set in feed's translation settings. For more information about changing the feed translation language, please visit the Translate the feed page.

Example of using t

INPUT

{{ product.body_html | t }}

OUTPUT
<!-- product.body_html = "Red Jacket" -->
Chaqueta Roja

To change the default translation language, pass the desired locale's code as a parameter in such way:

INPUT

{{ product.body_html | t: 'de' }}

OUTPUT
<!-- product.body_html = "Red Jacket" -->
Rote Jacke

tt

Loads a translation from your Shopify translation apps.

Unlike t, tt is applied to the whole variant or product object. It takes two parameters: the field name and a two-letter ISO 639 code of the language.

If a product has no translation for the given language, tt returns the text in the Default translation language of the feed. To get the original text instead, choose your store's language as the Default translation language, or use attributes with the _orig suffix. For more information about exporting several languages in one feed, please visit the Use multiple translation languages in one feed section.

Example of using tt

INPUT

{{ variant | tt: 'title', 'es' }}

OUTPUT
<!-- variant.title = "Red Jacket" -->
Chaqueta Roja

To load a translation of another field, pass its name as the first parameter in such way:

INPUT

{{ variant | tt: 'body_html', 'de' }}

OUTPUT
<!-- variant.body_html = "Red Jacket" -->
Rote Jacke

To load translations for all languages selected in the feed, use tt inside a loop over context.feed.locales:

INPUT
{% for locale in context.feed.locales %}
{{ locale }}: {{ variant | tt: 'title', locale }}
{% endfor %}

OUTPUT
<!-- variant.title = "Red Jacket", selected languages: es, de -->
es: Chaqueta Roja
de: Rote Jacke

NOTE

tt works only with Shopify translation apps. To translate text with Google Translate, DeepL or Weglot, use the t filter.

Example

String Filters​

append​

capitalize​

downcase​

escape​

NOTE

escape_once​

NOTE

newline_to_br​

prepend​

remove​

remove_first​

replace​

replace_first​

singular​

size​

slice​

split​

strip​

strip_emoji​

strip_html​

strip_newlines​

truncate​

truncatewords​

upcase​

Money filters​

currency​

convert_to_currency​

money_without_currency​

Math filters​

ceil​

divided_by​

floor​

minus​

modulo​

round​

times​

Array filters​

find​

first​

index​

join​

last​

map​

reverse​

size​

slice​

sort​

where​

Additional filters​

date​

default​

debug​

img_url​

json_parse​

json_array​

metafield_tag​

t​

tt​

NOTE

String Filters

append

capitalize

downcase

escape

escape_once

newline_to_br

prepend

remove

remove_first

replace

replace_first

singular

size

slice

split

strip

strip_emoji

strip_html

strip_newlines

truncate

truncatewords

upcase

Money filters

currency

convert_to_currency

money_without_currency

Math filters

ceil

divided_by

floor

minus

modulo

round

times

Array filters

find

first

index

join

last

map

reverse

size

slice

sort

where

Additional filters

date

default

debug

img_url

json_parse

json_array

metafield_tag

t

tt