{"id":111308,"date":"2019-07-13T17:00:00","date_gmt":"2019-07-13T17:00:00","guid":{"rendered":"https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/"},"modified":"2026-04-08T09:02:06","modified_gmt":"2026-04-08T02:02:06","slug":"how-to-utilize-liquid-for-loop-in-shopify","status":"publish","type":"post","link":"https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/","title":{"rendered":"Liquid for loops"},"content":{"rendered":"<p>Liquid has been used in Shopify as a language template for more than a decade. In Liquid, you use tags consisting of comment, control flow, iteration, raw, and variable to show complex content. In this tutorial, we will show you how to <strong>show content for loops in Liquid<\/strong>.<\/p>\n<p><strong>Table of content<\/strong><\/p>\n<ul>\n<li><a href=\"#introducttion-liquid-iteration-types\">Brief introduction to Liquid and iteration types<\/a><\/li>\n<li><a href=\"#show-liquid-loops\">How to show liquid for loops<\/a><\/li>\n<\/ul>\n<h2 id=\"introducttion-liquid-iteration-types\">Brief introduction to Liquid and iteration types<\/h2>\n<p>There are three types in Liquid codes including objects, tags, and filters. Liquid use objects to show the location of the content on a page. Double curly braces denote objects and variable names. Filters change a Liquid object\u2019s output. Tags create logic and control flow for a template. Tags begin with two curly braces and percent signs. Tags can be divided into three types: control flow, iteration, and variable assignment.<\/p>\n<p>In iteration type, <code class=\"language-plaintext highlighter-rouge\">for<\/code> contains attributes of its parents for loops. Forloop object can only be used within tags. In general, <code class=\"language-plaintext highlighter-rouge\">for<\/code> of iteration executes a block of code. You can insert a list of products on your front page. Look at the example:<\/p>\n<p><strong>Input<\/strong><\/p>\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\r\n{% for product in collection.products %}\r\n    {{ product.title }}\r\n  {% endfor %}\r\n\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p><strong>Output<\/strong><\/p>\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\r\nhat shirt pants\r\n\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h2 id=\"show-liquid-loops\">How to show liquid for loop<\/h2>\n<p>Forloop can be divided into <code class=\"language-plaintext highlighter-rouge\">break<\/code> and <code class=\"language-plaintext highlighter-rouge\">continue<\/code>. First, <code class=\"language-plaintext highlighter-rouge\">break<\/code> assists loops to stop iterating when it encounters the <code class=\"language-plaintext highlighter-rouge\">break<\/code> tag. For instance, in a chain of number starting from 1 to 5, but you want to stop the chain at number 3, then you follow:<\/p>\n<p><strong>Input<\/strong><\/p>\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\r\n{% for i in (1..5) %}\r\n  {% if i == 4 %}\r\n    {% break %}\r\n  {% else %}\r\n    {{ i }}\r\n  {% endif %}\r\n{% endfor %}\r\n\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p><strong>Output<\/strong><\/p>\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\r\n1 2 3\r\n\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Second, <code class=\"language-plaintext highlighter-rouge\">continue<\/code> tag helps the loop to skip the current iteration when it encounters <code class=\"language-plaintext highlighter-rouge\">continue<\/code> tag. You want to skip number 4 in the chain starting from 1 to 5.<\/p>\n<p><strong>Input<\/strong><\/p>\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\r\n{% for i in (1..5) %}\r\n  {% if i == 4 %}\r\n    {% continue %}\r\n  {% else %}\r\n    {{ i }}\r\n  {% endif %}\r\n{% endfor %}\r\n\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p><strong>Output<\/strong><\/p>\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\r\n1 2 3   5\r\n\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>To sum up, <strong>forloop in iteration<\/strong> helps you to skip a number in a chain or stop a chain. You use <code class=\"language-plaintext highlighter-rouge\">break<\/code> and <code class=\"language-plaintext highlighter-rouge\">continue<\/code> to display any types of chain in your front page such as numbers and letters. We hope that this tutorial is useful to you and let us know your difficulties.<\/p>\n<p><strong>Related post: How to manage if Liquid loops over the content in Shopify<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Liquid has been used in Shopify as a language template for more than a decade. In Liquid, you use tags consisting of comment, control flow, iteration, raw, and variable to show complex content. In this tutorial, we will show you how to show content for loops in Liquid. Table of content Brief introduction to Liquid [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[356,383],"tags":[],"class_list":["post-111308","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 utilize liquid for loop in Shopify<\/title>\n<meta name=\"description\" content=\"Learn how to utilize Liquid for loops in Shopify to iterate over arrays and create dynamic content, such as product lists or image galleries.\" \/>\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\/how-to-utilize-liquid-for-loop-in-shopify\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to utilize liquid for loop in Shopify\" \/>\n<meta property=\"og:description\" content=\"Learn how to utilize Liquid for loops in Shopify to iterate over arrays and create dynamic content, such as product lists or image galleries.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/\" \/>\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-07-13T17:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-08T02:02:06+00:00\" \/>\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 utilize liquid for loop in Shopify","description":"Learn how to utilize Liquid for loops in Shopify to iterate over arrays and create dynamic content, such as product lists or image galleries.","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\/how-to-utilize-liquid-for-loop-in-shopify\/","og_locale":"en_US","og_type":"article","og_title":"How to utilize liquid for loop in Shopify","og_description":"Learn how to utilize Liquid for loops in Shopify to iterate over arrays and create dynamic content, such as product lists or image galleries.","og_url":"https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/","og_site_name":"Avada Commerce","article_publisher":"https:\/\/www.facebook.com\/avada.io\/","article_published_time":"2019-07-13T17:00:00+00:00","article_modified_time":"2026-04-08T02:02:06+00:00","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\/how-to-utilize-liquid-for-loop-in-shopify\/#article","isPartOf":{"@id":"https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/"},"author":{"name":"Sam","@id":"https:\/\/avada.io\/#\/schema\/person\/cc9c647e3ec94d00dc61ae2e653cafb7"},"headline":"Liquid for loops","datePublished":"2019-07-13T17:00:00+00:00","dateModified":"2026-04-08T02:02:06+00:00","mainEntityOfPage":{"@id":"https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/"},"wordCount":329,"publisher":{"@id":"https:\/\/avada.io\/#organization"},"articleSection":["Shopify","Shopify Devdocs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/","url":"https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/","name":"How to utilize liquid for loop in Shopify","isPartOf":{"@id":"https:\/\/avada.io\/#website"},"datePublished":"2019-07-13T17:00:00+00:00","dateModified":"2026-04-08T02:02:06+00:00","description":"Learn how to utilize Liquid for loops in Shopify to iterate over arrays and create dynamic content, such as product lists or image galleries.","breadcrumb":{"@id":"https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/avada.io\/blog\/how-to-utilize-liquid-for-loop-in-shopify\/#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":"Liquid for loops"}]},{"@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 utilize liquid for loop in Shopify","meta_description":"Learn how to utilize Liquid for loops in Shopify to iterate over arrays and create dynamic content, such as product lists or image galleries.","meta_keywords":"","feature_image_custom":"","updated_at_migrate":"2024-08-28T21:43:02+07:00","_links":{"self":[{"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts\/111308","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=111308"}],"version-history":[{"count":3,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts\/111308\/revisions"}],"predecessor-version":[{"id":158962,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts\/111308\/revisions\/158962"}],"wp:attachment":[{"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/media?parent=111308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/categories?post=111308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/tags?post=111308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}