Shopify Liquid Array Code Snippets

April 11th, 2024





Shopify’s native support of arrays is… Iffy at best, completely inadequate at worst.

There are workarounds for most standard operations, and I’m going to keep a list of them here for personal reference and for whomever they might be useful for.

Declare Empty Array

Copilot and other code-completion engines autocomplete this code snippet:

{% liquid 
    assign descriptions = []
%}

But in liquid we have to use the split operator on an empty string like so:

{% liquid
    assign descriptions = '' | split: ''
%}

Append Array Item

Again code engines will autocomplete this snippet:

{% liquid     
    assign description = block.settings.description
    assign descriptions = descriptions | push: description
%}

In Shopify Liquid there is no push filter, this comes from Jekyll.
Instead, we need to use a combination of the sort filter and the concat filters.
This trick comes from Dave Warrington’s Blog.

{% liquid
    assign description = description | sort
    assign descriptions = descriptions | concat: description
%}

Here we are using the sort filter to create an array of 1 item.
Once we have that we concat it with the original array.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *