Shopify uses a powerful template language called Liquid.
Liquid allows you to manipulate data and control the flow of templates.
Arrays in Liquid can be used to store multiple values in a single variable, and you can perform a number of operations on them, such as sorting, reversing, picking a random item and many more.
Understand Arrays in Liquid
An array is a type of variable that can store multiple values at once.
These values can be any type of Liquid objects, including strings, numbers, booleans, or even other arrays.
Arrays are incredibly useful when you want to group related data together, or when you want to manipulate and display lists of items on your Shopify store.
Each value in an array is called an element, and elements are separated by commas.
An important aspect to remember is that the index (position of an element in an array) in Liquid, as in many programming languages, starts at 0.
This means the first element of an array is accessed with an index of 0.
Nothing different from other programming languages.
Creating an Array in Liquid
I’ll give you a simple example on how an array in Shopify Liquid needs to be created:
{%- assign example_array = "value1, value2, value3" | split: ", " -%}
Always use the “split” filter when you create an array in Shopify Liquid or else you’ll not create an array but rather a string.
As a value for “split” filter you can use whatever character you want but the recommended one is the “,” comma.
The “split” filter is a string filter since it takes a string and splits the words by a defined character.
That’s it. This is an array in Shopify Liquid.
Now to perform operations on arrays you need to understand the Liquid array filters.
Understanding array filters
To use a filter in Shopify Liquid, you use the “|” character followed by the name of the filter.
For example, to join the items of an array into a single string, you would do something like this:
Types of array filters
For the majority of cases we’ll use as examples these 2 liquid arrays:
{%- assign array_one = "value1, value2, value3" | split: ", " -%}
and
{%- assign array_two = "value4, value5, value6" | split: ", " -%}
For some examples we need to use objects and different array compositions.
Compact
This filter removes any “NIL” items from an array.
“NIL” is an undefined or empty value that is returned when Liquid code has no results.
Same as “NULL” in other programming languages.
It is not a string with the characters “nil”.
“NIL” is treated as false in the conditions of {% if %} blocks and other Liquid tags that check for the truthfulness of a statement.
In order to remove a “NIL” value it needs to exist inside the array as an empty value like this:
{%- assign array_one = "value1, value2, , value3" | split: ", " -%}
As you see after “value2” we have a “,” followed by an empty space.
That is a “NIL” value inside an array which holds an index position.
In most programming languages, including Liquid, a “NIL” value occupies an index position in the array.
This means that if you have an array like [ “value1”, “value2”, NIL, “value3” ], the nil value is at index 2.
When you use the compact filter in Liquid, it removes these NIL values from the array, and the items that come after the NIL value move up to fill the gap.
So after using compact on the above array, you would get [ “value1”, “value2”, “value3” ], and “value3” would now be at index 2 since “NIL” is no longer inside the array.
In order to remove it we need to use the “compact” filter like this:
{%- assign compacted_array = example_array_one | compact -%}
The output is only the values which are not empty:
[ "value1", "value2", "value3" ]
Concat
This filter concatenates (combines) two arrays.
Let’s combine the two arrays:
{%- assign combined_array = array_one | concat: array_two -%}
The result is a new array that contains all values from both arrays.
Output:
[ "value1", "value2", "value3", "value4", "value5", "value6" ]
First
This filter returns the first item in an array.
{%- assign first_item = array_one | first -%}
Output:
"value1"
Join
This filter combines all of the items in an array into a single string, separated by a space.
{%- assign joined_array = array_one | join -%}
Output:
"value1 value2 value3"
Note that this generates a string and not an array, if you want to convert this to a new array you need to use the “split” filter.
Last
This filter returns the last item in an array.
{%- assign last_item = array_one | last -%}
Output:
"value3"
Map
For a map example let’s say you have an array of product objects, where each product has his own properties.
In this example we extract the product title from the object:
{%- assign product_titles = collection.products | map: 'title' -%}
You can use the map filter to create a new array that contains only the product titles and store them in a new array:
{{ product_titles | join: ', ' }}
Output:
[ "Product Title 1", "Product Title 2", "Product Title 3" ]
Reverse
This filter reverses the order of the items in an array.
{%- assign reversed_array = array_one | reverse -%}
Output:
["value3", "value2", "value1"]
Size
This filter returns the size of an array.
{%- assign array_size = array_one | size -%}
Output:
3
Sort
This filter sorts the items in an array in case-sensitive alphabetical or numerical order.
{%- assign sorted_array = array_one | sort -%}
The output will be in the same order since in our example array the values are already sorted inside the array.
Output:
[ "value1", "value2", "value3" ]
You can also sort by an array item property. You can sort by any property of the object that you use:
{%- assign products = collection.products | sort: 'title' -%}
For output use:
{% for product in products -%}
{{ product.title }}
{%- endfor %}
Output:
Product Title 1 Product Title 2 Product Title 3 …
Sort Natural
This filter sorts the items in an array in case-insensitive alphabetical order.
So if we have the array (notice the position at index 0 which is “Value 2”):
{%- assign array_one = "value2, value1, value3" | split: ", " -%}
And we use:
{%- assign naturally_sorted_array = array_one | sort_natural -%}
The output will be an array that will sort the values in alphabetical order but without paying attention to the case.
Output:
[ "value1", "value2", "value3" ]
Shopify says that “sort_natural” filter should not be used to sort numerical values because when comparing items in an array, each item is converted to a string, so sorting on numerical values can lead to unexpected results.
For this filter you can sort by an array item property as well, like in the “Sort” filter listed above.
Sum
This filter sums all array values and returns the result.
{%- assign sum_array = "0, 1, 2, 3" | split: ", " -%}
For output use:
{{ sum_array | sum }}
Output:
6
Uniq
This filter removes any duplicate items in an array.
So if we had an array with these values, “value2” is doubled:
{%- assign array_one = "value1, value2, value2, value3" | split: ", " -%}
And we write this code with the “uniq” filter:
{%- assign unique_array = array_one | uniq -%}
All values that are identical will be removed from the array.
Output:
[ "value1", "value2", "value3" ]
Where
Filters an array to include only items with a specific property value.
As parameters you need to provide both the property name and the associated value for that property.
{%- assign john_products = collection.products | where: 'vendor', "John Doe" -%}
For output use:
{% for product in john_products -%}
{{ product.title }}
{%- endfor %}
This will output a list with product titles that are sold on the store by the vendor named “John Doe”:
Product Title 1 Product Title 2 Product Title 3 …
With this filter you can filter for items with a boolean property. This requires you to provide only the property name.
{%- assign available_products = collection.products | where: "available" -%}
For output use:
{%- for product in available_products -%}
{{ product.title }}
{%- endfor %}
Now if the “available” property for which we filter the array has a value of “true” it will output the product title, if not nothing will be outputted.
Conclusion
In conclusion, arrays in Shopify Liquid are a powerful tool that can help you manipulate and display collections of data on your Shopify store.
By understanding how to use arrays and the filters available for them, you can create more dynamic and flexible templates for your store.
That’s the basic idea of working with arrays in Shopify Liquid.
Understanding arrays and how to manipulate them can be a very useful tool when customizing your Shopify store.