Home > Shopify Development > How to Get Size of Array and String in Liquid

How to Get Size of Array and String in Shopify

Sam Nguyen
Sam Updated: April 21, 2024

Share:

Drive 20-40% of your revenue with Avada
avada email marketing

Your online is encountering the inconvenience in showing specific items or product tags with specific size in liquid. If you are using Liquid template language, you can take a look to view these steps below to help you get the size. The tutorial aims to assist you in getting the size of array and string in liquid.

Table of content

What is Liquid template language?

Liquid is one of the template languages in Shopify. Liquid is used as the backbone of Shopify to upload dynamic content on the front page. Liquid has been become a good source for a lot of hosted website application such as Jekyll, salesforce desk, and zendesk.

There are five types in Liquid. String is declared by grouping a variable’s value in single or double quotes. Number includes floats and integers. Boolean response to true or false value. Nil is a special empty value that is returned when Liquid code has no results. Array holds lists of values, which is the one we focus today.

What are array filter and the size of array?

Array filter is a function used to create a new array from a provided array including names or items which meet the demand of the condition set by the argument function. In general, the formation of an array looks like this:

sample array filter

callback function for each character in an array is activated when you switch on the filter function. It can also build a new array that can also give the value back to confirm the true feature of that element. Callback is compatible with three arguments: the value of element, the index of element and the array objects being traversed.

In addition, the range of elements demonstrated by filter is set by the first petition of callback. If existing elements are changed or eliminated, their value will be passed to the filter hence when filter check these elements, their value is remained.

Do you wonder about the argument function? The function of argument is to check the condition of each array. There are three arguments. First, array is mentioned above. Secind, index is processed by the function and element is processed by the curent element.

Moreover, the return value is also worth mentioning. The return value aims to return a new array consisting of elements that satisfy with the condition of argument filter.

The size of array is a function to pay back the number of the character in a string or the number of elements in an array. Size can also be used with dot notation (for example, {{ my_string.size}}).

How to get the item with specified index in array in liquid

For instance, the number of characters in this string is appeared like this:

Input:


{{ 'The quick brown fox jumps over a lazy dog.' | size }}

Output:

42

In case that you use filter inside a tag, you use size with dot notation.


{% if collections.frontpage.products.size > 10 %}
  There are more than 10 products in this collection!
{% endif %}

Conclusion

In conclusion, getting the size of an array may help managers or admins manage the number of elements shown in the product page. Buyers will find it more convenient when shopping around because they do not need much time to seek key tags or information.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.