How to control the content displayed on the page by using Liquid

Drive 20-40% of your revenue with Avada

Get Started

Let’s imagine that you are owning a cupcakes list on your Bakery Store sites and it is about time you had better take advantages Liquid to display a subset of those cupcakes. It means that you can easily control the content displayed on the page using Liquid. In this article, you will be shown ways on how to control flow statements in Liquid.

Let’s consider chocolate bananas in the cupcake list as one of your examples.

How to control flow statements in Liquid

• Step 1: Repeat collection and display cupcake’s information in cupcakes.html
• Step 2: Insert an if statement into the for loop
• Step 3: Not equal to
• Step 4: Use contains to display all chocolate cupcakes
• Step 5: Check the rating of cupcakes
• Step 6: Use Unless
• Step 7: Set up a case statement

Step 1: Repeat collection and display cupcake’s information in cupcakes.html

In the cupcakes.html, you can repeat the collection and show cupcake’s types, images, and description.

Step 2: Insert an if statement into the for loop

You can insert an if statement into the for loop to get the output of cupcakes surrounded and try many various ways of filtering cupcakes. You can try to only show the lemon cupcake.

Step 3: Not equal to

If you do not want to show Lemon cupcake, then use `not equal to’ structure to complete it.

Step 4: Use contains to display all chocolate cupcakes

Contains structure is used for checking any chocolate word existing in the string in case you want to display all chocolate cupcake and there are many kinds of them.

Step 5: Check the rating of cupcakes

You can try to get the lowest rated cupcakes. The rating will be checked if it is less than three. Also, with the highest rated cupcake, the rating will be checked if it is equal to or more than three.

Step 6: Use Unless

Unless is opposite an if statement’, hence, if you change the if statement to unless`, you will be back to receiving the lowest cupcake rated.

Step 7: Set up a case statement

In this step, you had better output icons to indicate the rating of your cupcakes. Take note that those icons can be named like sick.png, ok.png, orunhappy.png. You can check the picture below to see how it can be done with if statement. In fact, this way is ok, however, you can make it better when using a case statement. With case statements, you can set up the variable you are looking for, then, you can have multiple cases relying on the value of the variable.

Conclusion

The above-mentioned steps on how to control the content displayed on the page using Liquid is not too complicated to perform. If you have any trouble while performing these steps, don’t hesitate to leave us a comment.