Shopify Liquid Conditional Tag Cheatsheet
With examples ranging from simple to more complex. It will help you understand how to use conditional logic in your Shopify theme templates:
1. Simple if Condition
1
2
3
| {% if condition %}
<!-- Code to execute if the condition is true -->
{% endif %}
|
Example:
1
2
3
| {% if product.available %}
<p>This product is available!</p>
{% endif %}
|
2. If-Else Condition
1
2
3
4
5
| {% if condition %}
<!-- Code if condition is true -->
{% else %}
<!-- Code if condition is false -->
{% endif %}
|
Example:
1
2
3
4
5
| {% if product.compare_at_price > product.price %}
<p>On Sale!</p>
{% else %}
<p>Regular Price</p>
{% endif %}
|
3. If-Elsif-Else Condition
1
2
3
4
5
6
7
| {% if condition1 %}
<!-- Code if condition1 is true -->
{% elsif condition2 %}
<!-- Code if condition2 is true -->
{% else %}
<!-- Code if neither condition is true -->
{% endif %}
|
Example:
1
2
3
4
5
6
7
| {% if product.available %}
<p>In Stock</p>
{% elsif product.incoming %}
<p>Pre-order</p>
{% else %}
<p>Out of Stock</p>
{% endif %}
|
4. Equality
1
2
3
| {% if product.type == "Shirt" %}
<p>This is a shirt</p>
{% endif %}
|
Check template type
1
2
3
| {%- if request.page_type == 'collection' or template.name == 'collection' -%}
<!-- This runs only on collection pages -->
{% endif %}
|
this is legacy code and may not work with modern shopify
1
| {% if template == 'collection' %}
|
5. Comparison Operators
Greater than: > Less than: < Greater than or equal to: >= Less than or equal to: <= Not equal to: !=
Example:
1
2
3
| {% if product.price < 100 %}
<p>This item is under $100</p>
{% endif %}
|
6. Logical Operators
And: and Or: or
Example:
1
2
3
| {% if product.available and product.price < 50 %}
<p>Special offer on this available item under $50!</p>
{% endif %}
|
Complex Conditional Logic
7. Combining Multiple Conditions
1
2
3
4
5
6
7
| {% if product.available and product.tags contains "featured" %}
<p>This product is available and featured!</p>
{% elsif product.tags contains "new-arrival" %}
<p>This is a new arrival!</p>
{% else %}
<p>Check other products</p>
{% endif %}
|
8. Using Unless (Inverse of If)
1
2
3
4
|
{% unless product.available %}
<p>This product is sold out.</p>
{% endunless %}
|
Explanation:
unless is the opposite of if. It will execute the code block only if the condition is false.
9. Checking Arrays or Strings
String contains: contains
Example:
1
2
3
4
|
{% if customer.email contains "gmail.com" %}
<p>Looks like you're using a Gmail account!</p>
{% endif %}
|
Array contains:
1
2
3
| {% if collection.tags contains "summer" %}
<p>This is a summer collection</p>
{% endif %}
|
Advanced Conditional Logic
10. For Loop with Conditionals
1
2
3
4
5
| {% for product in collections.all.products %}
{% if product.available %}
<p>{{ product.title }} is available</p>
{% endif %}
{% endfor %}
|
11. Checking the Length of Arrays
1
2
3
4
5
| {% if collections.frontpage.products.size > 0 %}
<p>We have {{ collections.frontpage.products.size }} products available.</p>
{% else %}
<p>No products available.</p>
{% endif %}
|
12. Check for Nil or Empty Values
1
2
3
4
5
| {% if product.description != blank %}
<p>{{ product.description }}</p>
{% else %}
<p>No description available</p>
{% endif %}
|
13. Combining Multiple Conditions with Nested Conditionals
1
2
3
4
5
6
7
8
9
10
| {% if product.available %}
<p>{{ product.title }} is in stock!</p>
{% if product.price < 20 %}
<p>This item is less than $20, great deal!</p>
{% else %}
<p>It’s over $20, but still worth it!</p>
{% endif %}
{% else %}
<p>Sorry, {{ product.title }} is out of stock.</p>
{% endif %}
|
14. Using Case-When (Switch Statement)
1
2
3
4
5
6
7
8
| {% case product.type %}
{% when "Shirt" %}
<p>This is a shirt.</p>
{% when "Pants" %}
<p>These are pants.</p>
{% else %}
<p>This is another type of product.</p>
{% endcase %}
|
Liquid Filters in Conditionals
15. Using Filters within Conditionals
1
2
3
| {% if product.title | downcase == "special product" %}
<p>This is the special product!</p>
{% endif %}
|
16. Using Contains with Strings or Arrays
1
2
3
| {% if product.tags contains "summer" %}
<p>This product is part of the summer collection!</p>
{% endif %}
|
17. Override default canonical for a page
1
2
3
4
5
| {% if request.path == '/your-specific-page-url' %}
<link rel="canonical" href="https://yourwebsite.com/your-custom-canonical-url">
{% else %}
<link rel="canonical" href="{{ canonical_url }}">
{% endif %}
|
18. Set a product to noindex
If you want to reserve your Google Crawl budget to your most relevant pages than you wanted to de-index, the irrelevant pages from the Google Crawl.
We can set a no-index value on product, pages and collections in Shopify by adding a no-index meta tag to each of the specific pages. In order to target the specific pages will use a conditional if statement and added to our themes header.
Add no-index code to specific products and collections
In the layout/theme.liquid add your conditional code within the <head> tags
1
2
3
4
5
6
| {% if
product.handle == 'example-1' or ]
collection.handle == 'candles' or
page.url == '/pages/privacy' %}
<meta name="robots" content="noindex" />
{% endif %}
|
Where to get the product handles from
Product handles can be taken from their URLs of the products. For instance, when viewing a product on the front end, if the URL of the product is example.com/products/my-product. Then the product handle is my-product
Where to get the collection handles from
Collection handles can be taken from their URLs of the collections. For instance, when viewing a collection on the front end, if the URL of the collection is example.com/collections/my-collection. Then the collection handle is my-collection