Ways to create an Array in Liquid

Miguel Ángel

October 2, 2023

•

min read

Introduction

One of the core types of values in many programming languages is the Array. Programmers often rely on arrays to store and manipulate lists of values efficiently, reducing code redundancy. While creating arrays is straightforward in many programming languages, Liquid, a templating language commonly used in platforms like Shopify, lacks a native way to create arrays.

‍

In Liquid, we can't do something as simple as the following (Javascript):

const fruits = ['apple 🍎', 'banana 🍌', 'orange 🍊'];

‍

In this blog post, we'll explore several creative techniques to work with arrays in Liquid, even though it doesn't provide a direct array creation method. Let's dive into these methods step by step.

‍

The Liquid Array Concept

Before diving into array creation methods, let's understand the Liquid array concept, the following is data from Shopify Liquid Documentation.

‍

array
A list of variables of any type.
To access all of the items in an array, you can loop through each item in the array using a for or tablerow tag.
You can use square bracket [ ] notation to access a specific item in an array. Array indexing starts at zero.
You can’t initialize arrays using only Liquid. You can, however, use the split filter to break a single string into an array of substrings.

‍

Methods

Let's explore the different methods we have at our disposal to handle this.

‍

1. Split Filter (Hardcoded Text)

One of the simplest ways to create an array in Liquid is by using the split filter with hardcoded text. This method is handy when you have a predefined list of values that you want to convert into an array.

‍

Example:

{% assign fruitsText = "apple 🍎,banana 🍌,orange 🍊" %}
{% assign fruits = fruitsText | split: "," %}

‍
In this example, we start with a string containing comma-separated values and then use the split filter to transform it into an array.

‍

2. Append Filter + Split Filter (Dynamic Data)

One of the straightforward ways to create an array in Liquid is by using a combination of the append filter and the split filter. This method involves appending elements to a string and then splitting it to form an array.

‍

Example:

{% # Comment - Banana comes from an external source, like a snippet param %}
{% assign orange = "orange 🍊" %}

{% assign fruitItems = "apple 🍎" | append: ',' | append: orange | append: ',' | append: banana %}
{% assign fruits = fruitItems | split: "," %}

‍

3. Capture Tag + Split Filter (Dynamic Data)

Another approach to create arrays in Liquid is by utilizing the capture tag to create a string representation of the array and then applying the split filter.

‍

Example:

{% # Comment - Banana comes from an external source, like a snippet param %}
{% assign orange = "orange 🍊" %}

{% capture FruitItems %}
  apple 🍎,
  {{ banana }},
  {{ orange }}
{% endcapture %}

{% assign fruits = FruitItems | split: "," %}

‍

4. Map Filter (Arrays from Shopify Objects)

Shopify provides a wealth of data objects, such as collections and products. To extract specific arrays from these objects, like products with a particular vendor, you can use the map filter.

‍

Example:

{% assign fruits = collection.products | where: 'type', "Fruit" %}

{% for product in fruits -%}
  - {{ product.title }}
{%- endfor %}

This will create an array of products that were categorized as Fruits from the collection's products.

‍

Conclusion

Creating arrays in Liquid may not be as straightforward as in some other programming languages, but with these techniques, you can effectively work with lists of data. Whether you're dealing with string manipulation, object-based arrays, or extracting data from Shopify objects, these methods will help you handle array-related tasks in Liquid.

Experiment with these approaches and choose the one that best fits your specific use case within the Liquid environment. By mastering these techniques, you'll be well-equipped to navigate Liquid's array-related challenges and build dynamic templates for platforms like Shopify.

Share this post

Ways to create an Array in Liquid

Introduction

The Liquid Array Concept

Methods

1. Split Filter (Hardcoded Text)

2. Append Filter + Split Filter (Dynamic Data)

3. Capture Tag + Split Filter (Dynamic Data)

4. Map Filter (Arrays from Shopify Objects)

Conclusion

Posts you might like

Ways to create an Array in Liquid

When Webflow and No-Code is not enough

You don't need a fully custom Shopify store