# Conditional

## 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.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-if = product.available != true
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}
{% endcolumns %}

\
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`.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-unless = product.available == true
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}
{% endcolumns %}

## 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.

{% code title="Webflow" fullWidth="false" %}

```
li-case = product.type
```

{% endcode %}

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:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-when = 'T-Shirt'
```

{% endcode %}
{% endcolumn %}

{% column %}

<pre class="language-liquid" data-title="Shopify" data-full-width="false"><code class="lang-liquid"><strong>&#x3C;div> //Element where li-case was attached
</strong>   {% case product.type %}
     {% when 'T-Shirt' %}
         &#x3C;div>T-Shirt&#x3C;/div>
      {% when 'sweater' %}
         &#x3C;div>Sweater&#x3C;/div>
      {% else %}
      &#x3C;div>Other products&#x3C;/div>
   {% endcase %}
<strong>&#x3C;/div>
</strong></code></pre>

{% endcolumn %}
{% endcolumns %}