AVADA logo
Published on

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

495 words3 min read
  • Name

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 {#repeat-collection-display-cupcake-information-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 {#insert-if-statement-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 {#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 {#use-contains-display-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 {#check-rating-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 {#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 {#set-up-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.


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.

Exclusive Offer: Shopify Deal for PageFly Audience

Start Your Online Business with Shopify 12 Day Free Trial + Pay Only 1$ For Your First Month