Shopify Liquid Conditional Cheatsheet
Shopify theme conditional Liquid tag code examples for coding shopify themes
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 %}
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