if, unless, elsif/else and case/when Conditional Tags in Shopify Liquid
The tags if, unless, elsif/else, case/when are some of the conditional tags used in the Shopify liquid. Control Flow or Conditional Tags determine which block of code should be executed and what content should be rendered based on given conditions. Let us discuss all conditional tags with examples.
if
The if condition tag renders an expression if a specific condition is true
.
{% if name == 'John' %}
Hello, John
{% endif %}
Output:
Hello, John
In the above example Hello, John is rendered only if the value in the variable name
is john.
unless
The unless tag is opposite to the if tag. It executes a block of code if a given condition is not met. See the below example.
{% unless page.title == 'Product' %}
This is not a Product page.
{% endunless %}
Output:
This is not a Product page.
The above code would be the equivalent of doing the following:
{% if page.title != 'Product' %}
This is not a Product page.
{% endunless %}
In this example, the text βThis is not a Product page.β is only rendered if the page title is not equal to Product.
elsif / else
The elsif / else tags add more conditions within an if or unless block. You can use the elsif tag to check for multiple conditions. else tag allows you to specify a default expression to execute when no other condition is met. You can use the else tag with the case, if, unless.
{% if name == 'John' %}
Hello, John
{% elsif name == 'Leo' %}
Hello, Leo
{% else %}
Hello, stranger.
{% endif %}
The elsif expression is checked only if the first condition inside the if
tag is not met. In the above example, elsif name == 'Leo'
is checked if if name == 'John'
is failed. If the expression elsif name == βLeoβ
is true, then it renders Hello, Leo as the output.
case/when
The case/when is a switch statement to compare a variable to different values, and execute a different block of code for each value. case
initializes the switch statement, and when
statements define the various conditions.
An optional else
statement at the end of the case provides code to execute if none of the conditions are met.
{% case name %}
{% when 'John' %}
Hello, John
{% when 'Leo' %}
Hello, Leo.
{% else %}
Hello, stranger.
{% endcase %}
and operator
The and
operator helps to add additional conditions to a tag. A condition that uses and
will only be true if both the left and the right sides of the condition are true
.
{% if product.title == 'Shirts' and product.price < 10000 %}
These shirts are affordable.
{% endif %}
Output:
These shirts are affordable.
or
The or
operator helps you to add additional conditions to a tag. A condition with an or
will be true if either the left or the right side of the condition is true
.
{% if product.title == 'Shoes' or product.title == 'Chappel' %}
You're buying a foot wear!
{% endif %}
Output:
You're buying a foot wear!
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
New Sections Not Showing Up in Shopify Theme Customizer! How to Fix
for loop, cycle and tablerow Iteration Tags in Shopify Liquid
Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag
layout, render and section Theme Tags in Shopify Liquid
Import and export may only appear at the top level
The POST method is not supported for this route. Supported methods: GET, HEAD
Scaling Node.js Applications With PM2 Clusters
'Switch' is not exported from 'react-router-dom'
Too many re-renders. React limits the number of renders to prevent an infinite loop
Explore All Blogs