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

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!

 

Related Blogs

Shopify New Section

New Sections Not Showing Up in Shopify Theme Customizer! How to Fix

The newly created section shows on the Shopify theme customizer only if we set presets in the schema. Learn how to set preset in the Shopify section schema.

Iteration Tags in Shopify Liquid

for loop, cycle and tablerow Iteration Tags in Shopify Liquid

Iteration tags repeatedly run blocks of code. It renders an expression for every item in an array. Read more about for loop tag, cycle tag, tablerow tag, and its properties.

Theme Tags in Shopify Liquid

layout, render and section Theme Tags in Shopify Liquid

Theme tags allow us to select different theme layouts to use for different pages, and create sections or snippets that can be reusable in different templates. layout, render and section are theme tags.

Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag

Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag

When we work with images in Shopify, We have to get the image CDN URL from Shopify objects, get the theme assets URL for the theme images, or generate an HTML image tag from the image URL. Explains how to work with images in Shopify.

Import and export may only appear at the top level

Import and export may only appear at the top level

The error "import and export may only appear at the top level" may occur due to a missing closing brace when declaring a function or class. Explains with an example.

419 page expired Laravel error

419 page expired error in Laravel

419 page expired error in Laravel occurs when the valid CSRF token is missing in the post request. Laravel checks the CSRF token in VerifyCsrfToken middleware.

'Switch' is not exported from 'react-router-dom'

'Switch' is not exported from 'react-router-dom'

The React error 'Switch' is not exported from 'react-router-dom' occurs when we import 'Switch' from react-router-dom v6. In v6, ‘Switch’ was replaced by ‘Routes’

Block Scope and Shadowing in JavaScript

Block Scope and Shadowing in JavaScript

Learn what is a block, block scope, block-scoped variables, variable shadowing, and illegal shadowing in javascript with examples.

Delete an element from an array in PHP

Delete an element from an array in PHP

To delete an element from an array in PHP, use built-in functions unset(), array_splice(), or array_diff(). Learn how to delete elements using these functions.