How to control the content displayed on the page by using Liquid
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
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
unhappy.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.
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.
Auto-optimize website elements and structure in one-click.
Use Social proof to boost sales
Stunning size guide for great shopping experience
Increase customers’ shopping cart size with free shipping offer