How to Get First Item of Array in Liquid in Shopify
Drive 20-40% of your revenue with Avada
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?
- What is array filter?
- How to show the first item of array in Liquid
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:
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.
Liquid
