Multi-Dimensional and Associative Arrays in Shopify Liquid

I know.

You’re here because you’re sure you’re missing something. You can’t figure out how to create multi-dimensional and associative arrays in Shopify.

Sadly, you’re not missing something. In fact, while you can access multi-dimensional arrays just fine, you can’t assign values to them. Similarly you can access objects with named members that have values and even iterate through them just like associative arrays, but you can’t create such a thing.

All is not lost.

You can actually work around the lack of associative and multi-dimensional arrays in Shopify with a bit of gymanstics and a fair bit of code bloat. To be fair, Liquid is a templating language, like Twig or Smarty, and you’ll be less frustrated if you think of it as smart HTML rather than dumb Ruby.

So how do you do it?

It’s fairly simple actually.

All you need to do is create multiple parallel arrays so that element 11 of array A corresponds to element 11 of array B, iterate through until you find the value you need in array A and then use the array index to grab the corresponding value in array B.

How do you create arrays in Liquid?

I’m guessing that if you have found this page, you’ve already figured out how to create a basic, one-dimensional array in Shopify. Essentially, you create a string with a delimiter and then you split the string to create your array.

For example

<% assign myString = 'red#blue#green#yellow' %>
<% assign myArray = myString | split: '#' %>

That’s it. However, what you can NOT do is then do this:

<% assign myArray[0] = myString | split: '#' %>

That is absolutely not going to work.

So how do I fake associative arrays?

Simple actually. Again, let’s say if I were working in PHP, I would do something like this

$myArray  = array(
  "item1" => array("size" => "small", "color" => "blue"),
  "item2" => array("size" => "large", "color" => "green"),
 );

So then we can do simple things like

$item1Color = $myArray['item1']['color'];
echo $item1Color;

Output: blue

In Shopify we need to create instead a set of arrays, like so:

<% assign itemsArray = "item1#item2" | split: '#' %>
<% assign sizesArray = "small#large" | split: '#' %>
<% assign colorsArray = "blue#green" | split: '#' %>

So now, let’s see we want to know the color of item1 as in the PHP example. How do we find it?

<% for item in itemsArray %>
  <% if item == 'item1' %>
    {{ colorsArray[forloop.index0] }}
  <% endif %>
<% endfor %>

Outputs: blue.

Yup, it’s a hassle, but it works. You basically have a two-dimensional associative array, but instead of letting Liquid do the heavy lifting for you, you have to do it yourself.

In other words, rather than one multi-dimensional array that the language handles and tracks for you, you have a set of parallel one-dimensional arrays that you have to carefully manage in parallel to keep them in sync.

So of course it’s easy to get them out of sync, but as long as you’re careful, it works pretty well, though it takes tons more code than in an actual programming language.

This can get really complicated and without more powerful data structures, you’re condemned to lots of relatively hard-to-follow code to achieve some very simple things, but there it is. I just used this technique to map menu items in a hierarchical menu. It wasn’t pretty, but it worked. But that’s for a future post.