Liquid and/or: Multiple conditions in Shopify

Would you want to offer choices for visitors? Then you had better insert code for multiple conditions in Liquid. Since 2006, Liquid has become one of the most popular template languages in Shopify. Thanks to Liquid backbone, you can use tags or filters in order to upload complex content on your front page. This tutorial today focuses on and/or condition.

Table of content

Brief introduction to Liquid

As you know, Liquid is classified into three subcategories consisting of objects, filters and tags. Liquid use objects to show the location of 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.

Within control flow, you can divide into other conditions: if, else, when/case and and/or. Today tutorial focuses on and/or condition.

Let’s move to the next part to understand more about and/or tag.

How to utilize multiple conditions

First of all, you can use and and or tags to add more than one condition in a control flow. and and or can go together to make conditions more complex. Besides, and tag is used to add further details while or is suitable with offering options for customers.

In case your statements have both and and or tag, then Liquid will evaluate and operator first then or operator. You are not able to use parentheses to simulate an order of operations and control the order of operator evaluation.

Regarding to and operator, it allows you to add additional condition to tags. The most important thing about and statement is that a condition with an and will be true if both the left and right side are true.

Input


{% if line_item.grams > 20000 and customer_address.city == 'Ottawa' %}
  You're buying a heavy item, and live in the same city as our store. Choose local pick-up as a shipping option to avoid paying high shipping costs.
{% endif %}

Output


You're buying a heavy item, and live in the same city as our store. Choose local pick-up as a shipping option to avoid paying high shipping costs.

Regarding to or operator, it also lets you add additional condition. A condition with an or will be true if either the left or the right side is true. You can see the below example

Input


{% if customer.tags contains 'VIP' or customer.email contains 'mycompany.com' %}
  Welcome! We're pleased to offer you a special discount of 15% on all products.
{% else %}
  Welcome to our store!
{% endif %}

Output


Welcome! We're pleased to offer you a special discount of 15% on all products.

Conclusion

In conclusion, and and or operators help to add more information. The important thing that you should notice is that the condition of the left and right side is right. And and or are used frequently by website developers because they are useful statements. We hope that you understand and address your problems.