Array Filters

Array filters work on lists of values. Use them to sort products, pick items from a list, pull out one field from each item, or merge two lists into one. They are the key to working with groups of data in your templates.

Accessing elements

first

Get the first item in an array. This is a quick way to grab a single value from a list:

{{ collection.products | first }}

You can also use dot notation:

{{ collection.products.first.title }}

last

Get the last item in an array:

{{ collection.products | last }}

size

Get the number of items in an array:

{{ collection.products | size }}

This also works on strings, where it returns the character count:

{{ 'hello' | size }}

Output: 5

Sorting

sort

Put items in order from A to Z, or from low to high. Pass a field name to sort by that field:

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

If you leave out the field name, it sorts by the raw values. This works well for lists of simple strings:

{% assign sorted_tags = product.tags | sort %}

sort_natural

Sort in ascending order, ignoring case. 'Apple' and 'apple' are treated the same:

{% assign sorted = collection.products | sort_natural: 'title' %}

reverse

Reverse the order of an array:

{% assign newest_first = collection.products | sort: 'created_at' | reverse %}

Filtering

where

Keep only the items where a field matches the value you give. All other items are left out:

{% assign available = collection.products | where: 'available', true %}
{% for product in available %}
  <p>{{ product.title }}</p>
{% endfor %}

You can chain where filters to narrow results further:

{% assign physical_available = collection.products | where: 'type', 'physical' | where: 'available', true %}

compact

Remove all nil values from an array:

{% assign images = collection.products | map: 'featured_image' | compact %}

This is useful after a map when some items might not have the property you asked for.

uniq

Remove duplicate values from an array:

{% assign all_tags = collection.products | map: 'tags' | compact | uniq %}

Transforming

map

Pull one field out of every item in a list. You get back a new list with just those values:

{% assign titles = collection.products | map: 'title' %}

The result is a flat list of title strings. This is useful when you need just one piece of data from each item.

{% assign all_vendors = collection.products | map: 'vendor' | uniq | sort %}
{% for vendor in all_vendors %}
  <span>{{ vendor }}</span>
{% endfor %}

join

Glue all items in a list into one string, with a chosen separator between each item:

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

Output: sale, new, featured

Without an argument, the items are joined with no separator.

Combining

concat

Merge two arrays into one:

{% assign all_products = collection_a.products | concat: collection_b.products %}

The items from the second list are placed at the end of the first. Copies are kept by default. Add uniq after to strip them out:

{% assign all_products = collection_a.products | concat: collection_b.products | uniq %}

Practical examples

Filter and count

Show a count of available products in a collection:

{% assign available = collection.products | where: 'available', true %}
<p>{{ available | size }} products in stock</p>

Collect all unique tags across a collection:

{% assign all_tags = collection.products | map: 'tags' | join: ',' | split: ',' | uniq | sort %}
{% for tag in all_tags %}
  <a href="/collections/{{ collection.handle }}/{{ tag | url_encode }}">{{ tag }}</a>
{% endfor %}

Sort by price (low to high)

{% assign by_price = collection.products | sort: 'price' %}
{% for product in by_price %}
  <p>{{ product.title }} — {{ product.price | money }}</p>
{% endfor %}

On this page