Reference

The handle is used to access the attributes of a Liquid object. By default, it is the object’s title in lowercase with any spaces and special characters replaced by hyphens (-). Every object in Liquid (product, collection, blog, menu) has a handle. Learn more 

<!-- the content of the About Us page -->
{{ pages.about-us.content }}

A product with the title ‘shirt’ will automatically be given the handle shirt. If there is already a product with the handle ‘shirt’, the handle will auto-increment. In other words, all ‘shirt’ products created after the first one will receive the handle shirt-1, shirt-2, and so on. Learn more 

equals Learn more 

{% if product.title == 'Awesome Shoes' %}
  These shoes are awesome!
{% endif %}

does not equal Learn more 

greater than Learn more 

less than Learn more 

greater than or equal to Learn more 

less than or equal to Learn more 

condition A or condition B Learn more 

condition A and condition B Learn more 

checks for the presence of a substring inside a string or array Learn more 

{% if product.title contains 'Pack' %}
  This product’s title contains the word Pack.
{% endif %}

Strings are declared by wrapping the variable’s value in single or double quotes. Learn more 

{% assign my_string = 'Hello World!' %}

Numbers include floats and integers. Learn more 

{% assign my_num = 25 %}

Booleans are either true or false. No quotations are necessary when declaring a boolean. Learn more 

{% assign foo = true %}
{% assign bar = false %}

Nil is an empty value that is returned when Liquid code has no results. It is not a string with the characters ‘nil’. Nil is treated as false in the conditions of `{% if %}` blocks and other Liquid tags that check for the truthfulness of a statement. Learn more 

Arrays hold a list of variables of all types. To access items in an array, you can loop through each item in the array using a `for` tag or a `tablerow` tag. Learn more 

{% for tag in product.tags %}
  {{ tag }}
{% endfor %}

An EmptyDrop object is returned whenever you try to access a non-existent object (for example, a collection, page or blog that was deleted or hidden) by a handle. Learn more 

All values in Liquid are truthy, with the exception of `nil` and `false`. In this example, the variable is a string type but it evaluates as `true`. Learn more 

{% assign tobi = 'tobi' %}
{% if tobi %}
  This will always be true.
{% endif %}

The only values that are falsy in Liquid are `nil` and `false`. `nil` is returned when a Liquid object doesn’t have anything to return. For example, if a collection doesn’t have a collection image, `collection.image` will be set to `nil`. Learn more 

{% if collection.image %}
  <!-- output collection image -->
{% endif %}

Using hyphens, the `assign` statement doesn't output a blank line. Learn more 

{%- assign my_variable = "tomato" -%}
{{ my_variable }}

tomato

Executes a block of code only if a certain condition is met. Learn more 

{% if product.title == 'Awesome Shoes' %}
  These shoes are awesome!
{% endif %}

These shoes are awesome!

Adds more conditions within an `if` or `unless` block. Learn more 

<!-- If customer.name is equal to 'anonymous' -->
{% if customer.name == 'kevin' %}
  Hey Kevin!
{% elsif customer.name == 'anonymous' %}
  Hey Anonymous!
{% else %}
  Hi Stranger!
{% endif %}

Hey Anonymous!

Creates a switch statement to compare a variable with different values. `case` initializes the switch statement and `when` compares its values. Learn more 

{% assign handle = 'cake' %}
{% case handle %}
  {% when 'cake' %}
     This is a cake
  {% when 'cookie' %}
     This is a cookie
  {% else %}
     This is not a cake nor a cookie
{% endcase %}

This is a cake

Similar to `if`, but executes a block of code only if a certain condition is not met. Learn more 

{% unless product.title == 'Awesome Shoes' %}
  These shoes are not awesome.
{% endunless %}

These shoes are not awesome.

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

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

Generates an HTML `style` tag with an attribute of `data-shopify`. Learn more 

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

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

Repeatedly executes a block of code. Learn more 

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

hat shirt pants

Specifies a fallback case for a for loop which will run if the loop has zero length (for example, you loop over a collection that has no products). Learn more 

{% for product in collection.products %}
  {{ product.title }}
{% else %}
  This collection is empty.
{% endfor %}

This collection is empty.

Causes the loop to stop iterating when it encounters the break tag. Learn more 

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

1 2 3

Causes the loop to skip the current iteration when it encounters the continue tag. Learn more 

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

1 2 3 5

Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time cycle is called, the next string that was passed as a parameter is output. Learn more 

{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}

one
two
three
one

Splits an array's items across multiple pages. Learn more 

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

Generates an HTML `<table>`. Must be wrapped in an opening `<table>` and closing `</table>` HTML tags. Learn more 

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

<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
    <td class="col3">
      Batman Poster
    </td>
    <td class="col4">
      Bullseye Shirt
    </td>
    <td class="col5">
      Another Classic Vinyl
    </td>
    <td class="col6">
      Awesome Jeans
    </td>
  </tr>
</table>

Prevents an expression from being rendered or output. Any text inside `comment` tags won't be output, and any Liquid code will be parsed, but not executed. Learn more 

{% comment %}
  content
{% endcomment %}

Outputs an expression. Learn more 

{% echo product.title %}

{% liquid
  echo product.price | money
%}

Health potion

$10.00

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

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

This is a health potion!

Outputs any Liquid code as text instead of rendering it. Learn more 

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

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

Inserts a snippet from the snippets folder of a theme. Learn more 

JavaScript code included in a section file. Learn more 

{% javascript %}
  javascript_code
{% endjavascript %}

Loads an alternate template file from the layout folder of a theme. If no alternate layout is defined, the theme.liquid template is loaded by default. Learn more 

Renders a snippet from the snippets folder of a theme. When a snippet is rendered, the code inside it does not have access to the variables assigned within its parent template. Similarly, variables assigned within the snippet can't be accessed by the code outside of the snippet. This encapsulation increases performance and helps make theme code easier to understand and maintain. Learn more 

Inserts a section from the sections folder of a theme. Learn more 

{% section 'footer' %}

<div id="shopify-section-footer" class="shopify-section">
  <!-- content of sections/footer.liquid -->
</div>

Renders a section group. Use this tag to render section groups as part of the theme's layout content. Place the `sections` tag where you want to render it in the layout. Learn more 

{% sections 'name' %}

CSS styles included in a section file. Learn more 

{% stylesheet %}
  css_styles
{% endstylesheet %}

Creates a new variable. Learn more 

{% assign my_variable = false %}
{% if my_variable != true %}
  This statement is valid.
{% endif %}

This statement is valid.

Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through `{% capture %}` are strings. Learn more 

{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}

I am being captured.

Creates a new number variable, and increases its value by one every time it is called. The initial value is 0. Learn more 

{% increment variable %}
{{ variable }}
{% increment variable %}
{{ variable }}
{% increment variable %}
{{ variable }}

0
1
2

Creates a new number variable and decreases its value by one every time it is called. The initial value is -1. Learn more 

{% decrement variable %}
{{ variable }}
{% decrement variable %}
{{ variable }}
{% decrement variable %}
{{ variable }}

-1
-2
-3

Concatenates (combines) an array with another array. The resulting array contains all the elements of the original arrays. Learn more 

{% assign fruits = "apples, oranges" | split: ", " %}
{% assign vegetables = "broccoli, carrots" | split: ", " %}
{% assign plants = fruits | concat: vegetables %}
{{ plants | join: ", " }}

apples, oranges, brocolli, carrots

Joins the elements of an array with the character passed as the parameter. The result is a single string. Learn more 

{{ product.tags | join: ', ' }}

tag1, tag2, tag3

Returns the first element of an array. Learn more 

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | first }}

sale

Returns the item at the specified index in an array. Note that array numbering starts from zero, so the first item in an array is referenced with `[0]`. Learn more 

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags[2] }}

womens

Gets the last element in an array. Learn more 

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | last }}

awesome

Accepts an array element’s attribute as a parameter and creates a string out of each array element’s value. Learn more 

<!-- collections = {title: "Spring"}, {title: "Summer"} -->
{{ collections | map: 'title' }}

SpringSummer

Reverses the order of the items in an array. Learn more 

{% assign my_array = "a, b, c, d" | split: ", " %}
{{ my_array | reverse | join: ", " }}

d, c, b, a

Returns the length of a string or an array. Learn more 

{{ 'is this a 30 character string?' | size }}

30

Sorts the elements of an array by a given attribute. Learn more 

<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
   {{ product.title }}
{% endfor %}

A B a b

Removes any duplicate instances of elements in an array. Learn more 

{% assign fruits = "orange apple banana apple orange" %}
{{ fruits | split: ' ' | uniq | join: ' ' }}

orange apple banana

Creates an array including only the objects with a given property value, or any truthy value by default. Learn more 

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

{% assign kitchen_products = collection.products | where: "type", "kitchen" %}

Kitchen products:
{% for product in kitchen_products %}
- {{ product.title }}
{% endfor %}

All products:
- Vacuum
- Spatula
- Television
- Garlic press

Kitchen products:
- Spatula
- Garlic press

Returns the total item count for a specified variant in the cart. Learn more 

{{ cart | item_count_for_variant: 39888235757633 }}

1

Wraps a given tag in an HTML span tag, with a class attribute of active, if the tag is currently active. Only applies to collection tags. Learn more 

{% for tag in collection.all_tags %}
  {{- tag | highlight_active_tag | link_to_tag: tag }}
{% endfor %}

<a href="/services/liquid_rendering/extra-potent" title="Show products matching tag extra-potent"><span class="active">extra-potent</span></a>
<a href="/services/liquid_rendering/fresh" title="Show products matching tag fresh">fresh</a>
<a href="/services/liquid_rendering/healing" title="Show products matching tag healing">healing</a>

Generates an HTML a tag with an `href` attribute linking to a collection page that lists all products of the given product type. Learn more 

{{ 'Health' | link_to_type }}

<a href="/collections/types?q=Health" title="Health">Health</a>

Generates an HTML a tag with an `href` attribute linking to a collection page that lists all products of the given product vendor. Learn more 

{{ "Polina's Potent Potions" | link_to_vendor }}

<a href="/collections/vendors?q=Polina%27s%20Potent%20Potions" title="Polina's Potent Potions">Polina's Potent Potions</a>

Generates a collection URL with the provided `sort_by` parameter appended. This filter must be applied to a collection URL. Learn more 

{{ collection.url | sort_by: 'best-selling' }}

/collections/sale-potions?sort_by=best-selling

Generates a URL for a collection page that lists all products of the given product type. Learn more 

{{ 'Health' | url_for_type }}

/collections/types?q=health

Generates a URL for a collection page that lists all products from the given product vendor. Learn more 

{{ "Polina's Potent Potions" | url_for_vendor }}

/collections/vendors?q=Polina%27s%20Potent%20Potions

Generates a product URL within the context of the provided collection. Learn more 

{%- assign collection_product = collection.products.first -%}
{{ collection_product.url | within: collection }}

/collections/sale-potions/products/draught-of-immortality

Calculates the perceived brightness difference between two colors. With regards to accessibility, the W3C suggests that the brightness difference should be greater than 125. Learn more 

{{ '#fff00f' | brightness_difference: '#0b72ab' }}

129

Calculates the perceived brightness of the given color. Learn more 

{{ '#7ab55c' | color_brightness }}

153.21

Calculates the contrast ratio between two colors. Returns the numerator part of the ratio, which has a denominator of 1. For example, for a contrast ratio of 3.5:1, the filter returns 3.5. Learn more 

{{ '#495859' | color_contrast: '#fffffb' }}

7.4

Darkens the input color. Takes a value between 0 and 100 percent. Learn more 

{{ '#7ab55c' | color_darken: 30 }}

#355325

Desaturates the input color. Takes a value between 0 and 100 percent. Learn more 

{{ '#7ab55c' | color_desaturate: 30 }}

#869180

Calculates the color difference or distance between two colors. With regards to accessibility, the W3C suggests that the color difference should be greater than 500. Learn more 

{{ '#ff0000' | color_difference: '#abcdef' }}

528

Extracts a component from the color. Valid components are alpha, red, green, blue, hue, saturation and lightness. Learn more 

{{ '#7ab55c' | color_extract: 'red' }}

122

Lightens the input color. Takes a value between 0 and 100 percent. Learn more 

{{ '#7ab55c' | color_lighten: 30 }}

#d0e5c5

Blends together two colors. Blend factor should be a value between 0 and 100 percent. Learn more 

{{ '#7ab55c' | color_mix: '#ffc0cb', 50 }}

#bdbb94

Modifies the given component of a color (rgb, alpha, hue and saturation). The filter will return a color type that includes the modified format — for example, if you modify the alpha channel, the filter will return the color in `rgba()` format, even if your input color was in hex format. Learn more 

{{ '#7ab55c' | color_modify: 'red', 255 }}
{{ '#7ab55c' | color_modify: 'alpha', 0.85 }}

#ffb55c
rgba(122, 181, 92, 0.85)

Saturates the input color. Takes a value between 0 and 100 percent. Learn more 

{{ '#7ab55c' | color_saturate: 30 }}

#6ed938

Converts a CSS color string to CSS `rgb()` format. If the input color has an alpha component, then the output will be in CSS `rgba()` format. Learn more 

{{ '#7ab55c' | color_to_rgb }}
{{ 'hsla(100, 38%, 54%, 0.5)' | color_to_rgb }}

rgb(122, 181, 92)
rgba(122, 181, 92, 0.5)

Converts a CSS color string to CSS `hsl()` format. If the input color has an alpha component, then the output will be in CSS `hsla()` format. Learn more 

{{ '#7ab55c' | color_to_hsl }}
{{ 'rgba(122, 181, 92, 0.5)' | color_to_hsl }}

hsl(100, 38%, 54%)
hsla(100, 38%, 54%, 0.5)

Converts a CSS color string to `hex6` format. Hex output is always in `hex6` format. If there is an alpha channel in the input color, it will not appear in the output. Learn more 

{{ 'rgb(122, 181, 92)' | color_to_hex }}
{{ 'rgba(122, 181, 92, 0.5)' | color_to_hex }}

#7ab55c
#7ab55c

Generates an HTML link to the customer login page. Learn more 

{{ 'Log in' | customer_login_link }}

<a href="/account/login" id="customer_login_link">Log in</a>

Generates an HTML link to log the customer out of their account and redirect to the homepage. Learn more 

{{ 'Log out' | customer_logout_link }}

<a href="/account/logout" id="customer_logout_link">Log out</a>

Generates an HTML link to the customer register page. Learn more 

{{ 'Create an account' | customer_register_link }}

<a href="/account/register" id="customer_register_link">Create an account</a>

Generates an HTML Button that enables a customer to follow the Shop in the Shop App. Learn more 

{{ shop | login_button: action: 'follow' }}

Sets a default value for any variable whose value is either `empty`, `false` or `nil`. Learn more 

{{ product.selected_variant.url | default: product.url }}

/products/health-potion

Generates default error messages for each possible value of `form.errors`. Learn more 

Generates HTML for a set of links for paginated results. Must be applied to the `paginate` object. Learn more 

{% paginate collection.products by 2 %}
  {% for product in collection.products %}
    {{- product.title }}
  {% endfor %}
  {{- paginate | default_pagination -}}
{% endpaginate %}

Draught of Immortality
Glacier ice

  <span class="page current">1</span> <span class="page"><a href="/services/liquid_rendering/resource?page=2" title="">2</a></span> <span class="next"><a href="/services/liquid_rendering/resource?page=2" title="">Next &raquo;</a></span>

Returns a CSS `@font-face` declaration to load the chosen font. Learn more 

<style>
  {{ settings.heading_font | font_face }}
</style>

<style>
  @font-face {
    font-family: "Neue Haas Unica";
    font-weight: 400;
    font-style: normal;
    src: url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff2"),
        url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.06cdfe33b4db0659278e9b5837a3e8bc0a9d4025.woff?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff");
  }
</style>

`font_modify` takes two arguments. The first indicates which property should be modified and the second is the modification to be made. While you can access every variant of the chosen font's family by using `font.variants`, you can more easily access specific styles and weights by using the font_modify filter. Learn more 

{% assign bold_font = settings.body_font | font_modify: 'weight', 'bold' %}
h2 {
  font-weight: {{ bolder_font.weight }};
}

h2 {
  font-weight: 900;
}

Returns a CDN URL for the chosen font. By default, `font_url` returns the woff2 version, but it can also be called with an additional parameter to specify the format. Both woff and woff2 are supported. Learn more 

{{ settings.type_header_font | font_url }}
{{ settings.type_base_font | font_url: 'woff' }}

https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?...9waWZ5Lmlv
https://fonts.shopifycdn.com/work_sans/worksans_n6.399ae4c4dd52d38e3f3214ec0cc9c61a0a67ea08.woff?...b63d5ca77de58c7a23ece904

Converts a timestamp into another date format. Learn more 

{{ article.created_at | date: '%B %d, %Y' }}

April 14, 2022

Converts a string, or object, into JSON format. Learn more 

{{ product | json }}

Generates a formatted weight for a variant object. The weight unit is set in the general settings in the Shopify admin. Learn more 

{%- assign variant = product.variants.first -%}
{{ variant.weight | weight_with_unit }}

0.2 kg

Wraps all instances of a specific string, within a given string, with an HTML strong tag with a class attribute of `highlight`. Learn more 

{% for item in search.results %}
  {% if item.object_type == 'product' %}
    {{ item.description | highlight: search.terms }}
  {% else %}
    {{ item.content | highlight: search.terms }}
  {% endif %}
{% endfor %}

This is a <strong class="highlight">love</strong> potion.

Generates an HTML hyperlink tag. Learn more 

{{ 'Shopify' | link_to: 'https://www.shopify.com' }}

<a href="https://www.shopify.com" title="" rel="nofollow">Shopify</a>

Generates an HTML tag for a given placeholder name. Learn more Learn more 

{{ 'collection-1' | placeholder_svg_tag }}

Generates an HTML link tag with a `rel` attribute of preload to `prioritize` loading a given Shopify-hosted asset. Learn more 

{{ 'cart.js' | asset_url | preload_tag: as: 'script' }}

<link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/cart.js?v=83971781268232213281663872410" rel="preload" as="script" rel="preload">

Generates a script tag. Learn more 

{{ 'shop.js' | asset_url | script_tag }}

<script src="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.js?28178" type="text/javascript"></script>

Generates a link tag that points to the given stylesheet. Learn more 

{{ 'shop.css' | asset_url | stylesheet_tag }}

<link href="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28178" rel="stylesheet" type="text/css" media="all" />

The `time_tag` filter converts a timestamp into an HTML `<time>` tag. The output format can be customized by passing date parameters to the `time_tag` filter. Learn more 

{{ article.published_at | time_tag }}
{{ article.published_at | time_tag: '%a, %b %d, %Y' }}

<time datetime="2016-02-24T14:47:51Z">Wed, 24 Feb 2016 09:47:51 -0500</time>
<time datetime="2016-02-24T14:47:51Z">Wed, Feb 24, 2016</time>

Returns the CDN URL for an image in the assets directory of a theme. Learn more 

{{ 'red-and-black-bramble-berries.jpg' | asset_img_url }}

//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/red-and-black-bramble-berries_small.jpg?315

Returns the CDN URL for a file in the assets directory of a theme. Learn more 

{{ 'cart.js' | asset_url }}

//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/cart.js?v=83971781268232213281663872410

Returns the CDN URL for an image in the Files page of the Shopify admin. Learn more 

{{ 'potions-header.png' | file_img_url }}

//polinas-potent-potions.myshopify.com/cdn/shop/files/potions-header_small.png?v=4246568442683817558

Returns the CDN URL for a file from the Files page of the Shopify admin. Learn more 

{{ 'disclaimer.pdf' | file_url }}

//polinas-potent-potions.myshopify.com/cdn/shop/files/disclaimer.pdf?v=9043651738044769859

Returns the CDN URL for a global asset. Learn more 

{{ 'lightbox.js' | global_asset_url | script_tag }}

<script src="//polinas-potent-potions.myshopify.com/cdn/s/global/lightbox.js" type="text/javascript"></script>

Returns the CDN URL for a globally accessible Shopify asset. Learn more 

{{ 'option_selection.js' | shopify_asset_url }}

//polinas-potent-potions.myshopify.com/cdn/shopifycloud/shopify/assets/themes_support/option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js

Generates an HTML select element with an option for each currency available on the store. Learn more 

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

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

Generates an HTML address display, with each address component ordered according to the address's locale. Learn more 

{{ shop.address | format_address }}

<p>Polina's Potions, LLC<br>150 Elgin Street<br>8th floor<br>Ottawa ON K2P 1L4<br>Canada</p>

Returns a string of translated text for a given translation key from a locale file. The translate filter has an alias of `t`, which is more commonly used. Learn more 

Returns the absolute value of a number or string that onnly contains a number. Learn more 

{{ -24 | abs }}
{{ "-1.23" | abs }}

24
1.23

Limits a number to a minimum value. Learn more 

{{ 2 | at_least: 5 }}
{{ 2 | at_least: 1 }}

5
2

Limits a number to a maximum value. Learn more 

{{ 2 | at_most: 5 }}
{{ 2 | at_most: 1 }}

2
1

Rounds an output up to the nearest integer. Learn more 

{{ 4.6 | ceil }}
{{ 4.3 | ceil }}

5
5

Divides an output by a number. The output is rounded down to the nearest integer. Learn more 

<!-- product.price = 200 -->
{{ product.price | divided_by: 10 }}

20

Rounds an output down to the nearest integer. Learn more 

{{ 4.6 | floor }}
{{ 4.3 | floor }}

4
4

Subtracts a number from an input. Learn more 

<!-- product.price = 200 -->
{{ product.price | minus: 15 }}

185

Adds a number to an output. Learn more 

<!-- product.price = 200 -->
{{ product.price | plus: 15 }}

215

Rounds the output to the nearest integer or specified number of decimals. Learn more 

{{ 4.6 | round }}
{{ 4.3 | round }}
{{ 4.5612 | round: 2 }}

5
4
4.56

Multiplies an output by a number. Learn more 

<!-- product.price = 200 -->
{{ product.price | times: 1.15 }}

230

Divides an output by a number and returns the remainder. Learn more 

{{ 12 | modulo:5 }}

2

Generates an IFrame that contains a YouTube video player. Learn more 

{% if product.featured_media.media_type == "external_video" %}
  {{ product.featured_media | external_video_tag }}
{% endif %}

<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" src="https://www.youtube-nocookie.com/embed/neFK-pv2sKY?controls=1&amp;enablejsapi=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0">
  ...
</iframe>

Used to set parameters for the YouTube player rendered by external_video_tag. Learn more 

{% if product.featured_media.media_type == "external_video" %}
  {{ product.featured_media | external_video_url: color: "white" |  external_video_tag }}
{% endif %}

<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" src="https://www.youtube-nocookie.com/embed/neFK-pv2sKY?color=white&amp;controls=1&amp;enablejsapi=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0">
  ...
</iframe>

When used with a model or a video object, the `img_tag` filter generates an image tag for the media's preview image. Learn more 

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | img_tag }}
{% endif %}

<img src="//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_small.jpg?v=1560284062">

When used with a media object, the `img_url` filter generates an image URL for the media's preview image. Learn more 

{% if product.featured_media.media_type == "video" %}
  {{ product.featured_media | img_url: '500x500' }}
  {{ product.featured_media | img_url }}
{% endif %}

//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_500x500.jpg?v=1560284062
//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_small.jpg?v=1560284062

Generates an appropriate tag for the media. Learn more 

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | media_tag }}
{% endif %}

<model-viewer src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  ...
</model-viewer>

Generates a Google model viewer component tag for the given 3D model. Learn more 

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | model_viewer_tag }}
{% endif %}

<model-viewer src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  ...
</model-viewer>

Generates a video tag. Learn more 

{% if product.featured_media.media_type == "video" %}
  {{ product.featured_media | video_tag }}
{% endif %}

<video playsinline="true" controls="">
  <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/master.m3u8?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=BIQQpuyEVnyt9HUw4o9QOmQ1z2c=" type="application/x-mpegURL">
  <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-360p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=1kEi8GmNIssxVvjyzy7AOuGP-E0=" type="video/mp4">
  <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-480p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=8Lt74XmFWP6hOF1WRdqNkDWRm2U=" type="video/mp4">
  <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/HD-720p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=vlNXWpvgRT2bghrWovJPrN8w3mc=" type="video/mp4"><p>Sorry html5 video is not supported in this browser</p>
</video>

Generates an HTML element depending on the type of metafield. Learn more 

{{ product.metafields.instructions.wash | metafield_tag }}

<!-- if single_line_text_field metafields output the text inside a <span> element with an attribute of class="metafield-single_line_text_field". -->
<span class="metafield-single_line_text_field">This is a single line of text.</span>

Generates a text version of the metafield data. Learn more 

{{ product.metafields.instructions.wash | metafield_text }}

Formats the price based on the shop’s ‘HTML without currency’ setting. Learn more 

{{ 145 | money }}

<!-- if "HTML without currency" is ${{ amount }} -->
$1.45
<!-- if "HTML without currency" is €{{ amount_no_decimals }} -->
$1

Formats the price based on the shop’s ‘HTML with currency’ setting. Learn more 

{{ 1.45 | money_with_currency }}

<!-- if "HTML with currency" is ${{ amount }} CAD --> $1.45 CAD

Formats the price based on the shop’s ‘HTML with currency’ setting and excludes the decimal point and trailing zeros. Learn more 

<!-- if "HTML with currency" is ${{ amount }} CAD -->
{{ 20.00 | money_without_trailing_zeros }}

$20

Formats the price using a decimal. Learn more 

{{ 1.45 | money_without_currency }}

1.45

Generates an HTML container to host dynamic checkout buttons for a product. Learn more 

{% form 'product', product %}
  {{ form | payment_button }}
{% endform %}

<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="✓" />
  <div data-shopify="payment-button" data-has-selling-plan="true" data-has-fixed-selling-plan="false" class="shopify-payment-button"><button class="shopify-payment-button__button shopify-payment-button__button--unbranded shopify-payment-button__button--hidden" disabled="disabled" aria-hidden="true"> </button><button class="shopify-payment-button__more-options shopify-payment-button__button--hidden" disabled="disabled" aria-hidden="true"> </button></div>
</form>

Generates the HTML for the Shop Pay Installments banner. Learn more 

{% form 'product', product %}
  {{ form | payment_terms }}
{% endform %}

Returns the URL for an SVG image of a given payment type. Learn more 

{% for type in shop.enabled_payment_types %}
  <img src="{{ type | payment_type_img_url }}" />
{% endfor %}

<img src="//polinas-potent-potions.myshopify.com/cdn/shopifycloud/shopify/assets/payment_icons/american_express-2264c9b8b57b23b0b0831827e90cd7bcda2836adc42a912ebedf545dead35b20.svg" />

Generates an HTML SVG tag for a given payment type. Learn more 

{% for type in shop.enabled_payment_types -%}
  {{ type | payment_type_svg_tag }}
{% endfor %}

Appends characters to a string. Learn more 

{{ 'sales' | append: '.jpg' }}

sales.jpg

Converts a dash-separated string into CamelCase. Learn more 

{{ 'coming-soon' | camelcase }}

ComingSoon

Capitalizes the first word in a string. Learn more 

{{ 'capitalize me' | capitalize }}

Capitalize me

Converts a string into lowercase. Learn more 

{{ 'UPPERCASE' | downcase }}

uppercase

Escapes a string. Learn more 

{{ "<p>test</p>" | escape }}

<p>test</p>

Formats a string into a handle. Learn more 

{{ '100% M & Ms!!!' | handleize }}

100-m-ms

Converts a string into a SHA-1 hash using a hash message authentication code (HMAC). Pass the secret key for the message as a parameter to the filter. Learn more 

{% assign my_secret_string = "ShopifyIsAwesome!" | hmac_sha1: "secret_key" %}
 My encoded string is: {{ my_secret_string }}

My encoded string is: 30ab3459e46e7b209b45dba8378fcbba67297304

Converts a string into a SHA-256 hash using a hash message authentication code (HMAC). Pass the secret key for the message as a parameter to the filter. Learn more 

{% assign my_secret_string = "ShopifyIsAwesome!" | hmac_sha256: "secret_key" %}
My encoded string is: {{ my_secret_string }}

My encoded string is: 30ab3459e46e7b209b45dba8378fcbba67297304

Converts a string into an MD5 hash. Learn more 

<img src="https://www.gravatar.com/avatar/{{ comment.email | remove: ' ' | strip_newlines | downcase | md5 }}" />

<img src="https://www.gravatar.com/avatar/2a95ab7c950db9693c2ceb767784c201" />

Inserts a `<br>` linebreak HTML tag in front of each line break in a string. Learn more 

{% capture var %}
One
Two
Three
{% endcapture %}
{{ var | newline_to_br }}

One<br>
Two<br>
Three<br>

Outputs the singular or plural version of a string based on the value of a number. The first parameter is the singular string and the second parameter is the plural string. Learn more 

{{ cart.item_count | pluralize: 'item', 'items' }}

3 items

Prepends characters to a string. Learn more 

{{ 'sale' | prepend: 'Made a great ' }}

Made a great sale

Removes all occurrences of a substring from a string. Learn more 

{{ "Hello, world. Goodbye, world." | remove: "world" }}

Hello, . Goodbye, .

Removes only the first occurrence of a substring from a string. Learn more 

{{ "Hello, world. Goodbye, world." | remove_first: "world" }}

Hello, . Goodbye, world.

Replaces all occurrences of a substring with a string. Learn more 

<!-- product.title = "Awesome Shoes" -->
{{ product.title | replace: 'Awesome', 'Mega' }}

Mega Shoes

Replaces the first occurrence of a substring with a string. Learn more 

<!-- product.title = "Awesome Awesome Shoes" -->
{{ product.title | replace_first: 'Awesome', 'Mega' }}

Mega Awesome Shoes

The slice filter returns a substring, starting at the specified index. An optional second parameter can be passed to specify the length of the substring. If no second parameter is given, a substring of one character will be returned. Learn more 

{{ "hello" | slice: 0 }}
{{ "hello" | slice: 1 }}
{{ "hello" | slice: 1, 3 }}

h
e
ell

The split filter takes on a substring as a parameter. The substring is used as a delimiter to divide a string into an array. You can output different parts of an array using array filters. Learn more 

{% assign words = "Hi, how are you today?" | split: ' ' %}
{% for word in words %}
{{ word }}
{% endfor %}

Hi,
how
are
you
today?

Strips tabs, spaces, and newlines (all whitespace) from the left and right side of a string. Learn more 

{{ '   too many spaces      ' | strip }}

too many spaces

Strips tabs, spaces, and newlines (all whitespace) from the left side of a string. Learn more 

"{{ '   too many spaces           ' | lstrip }}"

<!-- Notice the empty spaces to the right of the string -->
"too many spaces           "

`reverse` cannot be used directly on a string, but you can split a string into an array, reverse the array, and rejoin it by chaining together other filters. Learn more 

{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}

.moT rojaM ot lortnoc dnuorG

Strips tabs, spaces, and newlines (all whitespace) from the right side of a string. Learn more 

{{ '              too many spaces      ' | rstrip }}

"                too many spaces"

Converts a string into a SHA-1 hash. Learn more 

{% assign my_secret_string = "ShopifyIsAwesome!" | sha1 %}
My encoded string is: {{ my_secret_string }}

My encoded string is: c7322e3812d3da7bc621300ca1797517c34f63b6

Converts a string into a SHA-256 hash. Learn more 

{% assign my_secret_string = "ShopifyIsAwesome!" | sha256 %}
My encoded string is: {{ my_secret_string }}

My encoded string is: c29cce758876791f34b8a1543f0ec3f8e886b5271004d473cfe75ac3148463cb

Strips all HTML tags from a string. Learn more 

{{ "<h1>Hello</h1> World" | strip_html }}

Hello World

Removes any line breaks/newlines from a string. Learn more 

<!-- product.description = "This is a multiline\nproduct description."
{{ product.description | strip_newlines }}

This is a multiline product description.

Truncates a string down to ‘x’ characters, where x is the number passed as a parameter. An ellipsis (...) is appended to the string and is included in the character count. Learn more 

{{ "The cat came back the very next day" | truncate: 10 }}

The cat...

Truncates a string down to ‘x’ words, where x is the number passed as a parameter. An ellipsis (...) is appended to the truncated string. Learn more 

{{ "The cat came back the very next day" | truncatewords: 4 }}

The cat came back...

Converts a string into uppercase. Learn more 

{{ 'i want this to be uppercase' | upcase }}

I WANT THIS TO BE UPPERCASE

Converts any URL-unsafe characters in a string into percent-encoded characters. Learn more 

{{ "john@liquid.com" | url_encode }}

john%40liquid.com

Identifies all characters in a string that are not allowed in URLS, and replaces the characters with their escaped variants. Learn more 

{{ "<hello> & <shopify>" | url_escape }}

%3Chello%3E%20&%20%3Cshopify%3E

Replaces all characters in a string that are not allowed in URLs with their escaped variants, including the ampersand (&). Learn more 

{{ "<hello> & <shopify>" | url_param_escape }}

%3Chello%3E%20%26%20%3Cshopify%3E

Returns `true` if a store has any payment providers with offsite checkouts, such as PayPal Express Checkout. Learn more 

{% if additional_checkout_buttons %}
  {{ content_for_additional_checkout_buttons }}
{% endif %}

Returns the values of the First Name and Last Name fields of the address. Learn more 

Hello, {{ billing_address.name }}

Returns the value of the First Name field of the address. Learn more 

Returns the value of the Last Name field of the address. Learn more 

Returns the value of the Address1 field of the address. Learn more 

Returns the value of the Address2 field of the address. Learn more 

Returns the combined values of the Address1 and Address2 fields of the address. Learn more 

{{ shipping_address.street }}

Returns the value of the Company field of the address. Learn more 

Returns the value of the City field of the address. Learn more 

Returns the value of the Province/State field of the address. Learn more 

Returns the abbreviated value of the Province/State field of the address. Learn more 

Returns the value of the Postal/Zip field of the address. Learn more 

Returns the value of the Country field of the address. Learn more 

Returns the value of the Country field of the address in ISO 3166-2 standard format. Learn more 

Returns the value of the Phone field of the address. Learn more 

The all_country_option_tags object should be wrapped in `select` tags. Learn more 

<select name="country">
  {{ all_country_option_tags }}
</select>

<select name="country">
  <option value="---" data-provinces="[]">---</option>
  <option value="Afghanistan" data-provinces="[]">Afghanistan</option>
  <option value="Aland Islands" data-provinces="[]">Åland Islands</option>
  ...
  <option value="Canada" data-provinces="[['Alberta','Alberta'],['British Columbia','British Columbia'],['Manitoba','Manitoba'],['New Brunswick','New Brunswick'],['Newfoundland','Newfoundland'],['Northwest Territories','Northwest Territories'],['Nova Scotia','Nova Scotia'],['Nunavut','Nunavut'],['Ontario','Ontario'],['Prince Edward Island','Prince Edward Island'],['Quebec','Quebec'],['Saskatchewan','Saskatchewan'],['Yukon','Yukon']]">Canada</option>
  ...
</select>

You can use all_products to access a product by its handle. If the product isn't found, then `nil` is returned. Learn more 

{{ all_products['love-potion'].title }}

Love Potion

The metafields that are owned by the app. Learn more 

Returns the full name of the article’s author. Learn more 

Returns the published comments of an article. Returns an empty array if comments are disabled. Learn more 

Returns the number of published comments for an article. Learn more 

Returns `true` if comments are enabled. Returns `false` if comments are disabled. Learn more 

Returns the relative URL where POST requests are sent to when creating new comments. Learn more 

Returns the content of an article. Learn more 

Returns the timestamp of when an article was created. Use the `date` filter to format the timestamp. Learn more 

{{ article.created_at | date: "%a, %b %d, %y" }}

Fri, Sep 16, 11

Returns the excerpt of an article. Learn more 

Returns `article.excerpt` of the article if it exists. Returns `article.content` if an excerpt does not exist for the article. Learn more 

Returns the handle of the article. Learn more 

Returns the id of an article. Learn more 

Returns the article image. Use the `img_url` filter to link it to the image file on the Shopify CDN. Check for the presence of the image first. Learn more 

{% if article.image %}
  {{ article | img_url: 'medium' }}
{% endif %}

Returns the article image's `alt` text. Learn more 

Returns the relative URL to the article image. Learn more 

{{ article.image.src | img_url: 'medium' }}

Returns `true` if the blog that the article belongs to is set to moderate comments. Returns `false` if the blog is not moderated. Learn more 

Returns the date/time when an article was published. Use the `date` filter to format the timestamp. Learn more 

Returns all the tags for an article. Learn more 

{% for tag in article.tags %}
  {{ tag }}
{% endfor %}

Returns returns a timestamp for when a blog article was updated. The `date` filter can be applied to format the timestamp. Learn more 

Returns the relative URL of the article. Learn more 

Returns an object with information about the article's author. This information can be edited in the Staff accounts options on the Account page in the Shopify admin. Learn more 

All of the articles across the blogs in the store. You can use `articles` to access an article by its handle. Learn more 

{% assign article = articles['potion-notions/new-potions-for-spring'] %}
  {{ article.title | link_to: article.url }}

<a href="/blogs/potion-notions/new-potions-for-spring" title="">New potions for spring</a>

Returns a unique ID dynamically generated by Shopify. Learn more 

Returns an object of the block settings set in the theme editor. Retrieve setting values by referencing the setting's unique `id`. Learn more 

Returns a string representing the block's attributes. The theme editor's JavaScript API uses a block's `shopify_attributes` to identify blocks and listen for events. No value for `block.shopify_attributes` is returned outside the theme editor. Learn more 

Returns the type defined in the block's schema. This is useful for displaying different markup based on the `block.type`. Learn more 

Returns all tags of all articles of a blog. This includes tags of articles that are not in the current pagination view. Learn more 

{% for tag in blog.all_tags %}
  {{ tag }}
{% endfor %}

Returns an array of all articles in a blog. Learn more 

{% for article in blog.articles %}
  <h2>{{ article.title }}</h2>
{% endfor %}

Returns the total number of articles in a blog. This total does not include hidden articles. Learn more 

Returns `true` if comments are enabled. Returns `false` if comments are disabled. Learn more 

Returns the handle of the blog. Learn more 

Returns the id of the blog. Learn more 

Returns `true` if comments are moderated, or `false` if they are not moderated. Learn more 

Returns the URL of the next (older) post. Returns `false` if there is no next article. Learn more 

Returns the URL of the previous (newer) post. Returns `false` if there is no next article. Learn more 

Returns all tags in a blog. Similar to all_tags, but only returns tags of articles that are in the filtered view. Learn more 

Returns the title of the blog. Learn more 

Returns the relative URL of the blog. Learn more 

Allows you to access all of the blogs in the store. You can use `blogs` to access a blog by its handle. Learn more 

{% for article in blogs.potion-notions.title %}
  {{ article.title | link_to: article.url }}
{% endfor %}

<a href="/blogs/potion-notions/homebrew-start-making-potions-at-home" title="">Homebrew: start making potions at home</a>
<a href="/blogs/potion-notions/new-potions-for-spring" title="">New potions for spring</a>
<a href="/blogs/potion-notions/how-to-tell-if-you-have-run-out-of-invisibility-potion" title="">How to tell if you're out of invisibility potion</a>

The brand's colors. To learn about how to access brand colors, refer to `brand_color`. Learn more 

The square logo for the brand, resized to 32x32 px. Learn more 

The square logo for the brand, resized to 32x32 px. Learn more 

The default logo for the brand. Learn more 

The social links for the brand. Learn more 

A short description of the brand. Learn more 

{{ brand.short_description }}

"Canada's foremost retailer for potions and potion accessories. Try one of our award-winning artisanal potions, or find the supplies to make your own!"

The slogan for the brand. Learn more 

{{ brand.slogan }}

"Save the toil and trouble!"

The square logo for the brand. Learn more 

The colors defined as part of a store's brand assets. To access a brand color, specify the brand color group, the color role, and the 0-based index of the color within the group and role. Learn more 

{ shop.brand.colors.primary[0].background }}
{{ shop.brand.colors.primary[0].foreground }}
{{ shop.brand.colors.secondary[0].background }}
{{ shop.brand.colors.secondary[1].background }}
{{ shop.brand.colors.secondary[0].foreground }}

#0b101f
#DDE2F1
#101B2E
#95A7D5
#A3DFFD

The canonical URL for the current page. Learn more 

`cart.attributes` allow the capturing of more information on the cart page. This is done by giving an input a name attribute with the following syntax: `attributes[attribute-name]`. Learn more 

{{ cart.attributes.your-pet-name }}

Rex

Returns the currency of the cart. If your store uses multi-currency, then the `cart.currency` is the same as the customer's local (presentment) currency. Otherwise, the cart currency is the same as your store currency. Learn more 

{{ cart.currency.iso_code }}

USD

Returns the number of items inside the cart. Learn more 

{{ cart.item_count }} {{ cart.item_count | pluralize: 'Item', 'Items' }} ({{ cart.total_price | money }})

25 items ($53.00)

Returns all of the line items in the cart. Learn more 

Returns the sum of the cart's line-item prices after any line-item discount. The subtotal doesn't include taxes (unless taxes are included in the prices), cart discounts, or shipping costs. Learn more 

`cart.note` allows the capturing of more information on the cart page. Learn more 

Returns the subtotal of the cart before any discounts have been applied. The amount is in the customer's local (presentment) currency. Learn more 

Returns the total of all discounts (the amount saved) for the cart. The amount is in the customer's local (presentment) currency. Learn more 

Returns the total price of all of the items in the cart. Learn more 

Returns the total weight, in grams, of all of the items in the cart. Use the `weight_with_unit` filter to format the weight. Learn more 

Returns the gift cards applied to the checkout. Learn more 

Returns the attributes of the checkout that were captured in the cart. Learn more 

Returns the billing address of the checkout. Learn more 

Returns whether the buyer accepted the newsletter during the checkout. Learn more 

{% if checkout.buyer_accepts_marketing %}
  Thank you for subscribing to our newsletter. You will receive our exclusive newsletter deals!
{% endif %}

Returns the customer associated with the checkout. Learn more 

Returns an array of discount applications for a checkout. Learn more 

{% for discount_application in checkout.discount_applications %}
  Discount name: {{ discount_application.title }}
  Savings: -{{ discount_application.total_allocated_amount | money }}
{% endfor %}

Discount name: SUMMER19
Savings: -$20.00

Returns the discounts applied to the checkout. Learn more 

{% for discount in checkout.discounts %}
* {{ discount.code }}: {{ discount.amount | money }}
{% endfor %}

* secret-discount: $12.00

Returns the sum of the amount of the discounts applied to the checkout. Use one of the money filters to return the value in a monetary format. Learn more 

You save: {{ checkout.discounts_amount | money }}

You save: $12.00

Returns the sum of the savings of the discounts applied to the checkout. The negative opposite of `discounts_amount`. Use one of the money filters to return the value in a monetary format. Learn more 

Returns the email used during the checkout. Learn more 

Returns the amount paid in gift cards of the checkout. Use one of the money filters to return the value in a monetary format. Learn more 

Returns the id of the checkout. Learn more 

Returns all the line items of the checkout. Learn more 

Returns the name of the checkout. This value is identical to `checkout.id` with a hash prepended to it. Learn more 

Returns the note of the checkout. Learn more 

Returns the order created by the checkout. Depending on the payment gateway, the order might not have been created yet on the checkout order status page and this property could be `nil`. Learn more 

Returns the id of the order created by the checkout. Depending on the payment gateway, the order might not have been created yet on the checkout order status page. Learn more 

Returns the name of the order created by the checkout. Depending on the payment gateway, the order might not have been created yet on the checkout order status page. Learn more 

Returns the number of the order created by the checkout. Depending on the payment gateway, the order might not have been created yet on the checkout order status page. Learn more 

Returns whether the checkout as a whole requires shipping, that is, whether any of the line items require shipping. Learn more 

{% if checkout.requires_shipping %}
  You will receive an email with your shipment tracking number as soon as your order is shipped.
{% endif %}

Returns the shipping address of the checkout. Learn more 

Returns the shipping method of the checkout. Learn more 

Returns an array of shipping methods of the checkout. Learn more 

Shipping methods:
{% for shipping_method in checkout.shipping_methods %}
  * {{ shipping_method.title }}: {{ shipping_method.price | money }}
{% endfor %}

Shipping methods:
* International Shipping: $12.00

Returns the shipping price of the checkout. Use one of the money filters to return the value in a monetary format. Learn more 

Returns the subtotal price of the checkout, that is before shipping and before taxes, unless they are included in the prices. Learn more 

Returns all the tax lines of the checkout. Learn more 

Returns the tax price of the checkout, whether the taxes are included or not in the prices. Use one of the money filters to return the value in a monetary format. Learn more 

Returns the total price of the checkout. Use one of the money filters to return the value in a monetary format. Learn more 

Total: {{ checkout.total_price | money }}

Total: $26.75

Returns an array of transactions from the checkout. Learn more 

Returns the number of products in a collection. `collection.all_products_count` will return the total number of products even when the collection view is filtered. Learn more 

{{ collection.all_products_count }} total products in this collection

24 total products in this collection

Returns a list of all product tags in a collection. `collection.all_tags` will return the full list of tags even when the collection view is filtered. `collection.all_tags` will return at most 1,000 tags. Learn more 

Returns a list of all product types in a collection. Learn more 

{% for product_type in collection.all_types %}
  {{ product_type | link_to_type }}
{% endfor %}

<a href="/collections/types?q=Accessories" title="Accessories">Accessories</a>
<a href="/collections/types?q=Chairs" title="Chairs">Chairs</a>
<a href="/collections/types?q=Shoes" title="Shoes">Shoes</a>

Returns a list of all product vendors in a collection. Learn more 

{% for product_vendor in collection.all_vendors %}
  {{ product_vendor | link_to_vendor }}
{% endfor %}

<a href="/collections/vendors?q=Shopify" title="Shopify">Shopify</a>
<a href="/collections/vendors?q=Shirt+Company" title="Shirt Company">Shirt Company</a>
<a href="/collections/vendors?q=Montezuma" title="Montezuma">Montezuma</a>

Returns the product type on a `/collections/types?q=TYPE` collection page. For example, you may be on the automatic Shirts collection, which lists all products of type ‘shirts’ in the store: `myshop.shopify.com/collections/types?q=Shirts`. Learn more 

{% if collection.current_type %}
  We are on an automatic product type collection page. The product type is {{ collection.current_type }}.
{% endif %}

Returns the vendor name on a `/collections/vendors?q=VENDOR` collection page. For example, you may be on the automatic Shopify collection, which lists all products with vendor ‘shopify’ in the store: `myshop.shopify.com/collections/vendors?q=Shopify`. Learn more 

{% if collection.current_vendor %}
  We are on an automatic vendor collection page. The vendor is {{ collection.current_vendor }}.
{% endif %}

Returns the sort order of the collection, which is set in the collection pages of the Admin. Learn more 

Returns the description of the collection. Learn more 

Returns the featured image for the collection. The default is the collection image, and then Shopify will fall back to an appropriate image, such as the featured image of the first product in the collection. Learn more 

Returns an array of filter objects that have been set up on the collection. Learn more 

Returns the handle of a collection. Learn more 

Returns the id of a collection. Learn more 

Returns the collection image. Use the `img_url` filter to link it to the image file on the Shopify CDN. Check for the presence of the image first. Learn more 

{% if collection.image %}
  {{ collection.image | img_url: 'medium' }}
{% endif %}

Returns the URL of the next product in the collection. Returns `nil` if there is no next product. This output can be used on the product page to output ‘next’ and ‘previous’ links on the product.liquid template. Learn more 

Returns the URL of the previous product in the collection. Returns `nil` if there is no previous product. This output can be used on the product page to output ‘next’ and ‘previous’ links on the product.liquid template. Learn more 

Returns all of the products inside a collection. Note that there is a limit of 50 products that can be shown per page. Use the pagination tag to control how many products are shown per page. Learn more 

Returns the number of products in a collection. Learn more 

{{ collection.all_products_count }} {{ collection.all_products_count | pluralize: 'Item', 'Items' }} total

24 Items

Returns the date and time when the collection was published. You can set this information on the collection's page in your Shopify admin by the Set publish date calendar icon. You can use a date filter to format the date. Learn more 

Returns the sort order applied to the collection by the `sort_by` URL parameter. When there is no `sort_by` URL parameter, the value is `null` (e.g. /collections/widgets?sort_by=best-selling). Learn more 

{% if collection.sort_by %}
  Sort by: {{ collection.sort_by }}
{% endif %}

Sort by: best-selling

Returns an array of sorting options for the collection. Learn more 

<select name="sort_by">
{% for option in collection.sort_options %}
  <option value="{{ option.value }}">{{ option.name }}</option>
{% endfor %}
</select>

<select name="sort_by">
  <option value="manual">Featured</option>
  <option value="best-selling">Best selling</option>
  <option value="title-ascending">Alphabetically, A-Z</option>
  <option value="title-descending">Alphabetically, Z-A</option>
  <option value="price-ascending">Price, low to high</option>
  <option value="price-descending">Price, high to low</option>
  <option value="created-ascending">Date, old to new</option>
  <option value="created-descending">Date, new to old</option>
</select>

Returns the name of the custom collection template assigned to the collection, without the collection prefix or the .liquid suffix. Returns `nil` if a custom template is not assigned to the collection. Learn more 

{{ collection.template_suffix }}

no-price

Returns the title of the collection. Learn more 

<h1>{{ collection.title }}</h1>

Frontpage

Returns all tags of all products in a collection. Learn more 

Returns the URL of the collection. Learn more 

You can iterate over collections to build a collection list. Learn more 

{% for collection in collections %}
  {{- collection.title | link_to: collection.url }}
{% endfor %}

<a href="/collections/empty" title="">Empty</a>
<a href="/collections/featured-potions" title="">Featured potions</a>
<a href="/collections/freebies" title="">Freebies</a>
<a href="/collections/frontpage" title="">Home page</a>
<a href="/collections/ingredients" title="">Ingredients</a>
<a href="/collections/potions" title="">Potions</a>
<a href="/collections/sale-potions" title="">Sale potions</a>

Returns the alpha component of the color, which is a decimal number between 0 and 1. Learn more 

Returns the blue component of the color, which is a number between 0 and 255. Learn more 

Returns the green component of the color, which is a number between 0 and 255. Learn more 

Returns the hue component of the color, which is a number between 0 and 360. Learn more 

Returns the lightness component of the color, which is a number between 0 and 100. Learn more 

Returns the red component of the color, which is a number between 0 and 255. Learn more 

Returns the saturation component of the color, which is a number between 0 and 100. Learn more 

The ID of the color_scheme Learn more 

{{ color_scheme.id }}

"background-2"

The setting of the color_scheme Learn more 

A `color_scheme_group` from a `color_scheme_group` setting. Learn more 

{% for scheme in settings.color_schemes %}
  .color-{{ scheme.id }} {
    --color-background: {{ scheme.settings.background }};
    --color-text: {{ scheme.settings.text }};
  }
{% endfor %}

Returns the timestamp of when the comment was submitted. Use the `date` filter to convert the timestamp into a more readable format. Learn more 

{{ comment.created_at | date: "%b %d, %Y" }}

Feb 26, 2019

Returns the id (unique identifier) of the comment. Learn more 

Returns the author of the comment. Learn more 

Returns the email address of the comment’s author. Learn more 

Returns the content of the comment. Learn more 

Returns the status of the comment. Learn more 

Returns the timestamp of when the comment's status was last changed. For example, the timestamp of when a comment was approved by the article's author. Use the `date` filter to convert the timestamp into a more readable format. Learn more 

{{ comment.updated_at | date: "%b %d, %Y" }}

Mar 13, 2019

Returns the URL of the article with `comment.id` appended to it. This is so the page will automatically scroll to the comment. Learn more 

The company locations that the current customer has access to, or can interact with. Learn more 

The ID of the company. Learn more 

{{ company.id }}

98369

The metafields applied to the company. Learn more 

The.name of the company. Learn more 

{{ company.name }}

"Cornelius' Custom Concoctions"