How to utilize liquid for loop in Shopify

Updated: July 14, 2021

Share:

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

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.

Recommend for you
Image Description
SMS, Email Marketing Automation

Top rated Marketing automation for Shopify stores

Learn more
Image Description
SEO Suite

Auto-optimize website elements and structure in one-click.

Learn more
proofo
Boost Sales [Free]

Boost sales: Sales Pop, Trust badges, Countdown timer, more

Learn more
Image Description
Photo Reviews [Free]

Use photo reviews to boost sales

Learn more

Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up