How to utilize liquid for loop in Shopify
Drive 20-40% of your revenue with Avada
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 and iteration types
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’s 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.
In iteration type, for contains attributes of its parents for loops. Forloop object can only be used within tags. In general, for of iteration executes a block of code. You can insert a list of products on your front page. Look at the example:
Input
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
Output
hat shirt pants
How to show liquid for loop
Forloop can be divided into break and continue. First, break assists loops to stop iterating when it encounters the break 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:
Input
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
Output
1 2 3
Second, continue tag helps the loop to skip the current iteration when it encounters continue tag. You want to skip number 4 in the chain starting from 1 to 5.
Input
{% for i in (1..5) %}
{% if i == 4 %}
{% continue %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
Output
1 2 3 5
Conclusion
To sum up, forloop in iteration helps you to skip a number in a chain or stop a chain. You use break and continue 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.
Liquid
