Arrays in Shopify

Arrays in Shopify

Arrays are one of the most useful data structures and comes in handy for rescue for solving some of the common and complex programming problems that we face on day today life. Storing data from Shopify into an array can be a good method for using the data later when needed thereby optimizing the site for performance. We will go through how to create and manipulate arrays in Shopify liquid and also the filters that we would use to manipulate the arrays.

Unfortunately, there no direct method in Shopify Liquid to create an array like how we have in other languages like PHP, C++, etc. But alternatively, we have two methods to create arrays. Before we get down to create arrays, lets us look into the tags that we will be using to create arrays in Shopify.

Assign Tag:

Assign is a variable tag that we can use to create a new Liquid variable. Below is an example of using assign tag:

{% assign ecom_name = 'Shopify' %}

I launched my store using {{ ecom_name }}.

We can save strings or boolean values to the variables using the assign tag. This is a very simple method to store values to a variable.

In case you want to store boolean values like true or false, not necessary to quotes around the values.

{% assign is_shopify = true %}

{% if is_shopify == true %}

                Welcome to Shopify!

{% endif %}


Capture Tag:

The capture tag stores all the string that is enclosed within the opening and closing tag and assigns it to a variable. The values that is assigned to the variable using the capture tag is stores as string.

{% capture welcome_text %}

                Welcome to Shopify!

{% endcapture %}

{{ welcome_text }}


Creating Array in Shopify Liquid using assign tag and Split Filter:

We can use the split filter to create an array in liquid and below is the example for the same:

{% assign fruits = "Apple,Orange,Grape,Mosambique" | split: ',' %}

{% for fruit in fruits %}

                <h3>{{ fruit }}</h3>

{% endfor %}

Creating Array in Shopify Liquid using Capture tag:

In this method, we would be looping through products collection to generate a string pattern and we will be saving this string using the capture tag in a variable. Once it is saved in a variable, we will be using the the assign tag and split filter to construct the array.

{% capture product_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 = product_list | split: '::'%}

We can loop through this products_array using the "for" iteration tag.

{% for product in products %}

  {% assign product_values = product | split: '|' %}



{% endfor %}

We just went through the different ways we can construct arrays in Shopify and also on how to use them. Now that you know how to create arrays, think about all the possible ways you can put this into action in your site. Let us know in comments if you end up in something interesting.

Write Your Comment

Only registered users can write comments. Please, log in or register