{"id":111372,"date":"2019-04-14T17:00:00","date_gmt":"2019-04-14T17:00:00","guid":{"rendered":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/"},"modified":"2026-04-08T08:15:37","modified_gmt":"2026-04-08T01:15:37","slug":"get-first-item-of-array-in-liquid","status":"publish","type":"post","link":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/","title":{"rendered":"How to Get First Item of Array in Liquid"},"content":{"rendered":"<p>Your online is encountering the inconvenience in showing items or product tags in your product page. If you are using <a href=\"https:\/\/avada.io\/blog\/liquid\">Liquid template language<\/a>, you can take a look to view these steps below to help you gather items. The tutorial aims to assist you in <strong>getting the first item of array in Liquid<\/strong>.<\/p>\n<p><strong>Table of content<\/strong><\/p>\n<ul>\n<li><a href=\"#overview-of-Liquid-template-language\">Overview of Liquid template language?<\/a><\/li>\n<li><a href=\"#what-is-array-filter?\">What is array filter?<\/a><\/li>\n<li><a href=\"#how-to-show-the-first-item-of-array-in-Liquid\">How to show the first item of array in Liquid<\/a><\/li>\n<\/ul>\n<h2 id=\"overview-of-liquid-template-language\">Overview of Liquid template language?<\/h2>\n<p>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.<\/p>\n<h2 id=\"what-is-array-filter\">What is array filter?<\/h2>\n<p>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:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cdn4.avada.io\/media\/shopify\/XGK95c3.jpg\" alt=\"sample array filter\" \/><\/p>\n<p><code class=\"language-plaintext highlighter-rouge\">Callback<\/code> 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 <code class=\"language-plaintext highlighter-rouge\">callback<\/code> including the value of element, the index of element and the array objects being transferred.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<h2 id=\"how-to-show-the-first-item-of-array-in-liquid\">How to show the first item of array in Liquid<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>Input:<\/p>\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\n&lt;!-- product.tags = \"sale\", \"mens\", \"womens\", \"awesome\" --&gt;\n{{ product.tags | first }}\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Output:<\/p>\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>sale\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>If you use filter inside a tag, you can add first with dot notation.<\/p>\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\n{% if product.tags.first == \"sale\" %}\n  This product is on sale!\n{% endif %}\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h3 id=\"conclusion\">Conclusion<\/h3>\n<p>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. <a href=\"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\">Showing the first element<\/a> as your want will help you provide important items to purchasers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[356,383],"tags":[],"class_list":["post-111372","post","type-post","status-publish","format-standard","hentry","category-shopify","category-shopify-devdocs"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Get First Item of Array in Liquid in Shopify<\/title>\n<meta name=\"description\" content=\"Learn how to get the first item of an array in Liquid for your Shopify store. Improve your product pages by displaying key tags efficiently. Step-by-step guide for beginners and experienced developers alike.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Get First Item of Array in Liquid in Shopify\" \/>\n<meta property=\"og:description\" content=\"Learn how to get the first item of an array in Liquid for your Shopify store. Improve your product pages by displaying key tags efficiently. Step-by-step guide for beginners and experienced developers alike.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/\" \/>\n<meta property=\"og:site_name\" content=\"Avada Commerce\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/avada.io\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-14T17:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-08T01:15:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn4.avada.io\/media\/shopify\/XGK95c3.jpg\" \/>\n<meta name=\"author\" content=\"Sam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@avadaio\" \/>\n<meta name=\"twitter:site\" content=\"@avadaio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Get First Item of Array in Liquid in Shopify","description":"Learn how to get the first item of an array in Liquid for your Shopify store. Improve your product pages by displaying key tags efficiently. Step-by-step guide for beginners and experienced developers alike.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/","og_locale":"en_US","og_type":"article","og_title":"How to Get First Item of Array in Liquid in Shopify","og_description":"Learn how to get the first item of an array in Liquid for your Shopify store. Improve your product pages by displaying key tags efficiently. Step-by-step guide for beginners and experienced developers alike.","og_url":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/","og_site_name":"Avada Commerce","article_publisher":"https:\/\/www.facebook.com\/avada.io\/","article_published_time":"2019-04-14T17:00:00+00:00","article_modified_time":"2026-04-08T01:15:37+00:00","og_image":[{"url":"https:\/\/cdn4.avada.io\/media\/shopify\/XGK95c3.jpg","type":"","width":"","height":""}],"author":"Sam","twitter_card":"summary_large_image","twitter_creator":"@avadaio","twitter_site":"@avadaio","twitter_misc":{"Written by":"Sam","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/#article","isPartOf":{"@id":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/"},"author":{"name":"Sam","@id":"https:\/\/avada.io\/#\/schema\/person\/cc9c647e3ec94d00dc61ae2e653cafb7"},"headline":"How to Get First Item of Array in Liquid","datePublished":"2019-04-14T17:00:00+00:00","dateModified":"2026-04-08T01:15:37+00:00","mainEntityOfPage":{"@id":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/"},"wordCount":462,"publisher":{"@id":"https:\/\/avada.io\/#organization"},"image":{"@id":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn4.avada.io\/media\/shopify\/XGK95c3.jpg","articleSection":["Shopify","Shopify Devdocs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/","url":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/","name":"How to Get First Item of Array in Liquid in Shopify","isPartOf":{"@id":"https:\/\/avada.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/#primaryimage"},"image":{"@id":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn4.avada.io\/media\/shopify\/XGK95c3.jpg","datePublished":"2019-04-14T17:00:00+00:00","dateModified":"2026-04-08T01:15:37+00:00","description":"Learn how to get the first item of an array in Liquid for your Shopify store. Improve your product pages by displaying key tags efficiently. Step-by-step guide for beginners and experienced developers alike.","breadcrumb":{"@id":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/#primaryimage","url":"https:\/\/cdn4.avada.io\/media\/shopify\/XGK95c3.jpg","contentUrl":"https:\/\/cdn4.avada.io\/media\/shopify\/XGK95c3.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/avada.io\/blog\/get-first-item-of-array-in-liquid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avada.io\/"},{"@type":"ListItem","position":2,"name":"Shopify","item":"https:\/\/avada.io\/category\/shopify"},{"@type":"ListItem","position":3,"name":"Shopify Devdocs","item":"https:\/\/avada.io\/category\/shopify-devdocs\/"},{"@type":"ListItem","position":4,"name":"How to Get First Item of Array in Liquid"}]},{"@type":"WebSite","@id":"https:\/\/avada.io\/#website","url":"https:\/\/avada.io\/","name":"Avada Commerce","description":"Blog","publisher":{"@id":"https:\/\/avada.io\/#organization"},"alternateName":"Avada Commerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avada.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/avada.io\/#organization","name":"Avada Commerce","alternateName":"Avada Commerce","url":"https:\/\/avada.io\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avada.io\/#\/schema\/logo\/image\/","url":"https:\/\/avada.io\/wp-content\/uploads\/2023\/06\/Avada-logo.jpeg","contentUrl":"https:\/\/avada.io\/wp-content\/uploads\/2023\/06\/Avada-logo.jpeg","width":1200,"height":1200,"caption":"Avada Commerce"},"image":{"@id":"https:\/\/avada.io\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/avada.io\/","https:\/\/x.com\/avadaio","https:\/\/www.youtube.com\/@avadaio","https:\/\/www.linkedin.com\/company\/avadacommerce"]},{"@type":"Person","@id":"https:\/\/avada.io\/#\/schema\/person\/cc9c647e3ec94d00dc61ae2e653cafb7","name":"Sam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/fdce01bbdb8b8eaa162f8ed372062707058abcd85e8b233af7cb4e01191c75f4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fdce01bbdb8b8eaa162f8ed372062707058abcd85e8b233af7cb4e01191c75f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fdce01bbdb8b8eaa162f8ed372062707058abcd85e8b233af7cb4e01191c75f4?s=96&d=mm&r=g","caption":"Sam"},"description":"Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Vietnam. 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.","sameAs":["https:\/\/wordpress-466542-3512282.cloudwaysapps.com","https:\/\/vn.linkedin.com\/in\/samng80"],"url":"https:\/\/avada.io\/authors\/sam\/"}]}},"meta_title":"How to Get First Item of Array in Liquid in Shopify","meta_description":"Learn how to get the first item of an array in Liquid for your Shopify store. Improve your product pages by displaying key tags efficiently. Step-by-step guide for beginners and experienced developers alike.","meta_keywords":"","feature_image_custom":"","updated_at_migrate":"2024-09-03T20:43:02+07:00","_links":{"self":[{"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts\/111372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/comments?post=111372"}],"version-history":[{"count":2,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts\/111372\/revisions"}],"predecessor-version":[{"id":158828,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts\/111372\/revisions\/158828"}],"wp:attachment":[{"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/media?parent=111372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/categories?post=111372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/tags?post=111372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}