# Liquid filters

Filters are simple methods that modify the output of numbers, strings, variables and objects. They are placed within an output tag `{{` `}}` and are denoted by a pipe character `|`.

{% code title="Input" %}

```
<!-- item.title = "Invisible Watch" -->
{{ item.title | upcase }}
```

{% endcode %}

{% code title="Output" %}

```
INVISIBLE WATCH
```

{% endcode %}

In the example above, `item` is the object, `title` is its attribute, and `upcase` is the filter being applied.

Some filters require a parameter to be passed.

{% code title="Input" %}

```
{{ item.title | remove: "Invisible" }}
```

{% endcode %}

{% code title="Output" %}

```
Watch
```

{% endcode %}

Multiple filters can be used on one output. They are applied from left to right.

{% code title="Input" %}

```
<!-- item.title = "Invisible Watch" -->
{{ item.title | upcase | remove: "INVISIBLE"  }}
```

{% endcode %}

{% code title="Output" %}

```
WATCH
```

{% endcode %}

## Array filters

Array filters change the output of arrays. Array is a synonym to list. For example, `order.line_items` is an array of line items or `order.transactions` is an array of transactions.

### join <a href="#join" id="join"></a>

Joins the elements of an array with the character passed as the parameter. The result is a single string.

{% code title="Input" %}

```
{{ product.tags | join: ', ' }}
```

{% endcode %}

{% code title="Output" %}

```
tag1, tag2, tag3
```

{% endcode %}

### first <a href="#first" id="first"></a>

Returns the first element of an array.

{% code title="Input" %}

```
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | first }}
```

{% endcode %}

{% code title="Output" %}

```
sale
```

{% endcode %}

You can use `first` with dot notation when you need to use the filter inside a tag.

```
{% if product.tags.first == "sale" %}
  This product is on sale!
{% endif %}
```

### last <a href="#last" id="last"></a>

Returns the last element of an array.

{% code title="Input" %}

```
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | last }}
```

{% endcode %}

{% code title="Output" %}

```
awesome
```

{% endcode %}

You can use `last` with dot notation when you need to use the filter inside a tag.

```
{% if product.tags.last == "sale"%}
  This product is on sale!
{% endif %}
```

Using `last` on a string returns the last character in the string.

{% code title="Input" %}

```
<!-- product.title = "Awesome Shoes" -->
{{ product.title | last }}
```

{% endcode %}

{% code title="Output" %}

```
s
```

{% endcode %}

### concat <a href="#concat" id="concat"></a>

Concatenates (combines) an array with another array. The resulting array contains all the elements of the original arrays. `concat` will not remove duplicate entries from the concatenated array unless you also use the [`uniq`](#uniq) filter.

{% code title="Input" %}

```
{% assign fruits = "apples, oranges, peaches, tomatoes" | split: ", " %}
{% assign vegetables = "broccoli, carrots, lettuce, tomatoes" | split: ", " %}

{% assign plants = fruits | concat: vegetables %}

{{ plants | join: ", " }}
```

{% endcode %}

{% code title="Output" %}

```
apples, oranges, peaches, tomatoes, broccoli, carrots, lettuce, tomatoes
```

{% endcode %}

You can string together multiple `concat` filters to combine more than two arrays:

{% code title="Input" %}

```
{% assign fruits = "apples, oranges, peaches" | split: ", " %}
{% assign vegetables = "broccoli, carrots, lettuce" | split: ", " %}
{% assign animals = "dogs, cats, birds" | split: ", " %}

{% assign things = fruits | concat: vegetables | concat: animals %}

{{ things | join: ", " }}
```

{% endcode %}

{% code title="Output" %}

```
apples, oranges, peaches, broccoli, carrots, lettuce, dogs, cats, birds
```

{% endcode %}

### index <a href="#index" id="index"></a>

Returns the item at the specified index location in an array. Note that array numbering starts from zero, so the first item in an array is referenced with `[0]`.

{% code title="Input" %}

```
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags[2] }}
```

{% endcode %}

{% code title="Output" %}

```
womens
```

{% endcode %}

### map <a href="#map" id="map"></a>

Accepts an array element's attribute as a parameter and creates an array out of each array element's value.

{% code title="Input" %}

```
<!-- collection.title = "Spring", "Summer", "Fall", "Winter" -->
{% assign collection_titles = collections | map: 'title' %}
{{ collection_titles }}
```

{% endcode %}

{% code title="Output" %}

```
SpringSummerFallWinter
```

{% endcode %}

### flat\_map ⭐ <a href="#flat_map" id="flat_map"></a>

Creates a flattened array of values taken from the specified attribute of each element of the input array.

{% code title="Input" %}

```
<!-- 
    order = {
        line_items: [{
            discount_allocations: [{
                amount: 1.23
            }, {
                amount: 2.34
            }]
        }, {
            discount_allocations: [{
                amount: 3.45
            }]
        }]
    }
-->
{{ order.line_items | flat_map: "discount_allocations" | json }}
```

{% endcode %}

{% code title="Output" %}

```
[{"amount":1.23},{"amount":2.34},{"amount":3.45}]
```

{% endcode %}

### group\_by ⭐ <a href="#group_by" id="group_by"></a>

Groups elements of the same property value. Creates an object where keys are the specified property value, and values are arrays of elements with the same property value.

{% code title="Input" %}

```
<!--
    order = {
        line_items: [{
            price: 1.23,
            vendor: "A"
        }, {
            price: 2.34, 
            vendor: "B"
        }, {
            price: 3.45, 
            vendor: "A"
        }]
    }
-->
{{ order.line_items | group_by: "vendor" | json }
```

{% endcode %}

{% code title="Output" %}

```
{"A":[{"price":1.23,"vendor":"A"},{"price":3.45,"vendor":"A"}],"B":[{"price":2.34,"vendor":"B"}]}
```

{% endcode %}

### map\_values ⭐ <a href="#map_values" id="map_values"></a>

Transforms an object by running each of the object's property value by a given filter. First parameter of `map_values` is the filter name. The filter receives the object values one by one as its first parameter. All remaining parameters provided to `map_values` are passed down to the given filter.

{% code title="Input" %}

```
<!--
    dimensions = { depth: 3, height: 5, width: 7 } 
-->

{% assign doubled = dimensions | map_values: "times", 2 %}
{{ doubled.depth }}
{{ doubled.height }}
{{ doubled.width }}
```

{% endcode %}

{% code title="Output" %}

```
6
10
14
```

{% endcode %}

### reverse <a href="#reverse" id="reverse"></a>

Reverses the order of the items in an array.

{% code title="Input" %}

```
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}

{{ my_array | reverse | join: ", " }}
```

{% endcode %}

{% code title="Output" %}

```
plums, peaches, oranges, apples
```

{% endcode %}

### size <a href="#size" id="size"></a>

Returns the size of a string (the number of characters) or an array (the number of elements).

{% code title="Input" %}

```
{{ 'The quick brown fox jumps over a lazy dog.' | size }}
```

{% endcode %}

{% code title="Output" %}

```
42
```

{% endcode %}

You can use `size` with dot notation when you need to use the filter inside a tag.

```
{% if collections.frontpage.products.size > 10 %}
  There are more than 10 products in this collection!
{% endif %}
```

### sort <a href="#sort" id="sort"></a>

Sorts the elements of an array by a given attribute of an element in the array.

```
{% assign products = collection.products | sort: 'price' %}
{% for product in products %}
  <h4>{{ product.title }}</h4>
{% endfor %}
```

The order of the sorted array is case-sensitive.

{% code title="Input" %}

```
<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
   {{ product.title }}
{% endfor %}
```

{% endcode %}

{% code title="Output" %}

```
A B a b
```

{% endcode %}

### where <a href="#where" id="where"></a>

Creates an array including only the objects with a given property value, or any [truthy](https://shopify.dev/docs/themes/liquid/reference/basics/true-and-false#truthy) value by default.

{% code title="Input" %}

```
All products:
{% for product in collection.products %}
- {{ product.title }}
{% endfor %}

{% assign kitchen_products = collection.products | where: "type", "kitchen" %}

Kitchen products:
{% for product in kitchen_products %}
- {{ product.title }}
{% endfor %}
```

{% endcode %}

{% code title="Output" %}

```
All products:
- Vacuum
- Spatula
- Television
- Garlic press

Kitchen products:
- Spatula
- Garlic press
```

{% endcode %}

You can use a property name with `where` that has no target value when that property is a [boolean](https://shopify.dev/docs/themes/liquid/reference/basics/types#boolean) or [truthy](https://shopify.dev/docs/themes/liquid/reference/basics/true-and-false#truthy). For example, the [`available` property](https://shopify.dev/docs/themes/liquid/reference/objects/product#product-available) of products.

Example

```
{% assign available_products = collection.products | where: "available" %}

Available products:
{% for product in available_products %}
- {{ product.title }}
{% endfor %}
```

### uniq <a href="#uniq" id="uniq"></a>

Removes any duplicate instances of elements in an array.

{% code title="Input" %}

```
{% assign fruits = "orange apple banana apple orange" %}
{{ fruits | split: ' ' | uniq | join: ' ' }}
```

{% endcode %}

{% code title="Output" %}

```
orange apple banana
```

{% endcode %}

## Format filters

### date

Converts a timestamp into a specified date format.

| format | description                                            | example value |
| ------ | ------------------------------------------------------ | ------------- |
| %d     | Two-digit day of the month (with leading zeros)        | `01` to `31`  |
| %m     | Two digit representation of the month                  | `01` to `12`  |
| %y     | Two digit representation of the year                   | `21`          |
| %Y     | Four digit representation for the year                 | `2021`        |
| %H     | Two digit representation of the hour in 24-hour format | `00` to `23`  |
| %I     | Two digit representation of the hour in 12-hour format | `01` to `12`  |
| %p     | Upper-case 'AM' or 'PM' based on the given time        | `AM` or `PM`  |
| %P     | Lower-case 'am' or 'pm' based on the given time        | `am` or `pm`  |
| %M     | Two digit representation of the minute                 | `00` to `59`  |
| %S     | Two digit representation of the second                 | `00` to `59`  |
| %s     | Unix Epoch Time timestamp                              | `1612328167`  |

{% code title="Input" %}

```
{{ order.created_at | date: "%Y-%m-%d %H:%M:%S" }}
```

{% endcode %}

{% code title="Output" %}

```
2021-02-03 04:56:07
```

{% endcode %}

### e164 ⭐

Formats a phone number according to the [E.164 standard](https://en.wikipedia.org/wiki/E.164). If a country calling code is not included in the phone number, then you can pass an [ISO 3166](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes) country code as an additional parameter.

```
{{ "+1 800 444 4444" | e164 }}
=> +18004444444
```

```
{{ "+44 20 8743 8000" | e164 }}
=> +442087438000
```

```
{{ "020 8743 8000" | e164: "GB" }}
=> +442087438000
```

```
{{ "7325 7731" | e164: "HKG" }}
=> +85273257731
```

To format a phone number associated with a shipping address:

<pre><code><strong>{{ order.shipping_address.phone | e164: order.shipping_address.country_code }}
</strong></code></pre>

### iso3166\_alpha3 ⭐

Converts a two-letter [ISO 3166](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes) country code to its three-letter equivalent.

```
{{ "US" | iso3166_alpha3 }}
=> USA
```

To format a shipping address country as an ISO 3166 alpha-3 country code:

<pre><code><strong>{{ order.shipping_address.country_code | iso3166_alpha3 }}
</strong></code></pre>

### json

Converts a string, or object, into JSON format.

By default it produces a single-line JSON. You can pass an optional parameter `"pretty"`, to get a multi-line, indented JSON output.

{% hint style="info" %}
The `json` filter is useful for debugging to check what are all available properties of a given object.
{% endhint %}

{% code title="Input" %}

```
{{ order.transacations | json: "pretty" }}
```

{% endcode %}

```
[
    {
        "id": 5689665290299,
        "order_id": 4592641409083,
        "kind": "sale",
        "gateway": "bogus",
        "status": "success",
        "message": "Bogus Gateway: Forced success",
        "created_at": "2022-10-06T10:09:20+02:00",
        "test": true,
        "authorization": "53433",
        "location_id": null,
        "user_id": null,
        "parent_id": null,
        "processed_at": "2022-10-06T10:09:20+02:00",
        "device_id": null,
        "error_code": null,
        "source_name": "web",
        "payment_details": {
            "credit_card_bin": "1",
            "avs_result_code": null,
            "cvv_result_code": null,
            "credit_card_number": "•••• •••• •••• 1",
            "credit_card_company": "Bogus"
        },
        "receipt": {
            "paid_amount": "23.00"
        },
        "amount": "23.00",
        "currency": "USD",
        "admin_graphql_api_id": "gid://shopify/OrderTransaction/5689665290299"
    }
]
```

### json\_parse, parse\_json⭐

Allows parsing string in a format compliant with JSON file requirements into an object. It enables access to individual fields within the object using dot notation.

```
{%- capture material %}
{"properties":{"name":"Cotton","color":"White","structure":"Woven"}}
{%- endcapture %}

{%- assign material = material | json_parse %}

material: {{ material }}
material_json: {{ material | json }}
material_name: {{ material.properties.name }}
```

{% code title="Output" %}

```
material: [object Object]
material_json: {"properties":{"name":"Cotton","color":"White","structure":"Woven"}}
material_name: Cotton
```

{% endcode %}

### moment ⭐

Returns a current or specified time converted to a desired time zone.

The filter has two parameters: a date format and a [time zone identifier](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List).

<pre><code><strong>{{ "now" | moment: "YYYY-MM-DD HH:mm:ss", "America/Chicago" }}
</strong><strong>=> 2024-03-13 14:55:00
</strong></code></pre>

| format | description                                            | example value |
| ------ | ------------------------------------------------------ | ------------- |
| DD     | Two-digit day of the month (with leading zeros)        | `01` to `31`  |
| MM     | Two digit representation of the month                  | `01` to `12`  |
| YY     | Two digit representation of the year                   | `21`          |
| YYYY   | Four digit representation for the year                 | `2021`        |
| HH     | Two digit representation of the hour in 24-hour format | `00` to `23`  |
| hh     | Two digit representation of the hour in 12-hour format | `01` to `12`  |
| A      | Upper-case 'AM' or 'PM' based on the given time        | `AM` or `PM`  |
| a      | Lower-case 'am' or 'pm' based on the given time        | `am` or `pm`  |
| mm     | Two digit representation of the minute                 | `00` to `59`  |
| ss     | Two digit representation of the second                 | `00` to `59`  |

## Math filters

Math filters allow you to apply mathematical tasks.

Math filters can be linked and, as with any other filters, are applied in order of left to right. In the example below, `minus` is applied first, then `times`, and finally `divided_by`.Copy

```
You save {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price }}%
```

### abs <a href="#abs" id="abs"></a>

Returns the absolute value of a number.

{% code title="Input" %}

```
{{ -25 | abs }}
```

{% endcode %}

{% code title="Output" %}

```
25
```

{% endcode %}

`abs` will also work on a string if the string only contains a number.

{% code title="Input" %}

```
{{ "-19.86" | abs }}
```

{% endcode %}

{% code title="Output" %}

```
19.86
```

{% endcode %}

### at\_most <a href="#at_most" id="at_most"></a>

Limits a number to a maximum value.

{% code title="Input" %}

```
{{ 4 | at_most: 5 }}
{{ 4 | at_most: 3 }}
```

{% endcode %}

{% code title="Output" %}

```
4
3
```

{% endcode %}

### at\_least <a href="#at_least" id="at_least"></a>

Limits a number to a minimum value.

{% code title="Input" %}

```
{{ 4 | at_least: 5 }}
{{ 4 | at_least: 3 }}
```

{% endcode %}

{% code title="Output" %}

```
5
4
```

{% endcode %}

### ceil <a href="#ceil" id="ceil"></a>

Rounds an output up to the nearest integer.

{% code title="Input" %}

```
{{ 1.2 | ceil }}
{{ 3.0 | ceil }}
{{ 3.45 | ceil }}
```

{% endcode %}

{% code title="Output" %}

```
2
3
4
```

{% endcode %}

Liquid tries to convert the input to a number before the filter is applied.

{% code title="Input" %}

```
{{ "4.5" | ceil }}
```

{% endcode %}

{% code title="Output" %}

```
5
```

{% endcode %}

### divided\_by <a href="#divided_by" id="divided_by"></a>

Divides an output by a number. The output is rounded down to the nearest integer.

{% code title="Input" %}

```
<!-- product.price = 200 -->
{{ product.price | divided_by: 10 }}
```

{% endcode %}

{% code title="Output" %}

```
20
```

{% endcode %}

### floor <a href="#floor" id="floor"></a>

Rounds an output down to the nearest integer.

{% code title="Input" %}

```
{{ 4.6 | floor }}
{{ 4.3 | floor }}
```

{% endcode %}

{% code title="Output" %}

```
4
4
```

{% endcode %}

### minus <a href="#minus" id="minus"></a>

Subtracts a number from an output.

{% code title="Input" %}

```
<!-- product.price = 200 -->
{{ product.price | minus: 15 }}
```

{% endcode %}

{% code title="Output" %}

```
185
```

{% endcode %}

### modulo <a href="#modulo" id="modulo"></a>

Divides an output by a number and returns the remainder.

{% code title="Input" %}

```
{{ 12 | modulo: 5 }}
```

{% endcode %}

{% code title="Output" %}

```
2
```

{% endcode %}

### plus <a href="#plus" id="plus"></a>

Adds a number to an output.

{% code title="Input" %}

```
<!-- product.price = 200 -->
{{ product.price | plus: 15 }}
```

{% endcode %}

{% code title="Output" %}

```
215
```

{% endcode %}

### round <a href="#round" id="round"></a>

Rounds the output to the nearest integer or specified number of decimals.

{% code title="Input" %}

```
{{ 4.6 | round }}
{{ 4.3 | round }}
{{ 4.5612 | round: 2 }}
```

{% endcode %}

{% code title="Output" %}

```
5
4
4.56
```

{% endcode %}

### times <a href="#times" id="times"></a>

Multiplies an output by a number.

{% code title="Input" %}

```
<!-- product.price = 200 -->
{{ product.price | times: 1.15 }}
```

{% endcode %}

{% code title="Output" %}

```
230
```

{% endcode %}

### to\_fixed

Convert a number into a string, rounding the number to keep only the given number of decimals.

{% code title="Input" %}

```
{{ 1.2345 | to_fixed: 2 }}
```

{% endcode %}

{% code title="Output" %}

```
1.23
```

{% endcode %}

The difference between `round` and `to_fixed` it that `round` returns a number so it trims trailing zeros while `to_fixed` will preserve them.

{% code title="Input" %}

```
{{ 4.5000 | round: 2 }}
{{ 4.5000 | to_fixed: 2 }}
```

{% endcode %}

{% code title="Output" %}

```
4.5
4.50
```

{% endcode %}

## String filters

String filters are used to manipulate outputs and variables of the [string](https://shopify.dev/docs/themes/liquid/reference/basics/types/#strings) type.

### append <a href="#append" id="append"></a>

Appends characters to a string.

{% code title="Input" %}

```
{% assign filename = "/index.html" %}
{{ "website.com" | append: filename }}
```

{% endcode %}

{% code title="Output" %}

```
website.com/index.html
```

{% endcode %}

### base64\_decode <a href="#capitalize" id="capitalize"></a>

Decodes a string to [Base64 format](https://developer.mozilla.org/en-US/docs/Glossary/Base64)

{% code title="Input" %}

```
{{ 'b25lIHR3byB0aHJlZQ==' | base64_decode }}
```

{% endcode %}

{% code title="Output" %}

```
one two three
```

{% endcode %}

### base64\_encode <a href="#capitalize" id="capitalize"></a>

Encodes a string to [Base64 format](https://developer.mozilla.org/en-US/docs/Glossary/Base64)

{% code title="Input" %}

```
{{ 'one two three' | base64_decode }}
```

{% endcode %}

{% code title="Output" %}

```
b25lIHR3byB0aHJlZQ==
```

{% endcode %}

### capitalize <a href="#capitalize" id="capitalize"></a>

Capitalizes the first word in a string

{% code title="Input" %}

```
{{ "title" | capitalize }}
```

{% endcode %}

{% code title="Output" %}

```
Title
```

{% endcode %}

### downcase <a href="#downcase" id="downcase"></a>

Converts a string into lowercase.

{% code title="Input" %}

```
{{ 'UPPERCASE' | downcase }}
```

{% endcode %}

{% code title="Output" %}

```
uppercase
```

{% endcode %}

### escape <a href="#escape" id="escape"></a>

Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn’t change strings that don’t have anything to escape.

{% code title="Input" %}

```
{{ "<p>test</p>" | escape }}
```

{% endcode %}

{% code title="Output" %}

```
&lt;p&gt;test&lt;/p&gt;
```

{% endcode %}

### extract\_number ⭐ <a href="#strip_html" id="strip_html"></a>

Extracts a first number from a string. It works for integers (123), decimal numbers (123.45), and negative numbers (-123). The extracted number is still a text so it doesn't strip leading zeros (0123).

{% code title="Input" %}

```
{%- capture note -%}
Foo 123 Bar 456
{%- endcapture -%}
{{ note | extract_number }}
```

{% endcode %}

{% code title="Output" %}

```
123
```

{% endcode %}

### extract\_numbers ⭐ <a href="#strip_html" id="strip_html"></a>

Extracts all numbers from a string. It works for integers (123), decimal numbers (123.45), and negative numbers (-123). The extracted numbers are still a text to preserve leading zeros (0123).\
The result is an array.

{% code title="Input" %}

```
{%- capture note -%}
Foo 012
Bar 3.4
Baz -56
{%- endcapture -%}
{{ note | extract_numbers | join: " " }}
```

{% endcode %}

{% code title="Output" %}

```
012 3.4 -56
```

{% endcode %}

### md5 <a href="#newline_to_br" id="newline_to_br"></a>

Calculates an MD5 hash from a string.

An example use case for this filter is to calculate a checksum of a request payload, and include it in a request header. Such a checksum is required by some APIs, for example, the [Richard Photo Lab API](https://github.com/richardphotolab/API-Order-docs#checksum).

```
{{ output | strip_all | md5 }}
```

### newline\_to\_br <a href="#newline_to_br" id="newline_to_br"></a>

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

{% code title="Input" %}

```
{% capture var %}
One
Two
Three
{% endcapture %}
{{ var | newline_to_br }}
```

{% endcode %}

{% code title="Output" %}

```
<br />One<br />Two<br />Three<br />
```

{% endcode %}

### prepend <a href="#prepend" id="prepend"></a>

Adds the specified string to the beginning of another string.

{% code title="Input" %}

```
{{ 'sale' | prepend: 'Made a great ' }}
```

{% endcode %}

{% code title="Output" %}

```
Made a great sale
```

{% endcode %}

### remove <a href="#remove" id="remove"></a>

Removes all occurrences of a substring from a string.

{% code title="Input" %}

```
{{ "Hello, world. Goodbye, world." | remove: "world" }}
```

{% endcode %}

{% code title="Output" %}

```
Hello, . Goodbye, .
```

{% endcode %}

### remove\_first <a href="#remove_first" id="remove_first"></a>

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

{% code title="Input" %}

```
{{ "Hello, world. Goodbye, world." | remove_first: "world" }}
```

{% endcode %}

{% code title="Output" %}

```
Hello, . Goodbye, world.
```

{% endcode %}

### replace <a href="#replace" id="replace"></a>

Replaces all occurrences of a string with a substring.

{% code title="Input" %}

```
<!-- product.title = "Awesome Shoes" -->
{{ product.title | replace: 'Awesome', 'Mega' }}
```

{% endcode %}

{% code title="Output" %}

```
Mega Shoes
```

{% endcode %}

### replace\_first <a href="#replace_first" id="replace_first"></a>

Replaces the first occurrence of a string with a substring.

{% code title="Input" %}

```
<!-- product.title = "Awesome Awesome Shoes" -->
{{ product.title | replace_first: 'Awesome', 'Mega' }}
```

{% endcode %}

{% code title="Output" %}

```
Mega Awesome Shoes
```

{% endcode %}

### slice <a href="#slice" id="slice"></a>

The `slice` filter returns a substring, starting at the specified index. An optional second parameter can be passed to specify the length of the substring. If no second parameter is given, a substring of one character will be returned.

{% code title="Input" %}

```
{{ "hello" | slice: 0 }}
{{ "hello" | slice: 1 }}
{{ "hello" | slice: 1, 3 }}
```

{% endcode %}

{% code title="Output" %}

```
h
e
ell
```

{% endcode %}

If the passed index is negative, it is counted from the end of the string.

{% code title="Input" %}

```
{{ "hello" | slice: -3, 2  }}
```

{% endcode %}

{% code title="Output" %}

```
ll
```

{% endcode %}

### split <a href="#split" id="split"></a>

The `split` filter takes on a substring as a parameter. The substring is used as a delimiter to divide a string into an array. You can output different parts of an array using [array filters](https://shopify.dev/docs/themes/liquid/reference/filters/array-filters).

{% code title="Input" %}

```
{% assign words = "Hi, how are you today?" | split: ' ' %}

{%- for word in words -%}
{{ word }}
{% endfor %}
```

{% endcode %}

{% code title="Output" %}

```
Hi,
how
are
you
today? 
```

{% endcode %}

### strip <a href="#strip" id="strip"></a>

Strips tabs, spaces, and newlines (all whitespace) from the left and right side of a string.

{% code title="Input" %}

```
{{ '   too many spaces      ' | strip }}
```

{% endcode %}

{% code title="Output" %}

```
too many spaces
```

{% endcode %}

### lstrip <a href="#lstrip" id="lstrip"></a>

Strips tabs, spaces, and newlines (all whitespace) from the **left** side of a string.

{% code title="Input" %}

```
{{ '   too many spaces           ' | lstrip }}!
```

{% endcode %}

{% code title="Output" %}

```
too many spaces           !
```

{% endcode %}

### rstrip <a href="#rstrip" id="rstrip"></a>

Strips tabs, spaces, and newlines (all whitespace) from the **right** side of a string.

{% code title="Input" %}

```
{{ '              too many spaces      ' | rstrip }}!
```

{% endcode %}

{% code title="Output" %}

```
              too many spaces!
```

{% endcode %}

### strip\_all ⭐ <a href="#strip_html" id="strip_html"></a>

Strips tabs, spaces, and newlines (all whitespace) from the entire string.

{% code title="Input" %}

```
{%- capture note -%}
Line 1
   Line 2
      Line 3
{%- endcapture -%}
{{ note | strip_all }}
```

{% endcode %}

{% code title="Output" %}

```
Line 1Line 2Line 3
```

{% endcode %}

### strip\_html <a href="#strip_html" id="strip_html"></a>

Strips all HTML tags from a string.

{% code title="Input" %}

```
{{ "<h1>Hello</h1> World" | strip_html }}
```

{% endcode %}

{% code title="Output" %}

```
Hello World
```

{% endcode %}

### strip\_newlines <a href="#strip_newlines" id="strip_newlines"></a>

Removes any line breaks/newlines from a string.

{% code title="Input" %}

```
{%- capture string_with_newlines -%}
Hello
there
{%- endcapture -%}

{{ string_with_newlines | strip_newlines }}
```

{% endcode %}

{% code title="Output" %}

```
Hellothere
```

{% endcode %}

### truncate <a href="#truncate" id="truncate"></a>

Truncates a string down to the number of characters passed as the first parameter. An ellipsis (...) is appended to the truncated string and is included in the character count.

{% code title="Input" %}

```
{{ "The cat came back the very next day" | truncate: 13 }}
```

{% endcode %}

{% code title="Output" %}

```
The cat ca...
```

{% endcode %}

#### Custom ellipsis <a href="#custom-ellipsis" id="custom-ellipsis"></a>

`truncate` takes an optional second parameter that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (...), but you can specify a different sequence.

The length of the second parameter counts against the number of characters specified by the first parameter. For example, if you want to truncate a string to exactly 10 characters, and use a 3-character ellipsis, use 13 for the first parameter of `truncate`, since the ellipsis counts as 3 characters.

{% code title="Input" %}

```
{{ "ABCDEFGHIJKLMNOPQRSTUVWXYZ" | truncate: 18, ", and so on" }}
```

{% endcode %}

{% code title="Output" %}

```
ABCDEFG, and so on
```

{% endcode %}

#### No ellipsis <a href="#no-ellipsis" id="no-ellipsis"></a>

You can truncate to the exact number of characters specified by the first parameter and show no trailing characters by passing a blank string as the second parameter:

{% code title="Input" %}

```
{{ "I'm a little teapot, short and stout." | truncate: 15, "" }}
```

{% endcode %}

{% code title="Output" %}

```
I'm a little te
```

{% endcode %}

### truncatewords <a href="#truncatewords" id="truncatewords"></a>

Truncates a string down to the number of words passed as the first parameter. An ellipsis (...) is appended to the truncated string.

{% code title="Input" %}

```
{{ "The cat came back the very next day" | truncatewords: 4 }}
```

{% endcode %}

{% code title="Output" %}

```
The cat came back...
```

{% endcode %}

#### Custom ellipsis <a href="#custom-ellipsis" id="custom-ellipsis"></a>

`truncatewords` takes an optional second parameter that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (...), but you can specify a different sequence.

{% code title="Input" %}

```
{{ "The cat came back the very next day" | truncatewords: 4, "--" }}
```

{% endcode %}

{% code title="Output" %}

```
The cat came back--
```

{% endcode %}

#### No ellipsis <a href="#no-ellipsis" id="no-ellipsis"></a>

You can avoid showing trailing characters by passing a blank string as the second parameter:

{% code title="Input" %}

```
{{ "The cat came back the very next day" | truncatewords: 4, "" }}
```

{% endcode %}

{% code title="Output" %}

```
The cat came back
```

{% endcode %}

### upcase <a href="#upcase" id="upcase"></a>

Converts a string into uppercase.

{% code title="Input" %}

```
{{ 'i want this to be uppercase' | upcase }}
```

{% endcode %}

{% code title="Output" %}

```
I WANT THIS TO BE UPPERCASE
```

{% endcode %}

### url\_decode

Decodes a string that has been encoded as a URL or by [url\_encode](#url_encode-1).

{% code title="Input" %}

```
{{ "%27Stop%21%27+said+Fred" | url_decode }}
```

{% endcode %}

{% code title="Output" %}

```
'Stop!' said Fred
```

{% endcode %}

### url\_encode <a href="#url_encode" id="url_encode"></a>

Converts any URL-unsafe characters in a string into percent-encoded characters.

{% code title="Input" %}

```
{{ "john@liquid.com" | url_encode }}
```

{% endcode %}

{% code title="" %}

```
john%40liquid.com
```

{% endcode %}

Note that `url_encode` will turn a space into a `+` sign instead of a percent-encoded character.

{% code title="Input" %}

```
{{ "Tetsuro Takara" | url_encode }}
```

{% endcode %}

{% code title="Output" %}

```
Tetsuro+Takara
```

{% endcode %}

### xml\_escape <a href="#xml_escape" id="xml_escape"></a>

{% hint style="info" %}
This is a special filter available in Exporteo to facilitate the setup of an XML output template.
{% endhint %}

Replaces characters that are special characters in XML documents.

| **Char** | **Escape String** |
| -------- | ----------------- |
| <        | \&lt;             |
| >        | \&gt;             |
| "        | \&quot;           |
| '        | \&apos;           |
| &        | \&amp;            |

{% code title="Input" %}

```
{{ "Jane & Joe O'Neill" | xml_escape }}
```

{% endcode %}

{% code title="Output" %}

```
Jane &amp; Joe O&apos;Neill
```

{% endcode %}