{% case %}

Use the {% case %} tag to execute a particular block of code when a variable has a specified value.

Inside the {% case %} tag, use the {% when %} tag to define the values to check the variable against and the code blocks to execute if it matches.

Optionally, at the end of the {% case %} tag, use an {% else %} tag to execute a block of code if none of the conditions inside the {% case %} tag were met.

To close the {% case %} tag, use {% endcase %}.


{% case [variable] %}{% when option1 [or ...] %}...{% when option2 [, ...] %}...{% else %}...{% endcase %}

You can use the or operator to include more than one condition in a single when block. Each condition can only perform a single == comparison, so if you want to create more complex conditions (eg: contains, >=, etc...) you will need to use an if tag instead.

The case tag creates a new child scope.


{% case page.title_type.value %}
    {% when 'fullwidth' %}
        <span class="fullwidth">This is full width title</span>
    {% when 'halfwidth' or 'quarterwidth' %}
        <span class="{{page.title_type.value}}">This is partial width title</span>
    {% when "empty", "none", "null", "skip" %}
        {% comment %}No title{% endcomment %}
    {% else %}
        This title does not have a span
{% endcase %}

Developer Overview

Liquid Markup