Home > Shopify Development > How to Get First Item of Array in Liquid

How to Get First Item of Array in Liquid in Shopify

Sam Nguyen
Sam Updated: April 15, 2024

Share:

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

Your online is encountering the inconvenience in showing items or product tags in your product page. If you are using Liquid template language, you can take a look to view these steps below to help you gather items. The tutorial aims to assist you in getting the first item of array in Liquid.

Table of content

Overview of Liquid template language?

When it comes to language design of Shopify, Liquid is a popular one. Liquid is used as the fundamental ground of Shopify to upload content on the front page. Liquid has been sold for more than a decade and now is trusted by a lot of website developers.

What is array filter?

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

sample array filter

Callback funtion for each character in an array is activated when you turn on filter feature. The function assists you in forming a new array that can also give the value back to confirm the true feature of that element. Three arguments are suitable with callback including the value of element, the index of element and the array objects being transferred.

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.

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.

How to show the first item of array in Liquid

In the previous tutorial, we mentioned that the range of elements will be chosen randomly by the invocation of the callback. Therefore, in order to display the item exactly like your desire, why not continue looking these steps below.

Here is one sample formula that you can follow. For instance you are selling clothes for men and women and you want to put sales tag on these products, you can follow these steps below.

Input:


<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | first }}

Output:

sale

If you use filter inside a tag, you can add first with dot notation.


{% if product.tags.first == "sale" %}
  This product is on sale!
{% endif %}

Conclusion

In conclusion, adding items in one line may make the shopping journey become easier. Buyers will find it more convenient when shopping around because they do not need much time to seek key tags or information. Showing the first element as your want will help you provide important items to purchasers.


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.