Liquid tags

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

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' %}  {% 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>

code: {% form 'cart', cart %}  {% 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>

code: {% form 'contact' %}  {% 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>

code: {% form 'create_customer' %}  {% 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>

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' %}  {% 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>

code: {% form 'customer_address', customer.new_address %}  {% 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>

code: {% form 'customer_login' %}  {% 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>

code: {% form 'guest_login' %}  {% 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="✓" />  <input type="hidden" name="guest" value="true" /></form>

code: {% form 'localization' %}  {% 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>

code: {% form 'new_comment', article %}  {% 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>

code: {% form 'product', product %}  {% 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="✓" />  <input type="hidden" name="product-id" value="6786188247105" /></form>

code: {% form 'recover_customer_password' %}  {% 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>

code: {% form 'reset_customer_password' %}  {% 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>

code: {% form 'storefront_password' %}  {% 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>

code: {% form 'customer_login', return_to: routes.root_url %}  {% endform %}

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

code: {% form "product", product, id: 'custom-id', class: 'custom-class', data-example: '100' %}  {% 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="✓" />  <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:  {% for i in (1..4) -%} {% cycle 'one', 'two', 'three' %} {%- endfor %}  {% for i in (1..4) -%} {% cycle 'one', 'two', 'three' %} {%- endfor %}  {% for i in (1..4) -%} {% cycle 'group_1': 'one', 'two', 'three' %} {%- endfor %}  {% for i in (1..4) -%} {% cycle 'group_2': 'one', 'two', 'three' %} {%- endfor %}

data: {}

output:  one two three one  two three one two  one two three one  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 %}

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" 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" title="">Next &raquo;</a></span>

code:

data: {}

output:

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" 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!

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: "", id: "" %}

Creates a surface for rendering a block or blocks.

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 a [section](/themes/architecture/sections) file.

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 a [section](/themes/architecture/sections) file.

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

Liquid tags

Tags

Tags with parameters

Usage

Conditional tags

case

Examples

else

Examples

if

Examples

unless

Examples

HTML tags

form

Examples

style

Examples

Iteration tags

break

Examples

continue

Examples

cycle

Examples

else

Examples

for

Examples

paginate

Examples

tablerow

Examples

Syntax tags

comment

Examples

echo

Examples

liquid

Examples

raw

Examples

Theme tags

content_for

Examples

include

Examples

javascript

Examples

layout

Examples

render

Examples

section

Examples

sections

Examples

stylesheet

Examples

Variable tags

assign

Examples

capture

Examples

decrement

Examples

increment

Examples