Liquid tags

Liquid tags are used to define logic that tells templates what to do.


## Tags

Liquid tags are used to define logic that tells templates what to do.

### Tags with parameters

Certain tags accept parameters. Some tags have required parameters, and others are optional. For example, the `for` tag can accept parameters like `limit` to exit a loop at a specific index.

### Usage

Tags are wrapped with curly brace percentage delimiters `{% %}`. The text within the delimiters doesn't produce visible output when rendered.

In the example below, the `if` tag defines the condition to be met. If `product.available` returns `true`, then the price is displayed. Otherwise, the "sold-out" message is shown.

> **Tip:** You can nest multiple tags inside one set of delimiters using the [`liquid` tag](/docs/api/liquid/tags/liquid).


## Conditional tags

Conditional tags define conditions that determine whether blocks of Liquid code get executed.

### case

Deprecated: false


{% case variable %}
  {% when first_value %}
    first_expression
  {% when second_value %}
    second_expression
  {% else %}
    third_expression
{% endcase %}

Renders a specific expression depending on the value of a specific variable.

#### Examples

code:
{% case product.type %}
  {% when 'Health' %}
    This is a health potion.
  {% when 'Love' %}
    This is a love potion.
  {% else %}
    This is a potion.
{% endcase %}

data:
{"product":{"type":null}}

output:

    This is a health potion.
  

code:
{% case product.type %}
  {% when 'Love' or 'Luck' %}
    This is a love or luck potion.
  {% when 'Strength','Health' %}
    This is a strength or health potion.
  {% else %}
    This is a potion.
{% endcase %}

data:
{"product":{"type":null}}

output:

    This is a strength or health potion.
  

### else

Deprecated: false


{% else %}
  expression

Allows you to specify a default expression to execute when no other condition is met.

#### Examples

code:
{% if product.available %}
  This product is available!
{% else %}
  This product is sold out!
{% endif %}

data:
{"product":{"available":true}}

output:

  This product is available!


### if

Deprecated: false


{% if condition %}
  expression
{% endif %}

Renders an expression if a specific condition is `true`.

#### Examples

code:
{% if product.compare_at_price > product.price %}
  This product is on sale!
{% endif %}

data:
{"product":{"compare_at_price":"10.00","price":"0.00"}}

output:

  This product is on sale!


code:
{% if product.type == 'Love' %}
  This is a love potion!
{% elsif product.type == 'Health' %}
  This is a health potion!
{% endif %}

data:
{"product":{"type":null}}

output:

  This is a health potion!


### unless

Deprecated: false


{% unless condition %}
  expression
{% endunless %}

Renders an expression unless a specific condition is `true`.

#### Examples

code:
{% unless product.has_only_default_variant %}
  // Variant selection functionality
{% endunless %}

data:
{"product":{"has_only_default_variant":false}}

output:

  // Variant selection functionality


## HTML tags

HTML tags render HTML elements using Shopify-specific attributes.

### form

Deprecated: false


{% form 'form_type' %}
  content
{% endform %}

Generates an HTML `<form>` tag, including any required `<input>` tags to submit the form to a specific endpoint.

#### Examples

code:
{% form 'activate_customer_password' %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/account/activate" accept-charset="UTF-8"><input type="hidden" name="form_type" value="activate_customer_password" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'cart', cart %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/cart" id="cart_form" accept-charset="UTF-8" class="shopify-cart-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="cart" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'contact' %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form"><input type="hidden" name="form_type" value="contact" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'create_customer' %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/account" id="create_customer" accept-charset="UTF-8" data-login-with-shop-sign-up="true"><input type="hidden" name="form_type" value="create_customer" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'currency' %}
  {{ form | currency_selector }}
{% endform %}

data:
{}

output:
<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="shopify-currency-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="return_to" value="/services/liquid_rendering/resource" />
  <select name="currency"><option value="AED">AED د.إ</option><option value="AFN">AFN ؋</option><option value="AUD">AUD $</option><option value="CAD" selected="selected">CAD $</option><option value="CHF">CHF CHF</option><option value="CZK">CZK Kč</option><option value="DKK">DKK kr.</option><option value="EUR">EUR €</option><option value="GBP">GBP £</option><option value="HKD">HKD $</option><option value="ILS">ILS ₪</option><option value="JPY">JPY ¥</option><option value="KRW">KRW ₩</option><option value="MYR">MYR RM</option><option value="NZD">NZD $</option><option value="PLN">PLN zł</option><option value="SEK">SEK kr</option><option value="SGD">SGD $</option><option value="USD">USD $</option></select>
</form>

code:
{% form 'customer' %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form"><input type="hidden" name="form_type" value="customer" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'customer_address', customer.new_address %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/account/addresses" id="address_form_new" accept-charset="UTF-8"><input type="hidden" name="form_type" value="customer_address" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'customer_login' %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/account/login" id="customer_login" accept-charset="UTF-8" data-login-with-shop-sign-in="true"><input type="hidden" name="form_type" value="customer_login" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'guest_login' %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/account/login" id="customer_login_guest" accept-charset="UTF-8"><input type="hidden" name="form_type" value="guest_login" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
<input type="hidden" name="guest" value="true" /></form>

code:
{% form 'localization' %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/localization" id="localization_form" accept-charset="UTF-8" class="shopify-localization-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="localization" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="return_to" value="/services/liquid_rendering/resource?fast_storefront_renderer=1" />
  <!-- form content -->
</form>

code:
{% form 'new_comment', article %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/blogs/potion-notions/how-to-tell-if-you-have-run-out-of-invisibility-potion/comments#comment_form" id="comment_form" accept-charset="UTF-8" class="comment-form"><input type="hidden" name="form_type" value="new_comment" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'product', product %}
  <!-- form content -->
{% endform %}

data:
{"product":{"id":6786188247105}}

output:
<form method="post" action="/cart/add" id="product_form_6786188247105" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
<input type="hidden" name="product-id" value="6786188247105" /></form>

code:
{% form 'recover_customer_password' %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/account/recover" accept-charset="UTF-8"><input type="hidden" name="form_type" value="recover_customer_password" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'reset_customer_password' %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/account/reset" accept-charset="UTF-8"><input type="hidden" name="form_type" value="reset_customer_password" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'storefront_password' %}
  <!-- form content -->
{% endform %}

data:
{}

output:
<form method="post" action="/password" id="login_form" accept-charset="UTF-8" class="storefront-password-form"><input type="hidden" name="form_type" value="storefront_password" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

code:
{% form 'customer_login', return_to: routes.root_url %}
  <!-- form content -->
{% endform %}

data:
{"routes":{"root_url":"/"}}

output:
<form method="post" action="/account/login" id="customer_login" accept-charset="UTF-8" data-login-with-shop-sign-in="true"><input type="hidden" name="form_type" value="customer_login" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="return_to" value="/" />
  <!-- form content -->
</form>

code:
{% form "product", product, id: 'custom-id', class: 'custom-class', data-example: '100' %}
  <!-- form content -->
{% endform %}

data:
{"product":{"id":6786188247105}}

output:
<form method="post" action="/cart/add" id="custom-id" accept-charset="UTF-8" class="custom-class" enctype="multipart/form-data" data-example="100"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
<input type="hidden" name="product-id" value="6786188247105" /></form>

### style

Deprecated: false


{% style %}
  CSS_rules
{% endstyle %}

Generates an HTML `<style>` tag with an attribute of `data-shopify`.

#### Examples

code:
{% style %}
  .h1 {
    color: {{ settings.colors_accent_1 }};
  }
{% endstyle %}

data:
{"settings":{"colors_accent_1":"#121212"}}

output:
<style data-shopify>
  .h1 {
    color: #121212;
  }
</style>

## Iteration tags

Iteration tags repeatedly run blocks of code.

### break

Deprecated: false


{% break %}

Stops a [`for` loop](/docs/api/liquid/tags/for) from iterating.

#### Examples

code:
{% for i in (1..5) -%}
  {%- if i == 4 -%}
    {% break %}
  {%- else -%}
    {{ i }}
  {%- endif -%}
{%- endfor %}

data:
{}

output:
1
2
3


### continue

Deprecated: false


{% continue %}

Causes a [`for` loop](/docs/api/liquid/tags/for) to skip to the next iteration.

#### Examples

code:
{% for i in (1..5) -%}
  {%- if i == 4 -%}
    {% continue %}
  {%- else -%}
    {{ i }}
  {%- endif -%}
{%- endfor %}

data:
{}

output:
1
2
3
5


### cycle

Deprecated: false


{% cycle string, string, ... %}

Loops through a group of strings and outputs them one at a time for each iteration of a [`for` loop](/docs/api/liquid/tags/for).

#### Examples

code:
{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

data:
{}

output:
one
two
three
one


code:
<!-- Iteration 1 -->
{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 2 -->
{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 3 -->
{% for i in (1..4) -%}
  {% cycle 'group_1': 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 4 -->
{% for i in (1..4) -%}
  {% cycle 'group_2': 'one', 'two', 'three' %}
{%- endfor %}

data:
{}

output:
<!-- Iteration 1 -->
one
two
three
one


<!-- Iteration 2 -->
two
three
one
two


<!-- Iteration 3 -->
one
two
three
one


<!-- Iteration 4 -->
one
two
three
one


### else

Deprecated: false


{% for variable in array %}
  first_expression
{% else %}
  second_expression
{% endfor %}

Allows you to specify a default expression to execute when a [`for` loop](/docs/api/liquid/tags/for) has zero length.

#### Examples

code:
{% for product in collection.products %}
  {{ product.title }}<br>
{% else %}
  There are no products in this collection.
{% endfor %}

data:
{"collection":{"products":[]}}

output:

  There are no products in this collection.


### for

Deprecated: false


{% for variable in array %}
  expression
{% endfor %}

Renders an expression for every item in an array.

#### Examples

code:
{% for product in collection.products -%}
  {{ product.title }}
{%- endfor %}

data:
{"collection":{"products":[{"title":"Draught of Immortality"},{"title":"Glacier ice"},{"title":"Health potion"},{"title":"Invisibility potion"}]}}

output:
Draught of Immortality
Glacier ice
Health potion
Invisibility potion


code:
{% for product in collection.products limit: 2 -%}
  {{ product.title }}
{%- endfor %}

data:
{"collection":{"products":[{"title":"Draught of Immortality"},{"title":"Glacier ice"},{"title":"Health potion"},{"title":"Invisibility potion"}]}}

output:
Draught of Immortality
Glacier ice


code:
{% for product in collection.products offset: 2 -%}
  {{ product.title }}
{%- endfor %}

data:
{"collection":{"products":[{"title":"Draught of Immortality"},{"title":"Glacier ice"},{"title":"Health potion"},{"title":"Invisibility potion"}]}}

output:
Health potion
Invisibility potion


code:
{% for i in (1..3) -%}
  {{ i }}
{%- endfor %}

{%- assign lower_limit = 2 -%}
{%- assign upper_limit = 4 -%}

{% for i in (lower_limit..upper_limit) -%}
  {{ i }}
{%- endfor %}

data:
{}

output:
1
2
3

2
3
4


code:
{% for product in collection.products reversed -%}
  {{ product.title }}
{%- endfor %}

data:
{"collection":{"products":[{"title":"Draught of Immortality"},{"title":"Glacier ice"},{"title":"Health potion"},{"title":"Invisibility potion"}]}}

output:
Invisibility potion
Health potion
Glacier ice
Draught of Immortality


### paginate

Deprecated: false


{% paginate array by page_size %}
  {% for item in array %}
    forloop_content
  {% endfor %}
{% endpaginate %}

The `paginate` tag allows the user to paginate to the 25,000th item in the array and no further. To reach items further in
the array the array should be filtered further before paginating. See
[Pagination Limits](/themes/best-practices/performance/platform#pagination-limits) for more information.

Splits an array's items across multiple pages.

#### Examples

code:
{% paginate collection.products by 5 %}
  {% for product in collection.products -%}
    {{ product.title }}
  {%- endfor %}

  {{- paginate | default_pagination }}
{% endpaginate %}

data:
{"collection":{"products":[{"title":"Blue Mountain Flower"},{"title":"Charcoal"},{"title":"Crocodile tears"},{"title":"Dandelion milk"},{"title":"Draught of Immortality"}],"products_count":19}}

output:

  Blue Mountain Flower
Charcoal
Crocodile tears
Dandelion milk
Draught of Immortality

<span class="page current">1</span> <span class="page"><a href="/services/liquid_rendering/resource?page=2&amp;phcursor=eyJhbGciOiJIUzI1NiJ9.eyJzayI6InByb2R1Y3RfdGl0bGUiLCJzdiI6IkRyYXVnaHQgb2YgSW1tb3J0YWxpdHkiLCJkIjoiZiIsInVpZCI6NjgxNjg5OTU5NjM1MywibCI6NSwibyI6MCwiciI6IkNQIiwidiI6MX0.cI1VfwgIUpNegdz2U63BONT-Vj6zpSSpk5cbASKxt9o" title="">2</a></span> <span class="page"><a href="/services/liquid_rendering/resource?page=3" title="">3</a></span> <span class="page"><a href="/services/liquid_rendering/resource?page=4" title="">4</a></span> <span class="next"><a href="/services/liquid_rendering/resource?page=2&amp;phcursor=eyJhbGciOiJIUzI1NiJ9.eyJzayI6InByb2R1Y3RfdGl0bGUiLCJzdiI6IkRyYXVnaHQgb2YgSW1tb3J0YWxpdHkiLCJkIjoiZiIsInVpZCI6NjgxNjg5OTU5NjM1MywibCI6NSwibyI6MCwiciI6IkNQIiwidiI6MX0.cI1VfwgIUpNegdz2U63BONT-Vj6zpSSpk5cbASKxt9o" title="">Next &raquo;</a></span>


code:


data:
{}

output:


code:
{% paginate collection.products by 4 %}
  {% for product in collection.products limit: 4 -%}
    {{ product.title }}
  {%- endfor %}
{% endpaginate -%}

<!-- Less performant method -->
{% for product in collection.products limit: 4 -%}
  {{ product.title }}
{%- endfor -%}

data:
{"collection":{"products":[{"title":"Blue Mountain Flower"},{"title":"Charcoal"},{"title":"Crocodile tears"},{"title":"Dandelion milk"}],"products_count":19}}

output:

  Blue Mountain Flower
Charcoal
Crocodile tears
Dandelion milk

<!-- Less performant method -->
Blue Mountain Flower
Charcoal
Crocodile tears
Dandelion milk


code:
{% paginate collection.products by 3, window_size: 1 %}
  {% for product in collection.products -%}
    {{ product.title }}
  {%- endfor %}

  {{- paginate | default_pagination }}
{% endpaginate %}

data:
{"collection":{"products":[{"title":"Blue Mountain Flower"},{"title":"Charcoal"},{"title":"Crocodile tears"}],"products_count":19}}

output:

  Blue Mountain Flower
Charcoal
Crocodile tears

<span class="page current">1</span> <span class="deco">&hellip;</span> <span class="page"><a href="/services/liquid_rendering/resource?page=7" title="">7</a></span> <span class="next"><a href="/services/liquid_rendering/resource?page=2&amp;phcursor=eyJhbGciOiJIUzI1NiJ9.eyJzayI6InByb2R1Y3RfdGl0bGUiLCJzdiI6IkNyb2NvZGlsZSB0ZWFycyIsImQiOiJmIiwidWlkIjo2NzkyNjAyMzIwOTYxLCJsIjozLCJvIjowLCJyIjoiQ1AiLCJ2IjoxfQ.Fl97VRghMJ4RTtcch6AIxXJEPfmYRVRsnnFMR-yeTDk" title="">Next &raquo;</a></span>


### tablerow

Deprecated: false


{% tablerow variable in array %}
  expression
{% endtablerow %}

Generates HTML table rows for every item in an array.

#### Examples

code:
<table>
  {% tablerow product in collection.products %}
    {{ product.title }}
  {% endtablerow %}
</table>

data:
{"collection":{"products":[{"title":"Draught of Immortality"},{"title":"Glacier ice"},{"title":"Health potion"},{"title":"Invisibility potion"}]}}

output:
<table>
  <tr class="row1">
<td class="col1">
    Draught of Immortality
  </td><td class="col2">
    Glacier ice
  </td><td class="col3">
    Health potion
  </td><td class="col4">
    Invisibility potion
  </td></tr>

</table>

code:
<table>
  {% tablerow product in collection.products cols: 2 %}
    {{ product.title }}
  {% endtablerow %}
</table>

data:
{"collection":{"products":[{"title":"Draught of Immortality"},{"title":"Glacier ice"},{"title":"Health potion"},{"title":"Invisibility potion"}]}}

output:
<table>
  <tr class="row1">
<td class="col1">
    Draught of Immortality
  </td><td class="col2">
    Glacier ice
  </td></tr>
<tr class="row2"><td class="col1">
    Health potion
  </td><td class="col2">
    Invisibility potion
  </td></tr>

</table>

code:
<table>
  {% tablerow product in collection.products limit: 2 %}
    {{ product.title }}
  {% endtablerow %}
</table>

data:
{"collection":{"products":[{"title":"Draught of Immortality"},{"title":"Glacier ice"},{"title":"Health potion"},{"title":"Invisibility potion"}]}}

output:
<table>
  <tr class="row1">
<td class="col1">
    Draught of Immortality
  </td><td class="col2">
    Glacier ice
  </td></tr>

</table>

code:
<table>
  {% tablerow product in collection.products offset: 2 %}
    {{ product.title }}
  {% endtablerow %}
</table>

data:
{"collection":{"products":[{"title":"Draught of Immortality"},{"title":"Glacier ice"},{"title":"Health potion"},{"title":"Invisibility potion"}]}}

output:
<table>
  <tr class="row1">
<td class="col1">
    Health potion
  </td><td class="col2">
    Invisibility potion
  </td></tr>

</table>

code:
<table>
  {% tablerow i in (1..3) %}
    {{ i }}
  {% endtablerow %}
</table>

{%- assign lower_limit = 2 -%}
{%- assign upper_limit = 4 -%}

<table>
  {% tablerow i in (lower_limit..upper_limit) %}
    {{ i }}
  {% endtablerow %}
</table>

data:
{}

output:
<table>
  <tr class="row1">
<td class="col1">
    1
  </td><td class="col2">
    2
  </td><td class="col3">
    3
  </td></tr>

</table><table>
  <tr class="row1">
<td class="col1">
    2
  </td><td class="col2">
    3
  </td><td class="col3">
    4
  </td></tr>

</table>

## Syntax tags

Syntax tags control how Liquid code is processed and rendered.

### comment

Deprecated: false


{% comment %}
  content
{% endcomment %}

Prevents an expression from being rendered or output.

#### Examples

code:
{% # this is a comment %}

{% # for i in (1..3) -%}
  {{ i }}
{% # endfor %}

{%
  ###############################
  # This is a comment
  # across multiple lines
  ###############################
%}

data:
{}

output:







code:
{% liquid
  # this is a comment
  assign topic = 'Learning about comments!'
  echo topic
%}

data:
{}

output:
Learning about comments!

### doc

Deprecated: false


{% doc %}
  Renders a message.

  @param {string} foo - A string value.
  @param {string} [bar] - An optional string value.

  @example
  {% render 'message', foo: 'Hello', bar: 'World' %}
{% enddoc %}
{{ foo }}, {{ bar }}!

Documents template elements with annotations.

#### Examples

### echo

Deprecated: false


{% liquid
  echo expression
%}

Outputs an expression.

#### Examples

code:
{% echo product.title %}

{% liquid
  echo product.price | money
%}

data:
{"product":{"price":"10.00","title":"Health potion"}}

output:
Health potion

$10.00

### liquid

Deprecated: false


{% liquid
  expression
%}

Allows you to have a block of Liquid without delimeters on each tag.

#### Examples

code:
{% liquid
  # Show a message that's customized to the product type

  assign product_type = product.type | downcase
  assign message = ''

  case product_type
    when 'health'
      assign message = 'This is a health potion!'
    when 'love'
      assign message = 'This is a love potion!'
    else
      assign message = 'This is a potion!'
  endcase

  echo message
%}

data:
{"product":{"type":null}}

output:
This is a health potion!

### raw

Deprecated: false


{% raw %}
  expression
{% endraw %}

Outputs any Liquid code as text instead of rendering it.

#### Examples

code:
{% raw %}
{{ 2 | plus: 2 }} equals 4.
{% endraw %}

data:
{}

output:

{{ 2 | plus: 2 }} equals 4.


## Theme tags

Theme tags assign or render content that’s part of your [theme](/themes/architecture).

### content_for

Deprecated: false


{% content_for 'blocks' %}
{% content_for 'block', type: "slide", id: "slide-1" %}

Creates a designated area in your theme where blocks can be rendered.

#### Examples

code:


data:
{}

output:


code:


data:
{}

output:


### include

Deprecated: true


{% include 'filename' %}

Renders a [snippet](/themes/architecture/snippets).

#### Examples

### javascript

Deprecated: false


{% javascript %}
  javascript_code
{% endjavascript %}

JavaScript code included in [section](/storefronts/themes/architecture/sections), [block](/storefronts/themes/architecture/blocks) and [snippet](/storefronts/themes/architecture/snippets) files.

#### Examples

### layout

Deprecated: false


{% layout name %}

Specify which [layout](/themes/architecture/layouts) to use.

#### Examples

code:


data:


output:


### render

Deprecated: false


{% render 'filename' %}

Renders a [snippet](/themes/architecture/snippets) or [app block](/themes/architecture/sections/section-schema#render-app-blocks).

#### Examples

code:


data:
{}

output:


code:


data:
{}

output:


code:


data:
{}

output:


### section

Deprecated: false


{% section 'name' %}

Renders a [section](/themes/architecture/sections).

#### Examples

code:
{% section 'header' %}

data:
{"cart":{"item_count":2},"request":{"origin":"https://polinas-potent-potions.myshopify.com","page_type":"index"},"routes":{"account_url":"/account","cart_url":"/cart","root_url":"/","search_url":"/search"},"settings":{"accent_icons":"text","cart_type":"notification","inputs_shadow_vertical_offset":4,"predictive_search_enabled":true,"social_facebook_link":"","social_instagram_link":"","social_pinterest_link":"","social_snapchat_link":"","social_tiktok_link":"","social_tumblr_link":"","social_twitter_link":"","social_vimeo_link":"","social_youtube_link":""},"shop":{"customer_accounts_enabled":true,"name":"Polina's Potent Potions"}}

output:
<div id="shopify-section-header" class="shopify-section section-header"><link rel="stylesheet" href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-list-menu.css?v=151968516119678728991663872413" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-search.css?v=96455689198851321781663872411" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-menu-drawer.css?v=182311192829367774911663872416" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-cart-notification.css?v=183358051719344305851663872409" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-cart-items.css?v=23917223812499722491663872408" media="print" onload="this.media='all'"><link rel="stylesheet" href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-price.css?v=65402837579211014041663872409" media="print" onload="this.media='all'">
  <link rel="stylesheet" href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-loading-overlay.css?v=167310470843593579841663872415" media="print" onload="this.media='all'"><noscript><link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-list-menu.css?v=151968516119678728991663872413" rel="stylesheet" type="text/css" media="all" /></noscript>
<noscript><link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-search.css?v=96455689198851321781663872411" rel="stylesheet" type="text/css" media="all" /></noscript>
<noscript><link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-menu-drawer.css?v=182311192829367774911663872416" rel="stylesheet" type="text/css" media="all" /></noscript>
<noscript><link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-cart-notification.css?v=183358051719344305851663872409" rel="stylesheet" type="text/css" media="all" /></noscript>
<noscript><link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/component-cart-items.css?v=23917223812499722491663872408" rel="stylesheet" type="text/css" media="all" /></noscript>

<style>
  header-drawer {
    justify-self: start;
    margin-left: -1.2rem;
  }

  .header__heading-logo {
    max-width: 90px;
  }

  @media screen and (min-width: 990px) {
    header-drawer {
      display: none;
    }
  }

  .menu-drawer-container {
    display: flex;
  }

  .list-menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .list-menu--inline {
    display: inline-flex;
    flex-wrap: wrap;
  }

  summary.list-menu__item {
    padding-right: 2.7rem;
  }

  .list-menu__item {
    display: flex;
    align-items: center;
    line-height: calc(1 + 0.3 / var(--font-body-scale));
  }

  .list-menu__item--link {
    text-decoration: none;
    padding-bottom: 1rem;
    padding-top: 1rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
  }

  @media screen and (min-width: 750px) {
    .list-menu__item--link {
      padding-bottom: 0.5rem;
      padding-top: 0.5rem;
    }
  }
</style><style data-shopify>.header {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .section-header {
    margin-bottom: 0px;
  }

  @media screen and (min-width: 750px) {
    .section-header {
      margin-bottom: 0px;
    }
  }

  @media screen and (min-width: 990px) {
    .header {
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }</style><script src="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/details-disclosure.js?v=153497636716254413831663872415" defer="defer"></script>
<script src="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/details-modal.js?v=4511761896672669691663872416" defer="defer"></script>
<script src="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/cart-notification.js?v=160453272920806432391663872410" defer="defer"></script><svg xmlns="http://www.w3.org/2000/svg" class="hidden">
  <symbol id="icon-search" viewbox="0 0 18 19" fill="none">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.03 11.68A5.784 5.784 0 112.85 3.5a5.784 5.784 0 018.18 8.18zm.26 1.12a6.78 6.78 0 11.72-.7l5.4 5.4a.5.5 0 11-.71.7l-5.41-5.4z" fill="currentColor"/>
  </symbol>

  <symbol id="icon-close" class="icon icon-close" fill="none" viewBox="0 0 18 17">
    <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
  </symbol>
</svg>
<sticky-header class="header-wrapper color-background-1 gradient header-wrapper--border-bottom">
  <header class="header header--middle-left header--mobile-center page-width header--has-menu"><header-drawer data-breakpoint="tablet">
        <details id="Details-menu-drawer-container" class="menu-drawer-container">
          <summary class="header__icon header__icon--menu header__icon--summary link focus-inset" aria-label="Menu">
            <span>
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" fill="none" viewBox="0 0 18 16">
  <path d="M1 .5a.5.5 0 100 1h15.71a.5.5 0 000-1H1zM.5 8a.5.5 0 01.5-.5h15.71a.5.5 0 010 1H1A.5.5 0 01.5 8zm0 7a.5.5 0 01.5-.5h15.71a.5.5 0 010 1H1a.5.5 0 01-.5-.5z" fill="currentColor">
</svg>

              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" fill="none" viewBox="0 0 18 17">
  <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
</svg>

            </span>
          </summary>
          <div id="menu-drawer" class="gradient menu-drawer motion-reduce" tabindex="-1">
            <div class="menu-drawer__inner-container">
              <div class="menu-drawer__navigation-container">
                <nav class="menu-drawer__navigation">
                  <ul class="menu-drawer__menu has-submenu list-menu" role="list"><li><a href="/" class="menu-drawer__menu-item list-menu__item link link--text focus-inset">
                            Home
                          </a></li><li><details id="Details-menu-drawer-menu-item-2">
                            <summary class="menu-drawer__menu-item list-menu__item link link--text focus-inset">
                              Catalog
                              <svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
</svg>

                              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</svg>

                            </summary>
                            <div id="link-catalog" class="menu-drawer__submenu has-submenu gradient motion-reduce" tabindex="-1">
                              <div class="menu-drawer__inner-submenu">
                                <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
                                  <svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
</svg>

                                  Catalog
                                </button>
                                <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1"><li><a href="/collections/potions" class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
                                          Potions
                                        </a></li><li><a href="/collections/ingredients" class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
                                          Ingredients
                                        </a></li></ul>
                              </div>
                            </div>
                          </details></li><li><a href="/pages/contact" class="menu-drawer__menu-item list-menu__item link link--text focus-inset">
                            Contact
                          </a></li></ul>
                </nav>
                <div class="menu-drawer__utility-links"><a href="/account" class="menu-drawer__account link focus-inset h5">
                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-account" fill="none" viewBox="0 0 18 19">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4.5a3 3 0 116 0 3 3 0 01-6 0zm3-4a4 4 0 100 8 4 4 0 000-8zm5.58 12.15c1.12.82 1.83 2.24 1.91 4.85H1.51c.08-2.6.79-4.03 1.9-4.85C4.66 11.75 6.5 11.5 9 11.5s4.35.26 5.58 1.15zM9 10.5c-2.5 0-4.65.24-6.17 1.35C1.27 12.98.5 14.93.5 18v.5h17V18c0-3.07-.77-5.02-2.33-6.15-1.52-1.1-3.67-1.35-6.17-1.35z" fill="currentColor">
</svg>

Account</a><ul class="list list-social list-unstyled" role="list"></ul>
                </div>
              </div>
            </div>
          </div>
        </details>
      </header-drawer><h1 class="header__heading"><a href="/" class="header__heading-link link link--text focus-inset"><span class="h2">Polina&#39;s Potent Potions</span></a></h1><nav class="header__inline-menu">
          <ul class="list-menu list-menu--inline" role="list"><li><a href="/" class="header__menu-item list-menu__item link link--text focus-inset">
                    <span>Home</span>
                  </a></li><li><header-menu>
                    <details id="Details-HeaderMenu-2">
                      <summary class="header__menu-item list-menu__item link focus-inset">
                        <span>Catalog</span>
                        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</svg>

                      </summary>
                      <ul id="HeaderMenu-MenuList-2" class="header__submenu list-menu list-menu--disclosure gradient caption-large motion-reduce global-settings-popup" role="list" tabindex="-1"><li><a href="/collections/potions" class="header__menu-item list-menu__item link link--text focus-inset caption-large">
                                Potions
                              </a></li><li><a href="/collections/ingredients" class="header__menu-item list-menu__item link link--text focus-inset caption-large">
                                Ingredients
                              </a></li></ul>
                    </details>
                  </header-menu></li><li><a href="/pages/contact" class="header__menu-item list-menu__item link link--text focus-inset">
                    <span>Contact</span>
                  </a></li></ul>
        </nav><div class="header__icons">
      <details-modal class="header__search">
        <details>
          <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label="Search">
            <span>
              <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false" role="presentation">
                <use href="#icon-search">
              </svg>
              <svg class="modal__toggle-close icon icon-close" aria-hidden="true" focusable="false" role="presentation">
                <use href="#icon-close">
              </svg>
            </span>
          </summary>
          <div class="search-modal modal__content gradient" role="dialog" aria-modal="true" aria-label="Search">
            <div class="modal-overlay"></div>
            <div class="search-modal__content search-modal__content-bottom" tabindex="-1"><predictive-search class="search-modal__form" data-loading-text="Loading..."><form action="/search" method="get" role="search" class="search search-modal__form">
                  <div class="field">
                    <input class="search__input field__input"
                      id="Search-In-Modal"
                      type="search"
                      name="q"
                      value=""
                      placeholder="Search"role="combobox"
                        aria-expanded="false"
                        aria-owns="predictive-search-results-list"
                        aria-controls="predictive-search-results-list"
                        aria-haspopup="listbox"
                        aria-autocomplete="list"
                        autocorrect="off"
                        autocomplete="off"
                        autocapitalize="off"
                        spellcheck="false">
                    <label class="field__label" for="Search-In-Modal">Search</label>
                    <input type="hidden" name="options[prefix]" value="last">
                    <button class="search__button field__button" aria-label="Search">
                      <svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
                        <use href="#icon-search">
                      </svg>
                    </button>
                  </div><div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
                      <div class="predictive-search__loading-state">
                        <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg>
                      </div>
                    </div>

                    <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span></form></predictive-search><button type="button" class="search-modal__close-button modal__close-button link link--text focus-inset" aria-label="Close">
                <svg class="icon icon-close" aria-hidden="true" focusable="false" role="presentation">
                  <use href="#icon-close">
                </svg>
              </button>
            </div>
          </div>
        </details>
      </details-modal><a href="/account" class="header__icon header__icon--account link focus-inset small-hide">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-account" fill="none" viewBox="0 0 18 19">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4.5a3 3 0 116 0 3 3 0 01-6 0zm3-4a4 4 0 100 8 4 4 0 000-8zm5.58 12.15c1.12.82 1.83 2.24 1.91 4.85H1.51c.08-2.6.79-4.03 1.9-4.85C4.66 11.75 6.5 11.5 9 11.5s4.35.26 5.58 1.15zM9 10.5c-2.5 0-4.65.24-6.17 1.35C1.27 12.98.5 14.93.5 18v.5h17V18c0-3.07-.77-5.02-2.33-6.15-1.52-1.1-3.67-1.35-6.17-1.35z" fill="currentColor">
</svg>

          <span class="visually-hidden">Account</span>
        </a><a href="/cart" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble"><svg class="icon icon-cart" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
  <path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"/>
</svg>
<span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">2</span><span class="visually-hidden">2 items</span>
          </div></a>
    </div>
  </header>
</sticky-header>

<cart-notification>
  <div class="cart-notification-wrapper page-width">
    <div id="cart-notification" class="cart-notification focus-inset color-background-1 gradient" aria-modal="true" aria-label="Item added to your cart" role="dialog" tabindex="-1">
      <div class="cart-notification__header">
        <h2 class="cart-notification__heading caption-large text-body"><svg class="icon icon-checkmark color-foreground-text" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9" fill="none">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.35.643a.5.5 0 01.006.707l-6.77 6.886a.5.5 0 01-.719-.006L.638 4.845a.5.5 0 11.724-.69l2.872 3.011 6.41-6.517a.5.5 0 01.707-.006h-.001z" fill="currentColor"/>
</svg>
Item added to your cart</h2>
        <button type="button" class="cart-notification__close modal__close-button link link--text focus-inset" aria-label="Close">
          <svg class="icon icon-close" aria-hidden="true" focusable="false"><use href="#icon-close"></svg>
        </button>
      </div>
      <div id="cart-notification-product" class="cart-notification-product"></div>
      <div class="cart-notification__links">
        <a href="/cart" id="cart-notification-button" class="button button--secondary button--full-width"></a>
        <form action="/cart" method="post" id="cart-notification-form">
          <button class="button button--primary button--full-width" name="checkout">Check out</button>
        </form>
        <button type="button" class="link button-label">Continue shopping</button>
      </div>
    </div>
  </div>
</cart-notification>
<style data-shopify>
  .cart-notification {
     display: none;
  }
</style>


<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "Polina\u0026#39;s Potent Potions",
    
    "sameAs": [
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      ""
    ],
    "url": "https:\/\/polinas-potent-potions.myshopify.com"
  }
</script>
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": "Polina\u0026#39;s Potent Potions",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https:\/\/polinas-potent-potions.myshopify.com\/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      },
      "url": "https:\/\/polinas-potent-potions.myshopify.com"
    }
  </script>
</div>

### sections

Deprecated: false


{% sections 'name' %}

Renders a [section group](/themes/architecture/section-groups).

#### Examples

### stylesheet

Deprecated: false


{% stylesheet %}
  css_styles
{% endstylesheet %}

CSS styles included in [section](/storefronts/themes/architecture/sections), [block](/storefronts/themes/architecture/blocks), and [snippet](/storefronts/themes/architecture/snippets) files.

#### Examples

## Variable tags

Variable tags enable you to create new Liquid variables.

 > Caution:
 > Predefined [Liquid objects](/docs/api/liquid/objects) can be overridden by variables with the same name. To make sure that you can access all Liquid objects, make sure that your variable name doesn't match a predefined object's name.

### assign

Deprecated: false


{% assign variable_name = value %}

Creates a new variable.

#### Examples

code:
{%- assign product_title = product.title | upcase -%}

{{ product_title }}

data:
{"product":{"title":"Health potion"}}

output:
HEALTH POTION

### capture

Deprecated: false


{% capture variable %}
  value
{% endcapture %}

Creates a new variable with a string value.

#### Examples

code:
{%- assign up_title = product.title | upcase -%}
{%- assign down_title = product.title | downcase -%}
{%- assign show_up_title = true -%}

{%- capture title -%}
  {% if show_up_title -%}
    Upcase title: {{ up_title }}
  {%- else -%}
    Downcase title: {{ down_title }}
  {%- endif %}
{%- endcapture %}

{{ title }}

data:
{"product":{"title":"Health potion"}}

output:


Upcase title: HEALTH POTION



### decrement

Deprecated: false


{% decrement variable_name %}

Creates a new variable, with a default value of -1, that's decreased by 1 with each subsequent call.

#### Examples

code:
{% decrement variable %}
{% decrement variable %}
{% decrement variable %}

data:
{}

output:
-1
-2
-3

### increment

Deprecated: false


{% increment variable_name %}

Creates a new variable, with a default value of 0, that's increased by 1 with each subsequent call.

#### Examples

code:
{% increment variable %}
{% increment variable %}
{% increment variable %}

data:
{}

output:
0
1
2