To Array or Not to Array
Storing data coming in from your Shopify store in your template can help with optimization. You may also want to store values so that you can manipulate and re-use them later. Whatever the use case may be, the ability to store information in an array using liquid is a good arsenal to have in your Shopify Dev Toolkit.
A little bit of Liquid
Let's go over the different liquid tags we'll use to create our array.
capture: The capture tag captures content between an opening and closing tag and assigns it to a new variable. For example:
{% capture my_variable %}
I am the value of the variable
{% endcapture %}
{{my_variable}}
In this example {{my_variable}} will the the string that is set in the capture.
assign: Assign creates a new variable and assigns it a value all in one tag. For example:
{% assign my_variable = 'the value' %}
{{my_variable}}
In this example {{my_variable}} will output 'the value'
split: Split is a string filter that allows you to specify a substring use to divide your initial string into an array. For example:
{% assign cheeses = "cheddar, swiss, gouda, havarti, string" | split: ','%}
{% for cheese in cheeses %}
- I like {{cheese}}
{% endfor %}
The above will print a list of cheeses you like from the cheeses array.
forloop.last: The forloop object can be used within for tags and has certain methods that can be called. One of these methods is .last, which returns true if an iteration is the last in a forloop. In practice it could look like this:
{% for product in collection.products %}
{% if forloop.last == true %}
'this is the last iteration in the forloop.'
{% endif %}
{% endfor %}
The above will output this is the last iteration in the forloopwhen it arrives at the last iteration.
With these tags and filters we can get started building an array.
The Array
As an example let's make an array that captures all of the products on a collections page and stores the title, url, description, and featured image
The code will look something like this:
{% capture products_list %}
{% for product in collection.products%}
{{product.title}}|{{product.url}}|{{product.description}}|{{product.featured_image.src | product_img_url: 'medium' }}
{% if forloop.last == false %}::{% endif%}
{% endfor %}
{% endcapture %}
{% assign products_array = products_list | split: '::'%}
To create the product array we start with the capture tag so that we can set the new product_list variable equal to all our product information. When capturing the values we separate each value associated with a single product using a | and each set of product values with ::. The :: are included in a conditional statement that checks if the iteration of the forloop is the last and are only appended if it is not the last iteration. We will use both of these characters later to split the data.
Once the products_list is complete, create a new variable using the assign tag and store an array of all your products and their respective info by spliting on the ::
Next we want to iterate through the products_array and create a nested array of each of the product values. It will look something like this:
{% for product in products_array %}
{% assign product_vals = product | split: '|' %}
{{product_vals[0]}}
{{product_vals[2]}}
{% endfor %}
This will display the title and description for each product.
You can also use the products_arrayelsewhere on the page. For example, if you wanted to create a slider of product images at the top of the collection:
{% for product in products_array %}
{% assign product_vals = product | split: '|' %}
{{product_vals[3]}}
{% endfor %}
Now that you can capture arrays with liquid think of all of the possible applications throughout your store 😃
