[Shopify]Make counter variable using Liquid and for statement

Recently, we have wrote about counting blog articles for archive, and we often encounter to the situation where we want to count the numbers.

That's the time we use "counter variable". Counter variable will let us count, how many times it has looped in for loop. And also it can change the function according to the counter number.

So this time we will focus on Shopify version of counter variable using Liquid.

Simply count inside for loop using Liquid

First, we simply use for loop and count useing Liquid.

{% assign count = 0 %} {% for article in blog.articles %} 　{% assign count = count | plus: 1 %} {% endfor %} {{ count }}

First, use

{% assign count = 0 %}

and assign 0 to the variable "count".

Next, use for loop to do the same function and for each loop, we will add 1 to the variable "counter".

{% assign count = count | plus: 1 %}

And again add and assign 1 to counter variable.

And then, using

{{ count }}

to output the count.

Change the process according to the counter

Above, we have succeeded to count up in count variable.

So now we will change the process according to the count varianble. For example, if counter variable is less than 3, we will output "below 3", and if it's more than 4, we will output "above 4".

{% assign count = 0 %}

{% for article in blog.articles %}
　{% if count <= 3 %}
　　<p>below 3</p>
　{% endif %}　
　{% if count >= 4 %}
　　<p>above 4</p>
　{% endif %}
　{% assign count = count | plus: 1 %}
{% endfor %}

Then it should output when "below 3" and "above 4" according to the counter variable number.

This is done by using if statement.

Using several varianbles to count

For example, if you want to count tags in blog articles, it's not a good idea to loop each tags.

If you wan to do that, we need to set several variables first and use if statement to add to each variables in different conditions.

{% assign hello_tag = 0 %}
{% assign world_tag = 0 %} 
{% for article in blog.articles %}
　{% for tag in article.tags %}
　　{% if tag contains "hello" %}
　　　{% assign hello_tag = hello_tag | plus: 1 %}
　　{% endif %}
　　{% if tag contains "world" %}
　　　{% assign world_tag = world_tag | plus: 1 %}
　　{% endif %}
　{% endfor %}
{% endfor %}

In above, if "hello" is included count up hello_tag and if "world" is included world_tag will be count up.

In addition to that

means if "hello" is included. (If statement)

"contains" are one of the most usable code in Liquid so don't hesitate to use in your other codes as well!

Using for statement and Liquid to count up SUMMARY

We have so much situation that needs to count when we are developing themes. Or situation where we need to branch the process.

When you encounter those situations in the future Google it like "EC Penguin Shopify counter variable", then you'll be able to get to this article again.

Let me know if you have other summary article that you want me to write about. Thank you for reading till the end.

Have a nice day!