Conditional

To show or hide certain elements based on specific conditions, you can use conditional tags. This gives you more control over the frontend and can improve the user experience.

If

Using li-if, you can show an element when a specified condition is met. For instance, you can verify the availability of a product. If the condition is true, you can display the "Add to Cart" button or a specific tag.

Webflow

li-if = product.available != true

Shopify

{% if product.available != true %}
   <div class="product_tag">Sold out</div>
{% endif %}

Therefore, Shopify gives you a bunch of operators you can use to check if data is true or contains something. Here is a list of all the operators:

• ==

• !=

• >

• <

• <=

• >=

• or

• and

• contains

Unless

With this tag, you check if the condition is false. The functionality is the same as li-if.

Webflow

li-unless = product.available == true

Shopify

{% unless product.available == true %}
   <div class="product_tag">Sold out</div>
{% endunless %}

Case

When you want to display an element which should meet different conditions, you can wrap these elements with the li-case tag. Inside the wrapper, you put the elements with different li-when tags.

Webflow

li-case = product.type

Within li-case, you can only include elements with the li-when attribute. The value of this attribute specifies the condition to be met. If you leave the last li-when tag empty, it will act as an else condition. For Example:

Webflow

li-when = 'T-Shirt'

Shopify

<div> //Element where li-case was attached
   {% case product.type %}
     {% when 'T-Shirt' %}
         <div>T-Shirt</div>
      {% when 'sweater' %}
         <div>Sweater</div>
      {% else %}
      <div>Other products</div>
   {% endcase %}
</div>