Post

Shopify liquid conditional tag cheatsheet

Here’s a 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: Basic Conditional Tags

1. Simple if Condition

1
2
3
4
5

{% if condition %}
  <!-- Code to execute if the condition is true -->
{% endif %}

Example:

1
2
3
4
{% if product.available %}
  <p>This product is available!</p>
{% endif %}

2. If-Else Condition

1
2
3
4
5
6
{% if condition %}
  <!-- Code if condition is true -->
{% else %}
  <!-- Code if condition is false -->
{% endif %}

Example:

1
2
3
4
5
6
{% 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
8
{% if product.available %}
  <p>In Stock</p>
{% elsif product.incoming %}
  <p>Pre-order</p>
{% else %}
  <p>Out of Stock</p>
{% endif %}

Conditional with Operators

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:

1
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 %}
1
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 %}

Conclusion

This cheatsheet should help you build powerful and flexible logic within your Shopify themes. These examples range from simple conditional tags to complex scenarios involving multiple conditions and filters.

Let me know if you want to dive deeper into any of these!

This post is licensed under CC BY 4.0 by the author.