Skip to main content

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

removefirst​

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

Example of using removefirst
INPUT
{{ product.title | removefirst: '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

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.

Example of using round
INPUT
{{ product.price | round }}
OUTPUT
<!-- product.price = 2.3657 -->
2

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.

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[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

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" }}

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

option_by_name​

Returns the value of the product variant's option with a given name.

Example of using option_by_name
INPUT
{{ variant | option_by_name: 'Color' }}
OUTPUT
Blue

t​

Translates the text into another language.

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