Arrays With Liquid In Shopify

Aug 02, 2022

Arrays With Liquid In Shopify

If you want to store a single value then you can assign that value to a variable but if want to store many values with the same type that time used Array.

The array uses the same data type value with a common name.

FILTERS FOR ARRAY IN LIQUID

Let's go over the different liquid tags we'll use to create our array.

^{capture: Using capture all the content between the start tag and end tag of capture assigned to the variable.}

{% capture my_variable %}

Codecrew infotech

{% endcapture %}

<p>{{my_variable}}</p>

In this example {{my_variable}} will be the string that is set in the capture.

Output:

Codecrew infotech

^{assign: using it create a new variable and assign the value to them also}

{% assign my_variable = 'Codecrew' %}

Output:

in this example variable name is my_variable and the output of the variable is: Codecrew

^{split: Split is a string filter that divides the whole string in to array.}

which is used in comma-separated items

{% assign city = "Ahmedabad, surat, rajkot, baroda, anand" | split: ','%}

<ul>

{% for city in cities %}

{% endfor %}

</ul>

The above will print a list of cities you like from the cities array.

THE ARRAY

Using for loop Repeatedly executes a block of code.

Generally when you are using an array values are allocated using for loop.

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: 'large' }}

{% if forloop.last == false %}::{% endif%}

{% endfor %}

{% endcapture %}

{% assign products_array = products_list | split: '::'%}

Here we start with the capture tag where create a product array so we set the product_list variable and assign them to all the product information. When capturing the values we separate each value associated with a single product using a | and each set of production values with::. The:: are included in a conditional statement that checks if the iteration of the for loop is the last and is only appended if it is not the last iteration. We will use both of these characters later to split the data into arrays.

When the products_list variable is complete, create a new variable using the assign tag and store an array of all your products and their respective info by splitting on the::

There are many of forloop object like forloop.first, forloop.last, forloop.index, forloop.index0, forloop.rindex0, forloop.rindex, forloop.length.

We will discuss in detail all objects in the next blog.