Shopify 速查表 — 透過此資源了解如何使用 Liquid 建立 Shopify 佈景主題

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. 進一步了解

<!-- 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. 進一步了解

equals 進一步了解

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

does not equal 進一步了解

greater than 進一步了解

less than 進一步了解

greater than or equal to 進一步了解

less than or equal to 進一步了解

condition A or condition B 進一步了解

condition A and condition B 進一步了解

checks for the presence of a substring inside a string or array 進一步了解

{% 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. 進一步了解

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

Numbers include floats and integers. 進一步了解

{% assign my_num = 25 %}

Booleans are either true or false. No quotations are necessary when declaring a boolean. 進一步了解

{% 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. 進一步了解

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. 進一步了解

{% 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. 進一步了解

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. 進一步了解

{% 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. 進一步了解

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

Using hyphens, the assign statement doesn't output a blank line. 進一步了解

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

tomato

Executes a block of code only if a certain condition is met. 進一步了解

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

These shoes are awesome!

Adds more conditions within an if or unless block. 進一步了解

<!-- 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

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

Generates an HTML style tag with an attribute of data-shopify. 進一步了解

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

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

Repeatedly executes a block of code. 進一步了解

{% 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). 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

<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. 進一步了解

{% comment %}
  content
{% endcomment %}

Outputs an expression. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

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

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

Inserts a snippet from the snippets folder of a theme. 進一步了解

JavaScript code included in a section file. 進一步了解

{% 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. 進一步了解

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. 進一步了解

Inserts a section from the sections folder of a theme. 進一步了解

{% 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. 進一步了解

{% sections 'name' %}

CSS styles included in a section file. 進一步了解

{% stylesheet %}
  css_styles
{% endstylesheet %}

Creates a new variable. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

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

tag1, tag2, tag3

Returns the first element of an array. 進一步了解

<!-- 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]. 進一步了解

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

womens

Gets the last element in an array. 進一步了解

<!-- 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. 進一步了解

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

SpringSummer

Reverses the order of the items in an array. 進一步了解

{% 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. 進一步了解

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

30

Sorts the elements of an array by a given attribute. 進一步了解

<!-- 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. 進一步了解

{% 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. 進一步了解

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. 進一步了解

{{ 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. 進一步了解

{% 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. 進一步了解

{{ '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. 進一步了解

{{ "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. 進一步了解

{{ 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. 進一步了解

{{ 'Health' | url_for_type }}

/collections/types?q=health

Generates a URL for a collection page that lists all products from the given product vendor. 進一步了解

{{ "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. 進一步了解

{%- 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. 進一步了解

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

129

Calculates the perceived brightness of the given color. 進一步了解

{{ '#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. 進一步了解

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

7.4

Darkens the input color. Takes a value between 0 and 100 percent. 進一步了解

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

#355325

Desaturates the input color. Takes a value between 0 and 100 percent. 進一步了解

{{ '#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. 進一步了解

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

528

Extracts a component from the color. Valid components are alpha, red, green, blue, hue, saturation and lightness. 進一步了解

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

122

Lightens the input color. Takes a value between 0 and 100 percent. 進一步了解

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

#d0e5c5

Blends together two colors. Blend factor should be a value between 0 and 100 percent. 進一步了解

{{ '#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. 進一步了解

{{ '#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. 進一步了解

{{ '#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. 進一步了解

{{ '#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. 進一步了解

{{ '#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. 進一步了解

{{ '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. 進一步了解

{{ '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. 進一步了解

{{ '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. 進一步了解

{{ '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. 進一步了解

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

Sets a default value for any variable whose value is either empty, false or nil. 進一步了解

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

/products/health-potion

Generates default error messages for each possible value of form.errors. 進一步了解

Generates HTML for a set of links for paginated results. Must be applied to the paginate object. 進一步了解

{% 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. 進一步了解

<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. 進一步了解

{% 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. 進一步了解

{{ 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. 進一步了解

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

April 14, 2022

Converts a string, or object, into JSON format. 進一步了解

{{ product | json }}

Generates a formatted weight for a variant object. The weight unit is set in the general settings in the Shopify admin. 進一步了解

{%- 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. 進一步了解

{% 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. 進一步了解

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

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

Generates an HTML

{{ 'collection-1' | placeholder_svg_tag }}

Generates an HTML link tag with a rel attribute of preload to prioritize loading a given Shopify-hosted asset. 進一步了解

{{ '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. 進一步了解

{{ '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. 進一步了解

{{ '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. 進一步了解

{{ 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. 進一步了解

{{ '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. 進一步了解

{{ '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. 進一步了解

{{ '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. 進一步了解

{{ 'disclaimer.pdf' | file_url }}

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

Returns the CDN URL for a global asset. 進一步了解

{{ '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. 進一步了解

{{ '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. 進一步了解

{% 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. 進一步了解

{{ 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. 進一步了解

Returns the absolute value of a number or string that onnly contains a number. 進一步了解

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

24
1.23

Limits a number to a minimum value. 進一步了解

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

5
2

Limits a number to a maximum value. 進一步了解

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

2
1

Rounds an output up to the nearest integer. 進一步了解

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

5
5

Divides an output by a number. The output is rounded down to the nearest integer. 進一步了解

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

20

Rounds an output down to the nearest integer. 進一步了解

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

4
4

Subtracts a number from an input. 進一步了解

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

185

Adds a number to an output. 進一步了解

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

215

Rounds the output to the nearest integer or specified number of decimals. 進一步了解

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

5
4
4.56

Multiplies an output by a number. 進一步了解

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

230

Divides an output by a number and returns the remainder. 進一步了解

{{ 12 | modulo:5 }}

2

Generates an IFrame that contains a YouTube video player. 進一步了解

{% 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.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. 進一步了解

{% 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.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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{{ 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. 進一步了解

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

Formats the price based on the shop’s ‘HTML without currency’ setting. 進一步了解

{{ 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. 進一步了解

{{ 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. 進一步了解

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

$20

Formats the price using a decimal. 進一步了解

{{ 1.45 | money_without_currency }}

1.45

Generates an HTML container to host dynamic checkout buttons for a product. 進一步了解

{% 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. 進一步了解

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

Returns the URL for an SVG image of a given payment type. 進一步了解

{% 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. 進一步了解

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

Appends characters to a string. 進一步了解

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

sales.jpg

Converts a dash-separated string into CamelCase. 進一步了解

{{ 'coming-soon' | camelcase }}

ComingSoon

Capitalizes the first word in a string. 進一步了解

{{ 'capitalize me' | capitalize }}

Capitalize me

Converts a string into lowercase. 進一步了解

{{ 'UPPERCASE' | downcase }}

uppercase

Escapes a string. 進一步了解

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

<p>test</p>

Formats a string into a handle. 進一步了解

{{ '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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

<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. 進一步了解

{% 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. 進一步了解

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

3 items

Prepends characters to a string. 進一步了解

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

Made a great sale

Removes all occurrences of a substring from a string. 進一步了解

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

Hello, . Goodbye, .

Removes only the first occurrence of a substring from a string. 進一步了解

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

Hello, . Goodbye, world.

Replaces all occurrences of a substring with a string. 進一步了解

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

Mega Shoes

Replaces the first occurrence of a substring with a string. 進一步了解

<!-- 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. 進一步了解

{{ "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. 進一步了解

{% 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. 進一步了解

{{ '   too many spaces      ' | strip }}

too many spaces

Strips tabs, spaces, and newlines (all whitespace) from the left side of a string. 進一步了解

"{{ '   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. 進一步了解

{{ "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. 進一步了解

{{ '              too many spaces      ' | rstrip }}

"                too many spaces"

Converts a string into a SHA-1 hash. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

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

Hello World

Removes any line breaks/newlines from a string. 進一步了解

<!-- 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. 進一步了解

{{ "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. 進一步了解

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

The cat came back...

Converts a string into uppercase. 進一步了解

{{ '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. 進一步了解

{{ "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. 進一步了解

{{ "<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 (&). 進一步了解

{{ "<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. 進一步了解

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

Returns the values of the First Name and Last Name fields of the address. 進一步了解

Hello, {{ billing_address.name }}

Returns the value of the First Name field of the address. 進一步了解

Returns the value of the Last Name field of the address. 進一步了解

Returns the value of the Address1 field of the address. 進一步了解

Returns the value of the Address2 field of the address. 進一步了解

Returns the combined values of the Address1 and Address2 fields of the address. 進一步了解

{{ shipping_address.street }}

Returns the value of the Company field of the address. 進一步了解

Returns the value of the City field of the address. 進一步了解

Returns the value of the Province/State field of the address. 進一步了解

Returns the abbreviated value of the Province/State field of the address. 進一步了解

Returns the value of the Postal/Zip field of the address. 進一步了解

Returns the value of the Country field of the address. 進一步了解

Returns the value of the Country field of the address in ISO 3166-2 standard format. 進一步了解

Returns the value of the Phone field of the address. 進一步了解

The all_country_option_tags object should be wrapped in select tags. 進一步了解

<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. 進一步了解

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

Love Potion

The metafields that are owned by the app. 進一步了解

Returns the full name of the article’s author. 進一步了解

Returns the published comments of an article. Returns an empty array if comments are disabled. 進一步了解

Returns the number of published comments for an article. 進一步了解

Returns true if comments are enabled. Returns false if comments are disabled. 進一步了解

Returns the relative URL where POST requests are sent to when creating new comments. 進一步了解

Returns the content of an article. 進一步了解

Returns the timestamp of when an article was created. Use the date filter to format the timestamp. 進一步了解

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

Fri, Sep 16, 11

Returns the excerpt of an article. 進一步了解

Returns article.excerpt of the article if it exists. Returns article.content if an excerpt does not exist for the article. 進一步了解

Returns the handle of the article. 進一步了解

Returns the id of an article. 進一步了解

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. 進一步了解

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

Returns the article image's alt text. 進一步了解

Returns the relative URL to the article image. 進一步了解

{{ 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. 進一步了解

Returns the date/time when an article was published. Use the date filter to format the timestamp. 進一步了解

Returns all the tags for an article. 進一步了解

{% 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. 進一步了解

Returns the relative URL of the article. 進一步了解

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. 進一步了解

All of the articles across the blogs in the store. You can use articles to access an article by its handle. 進一步了解

{% 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. 進一步了解

Returns an object of the block settings set in the theme editor. Retrieve setting values by referencing the setting's unique id. 進一步了解

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. 進一步了解

Returns the type defined in the block's schema. This is useful for displaying different markup based on the block.type. 進一步了解

Returns all tags of all articles of a blog. This includes tags of articles that are not in the current pagination view. 進一步了解

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

Returns an array of all articles in a blog. 進一步了解

{% 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. 進一步了解

Returns true if comments are enabled. Returns false if comments are disabled. 進一步了解

Returns the handle of the blog. 進一步了解

Returns the id of the blog. 進一步了解

Returns true if comments are moderated, or false if they are not moderated. 進一步了解

Returns the URL of the next (older) post. Returns false if there is no next article. 進一步了解

Returns the URL of the previous (newer) post. Returns false if there is no next article. 進一步了解

Returns all tags in a blog. Similar to all_tags, but only returns tags of articles that are in the filtered view. 進一步了解

Returns the title of the blog. 進一步了解

Returns the relative URL of the blog. 進一步了解

Allows you to access all of the blogs in the store. You can use blogs to access a blog by its handle. 進一步了解

{% 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. 進一步了解

The square logo for the brand, resized to 32x32 px. 進一步了解

The square logo for the brand, resized to 32x32 px. 進一步了解

The default logo for the brand. 進一步了解

The social links for the brand. 進一步了解

A short description of the brand. 進一步了解

{{ 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. 進一步了解

{{ brand.slogan }}

"Save the toil and trouble!"

The square logo for the brand. 進一步了解

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. 進一步了解

{ 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. 進一步了解

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]. 進一步了解

{{ 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. 進一步了解

{{ cart.currency.iso_code }}

USD

Returns the number of items inside the cart. 進一步了解

{{ 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. 進一步了解

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. 進一步了解

cart.note allows the capturing of more information on the cart page. 進一步了解

Returns the subtotal of the cart before any discounts have been applied. The amount is in the customer's local (presentment) currency. 進一步了解

Returns the total of all discounts (the amount saved) for the cart. The amount is in the customer's local (presentment) currency. 進一步了解

Returns the total price of all of the items in the cart. 進一步了解

Returns the total weight, in grams, of all of the items in the cart. Use the weight_with_unit filter to format the weight. 進一步了解

Returns the gift cards applied to the checkout. 進一步了解

Returns the attributes of the checkout that were captured in the cart. 進一步了解

Returns the billing address of the checkout. 進一步了解

Returns whether the buyer accepted the newsletter during the checkout. 進一步了解

{% 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. 進一步了解

Returns an array of discount applications for a checkout. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

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. 進一步了解

Returns the email used during the checkout. 進一步了解

Returns the amount paid in gift cards of the checkout. Use one of the money filters to return the value in a monetary format. 進一步了解

Returns the id of the checkout. 進一步了解

Returns all the line items of the checkout. 進一步了解

Returns the name of the checkout. This value is identical to checkout.id with a hash prepended to it. 進一步了解

Returns the note of the checkout. 進一步了解

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. 進一步了解

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. 進一步了解

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. 進一步了解

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. 進一步了解

Returns whether the checkout as a whole requires shipping, that is, whether any of the line items require shipping. 進一步了解

{% 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. 進一步了解

Returns the shipping method of the checkout. 進一步了解

Returns an array of shipping methods of the checkout. 進一步了解

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. 進一步了解

Returns the subtotal price of the checkout, that is before shipping and before taxes, unless they are included in the prices. 進一步了解

Returns all the tax lines of the checkout. 進一步了解

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. 進一步了解

Returns the total price of the checkout. Use one of the money filters to return the value in a monetary format. 進一步了解

Total: {{ checkout.total_price | money }}

Total: $26.75

Returns an array of transactions from the checkout. 進一步了解

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. 進一步了解

{{ 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. 進一步了解

Returns a list of all product types in a collection. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

{% 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. 進一步了解

Returns the description of the collection. 進一步了解

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. 進一步了解

Returns an array of filter objects that have been set up on the collection. 進一步了解

Returns the handle of a collection. 進一步了解

Returns the id of a collection. 進一步了解

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. 進一步了解

{% 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. 進一步了解

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. 進一步了解

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. 進一步了解

Returns the number of products in a collection. 進一步了解

{{ 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. 進一步了解

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). 進一步了解

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

Sort by: best-selling

Returns an array of sorting options for the collection. 進一步了解

<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. 進一步了解

{{ collection.template_suffix }}

no-price

Returns the title of the collection. 進一步了解

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

Frontpage

Returns all tags of all products in a collection. 進一步了解

Returns the URL of the collection. 進一步了解

You can iterate over collections to build a collection list. 進一步了解

{% 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. 進一步了解

Returns the blue component of the color, which is a number between 0 and 255. 進一步了解

Returns the green component of the color, which is a number between 0 and 255. 進一步了解

Returns the hue component of the color, which is a number between 0 and 360. 進一步了解

Returns the lightness component of the color, which is a number between 0 and 100. 進一步了解

Returns the red component of the color, which is a number between 0 and 255. 進一步了解

Returns the saturation component of the color, which is a number between 0 and 100. 進一步了解

The ID of the color_scheme 進一步了解

{{ color_scheme.id }}

"background-2"

The setting of the color_scheme 進一步了解

A color_scheme_group from a color_scheme_group setting. 進一步了解

{% 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. 進一步了解

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

Feb 26, 2019

Returns the id (unique identifier) of the comment. 進一步了解

Returns the author of the comment. 進一步了解

Returns the email address of the comment’s author. 進一步了解

Returns the content of the comment. 進一步了解

Returns the status of the comment. 進一步了解

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. 進一步了解

{{ 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. 進一步了解

The company locations that the current customer has access to, or can interact with. 進一步了解

The ID of the company. 進一步了解

{{ company.id }}

98369

The metafields applied to the company. 進一步了解

The.name of the company. 進一步了解

{{ company.name }}

"Cornelius' Custom Concoctions"

The first line of the address. 進一步了解

{{ company_address.address1 }}

"99 Cauldron Lane"

The second line of the address. If no second line is specified, then nil is returned. 進一步了解

{{ company_address.address2 }}

"Unit 4B"

The attention line of the address. 進一步了解

{{ company_address.attention }}

"Cornelius Potionmaker"

The city of the address. 進一步了解

{{ company_address.city }}

"Edinburgh"

The country of the address. 進一步了解

{{ company_address.country }}

"Scotland"

The country of the address in ISO 3166-1 (alpha 2) format. 進一步了解

{{ company_address.country_code }}

"GB"

The id of the address. 進一步了解

{{ company_address.id }}

65

The province of the address. 進一步了解

{{ company_address.province }}

null

The province of the address of the address in ISO 3166-2 (alpha 2) format.. 進一步了解

{{ company_address.province_code }}

null

A combination of the first and second lines of the address. 進一步了解

{{ company_address.street }}

"99 Cauldron Lane, Unit 4B

The zip or postal code of the address. 進一步了解

{{ company_address.zip }}

The company that the location is associated with. 進一步了解

Returns true if the location is currently selected. Returns false if not. 進一步了解

{{ company_location.current? }}

false

The ID of the location. 進一步了解

{{ company_location.id }}

98369

The name of the location. 進一步了解

{{ company_location.name }}

"99 Cauldron Lane"

The address of the location. 進一步了解

{{ company_location.shipping_address }}

The tax ID of the location. 進一步了解

{{ company_location.tax_registration_id }}

null

The URL to set the location as the current location for the customer. 進一步了解

{{ company_location.url_to_set_as_current }}

"https://polinas-potent-potions.myshopify.com/company_location/update?location_id=98369&return_to=/resource"

Use additional_checkout_buttons to check whether these payment providers exist, and content_for_additional_checkout_buttons to show the associated checkout buttons. 進一步了解

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

Include the content_for_header object in your layout files between the opening and closing head HTML tags. You shouldn't try to modify or parse the content_for_header object because the contents are subject to change, which can change the behavior of your code. 進一步了解

If you use a Liquid index template (templates/index.liquid), then you must include {{ content_for_index }} in the template. This object can't be used in JSON index templates. 進一步了解

Include the content_for_layout object in your layout files between the opening and closing body HTML tags. 進一步了解

Returns the currency used in the country. 進一步了解

Returns the ISO code of the country. For example, US or FR for United States or France. 進一步了解

Returns the name of the country. For example, United States or France. 進一步了解

Returns the unit system of the country. Can be either imperial or metric. 進一步了解

country_option_tags creates an <option> tag for each country. An attribute named data-provinces is set for each country, containing JSON-encoded arrays of the country’s respective subregions. If a country does not have any subregions, an empty array is set for its data-provinces attribute. country_option_tags must be wrapped in <select> HTML tags. 進一步了解

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

Returns the name of the currency (for example United States dollars or Euro). 進一步了解

Returns the ISO code of the currency (for example USD or EUR). 進一步了解

Returns the currency's symbol (for example, $ or €). 進一步了解

Returns the current page number. The current_page object has a value of 1 for non-paginated resources. 進一步了解

{{ page_title }}{% unless current_page == 1 %} - Page {{ current_page }}{% endunless %}

Ingredients - Page 1

Inside collection.liquid, current_tags contains all product tags that are used to filter a collection. 進一步了解

Inside blog.liquid, current_tags contains all article tags that are used to filter the blog. 進一步了解

Returns the value of the First Name field of the address. 進一步了解

Returns the value of the Last Name field of the address. 進一步了解

Returns the value of the Address1 field of the address. 進一步了解

Returns the value of the Address2 field of the address. 進一步了解

Returns the combined values of the Address1 and Address2 fields of the address. 進一步了解

Returns the value of the Company field of the address. 進一步了解

Returns the value of the City field of the address. 進一步了解

Returns the value of the Province/State field of the address. 進一步了解

Returns the abbreviated value of the Province/State field of the address. 進一步了解

Returns the value of the Postal/Zip field of the address. 進一步了解

Returns the value of the Country field of the address. 進一步了解

Returns the value of the Country field of the address in ISO 3166-2 standard format. 進一步了解

{{ customer_address.country_code }}

CA

Returns the value of the Phone field of the address. 進一步了解

Returns the id of customer address. 進一步了解

Returns true if the customer accepts marketing. Returns false if the customer does not. 進一步了解

Returns an array of all addresses associated with a customer. See customer_address for a full list of available attributes. 進一步了解

{% for address in customer.addresses %}
  {{ address.street }}
{% endfor %}

126 York St, Suite 200 (Shopify Office)
123 Fake St
53 Featherston Lane

Returns the number of addresses associated with a customer. 進一步了解

Returns the default customer_address. 進一步了解

Returns the email address of the customer. 進一步了解

Returns the first name of the customer. 進一步了解

Returns true if the email associated with an order is also tied to a Customer Account. Returns false if it is not. Helpful in email templates. In the theme, this will always be true. 進一步了解

Returns the id of the customer. 進一步了解

Returns the last name of the customer. 進一步了解

Returns the last order placed by the customer, not including test orders. 進一步了解

Your last order was placed on: {{ customer.last_order.created_at | date: "%B %d, %Y %I:%M%p" }}

Your last order was placed on: April 25, 2014 01:49PM

Returns the full name of the customer. 進一步了解

Returns an array of all orders placed by the customer. 進一步了解

{% for order in customer.orders %}
  {{ order.id }}
{% endfor %}

\#1088
\#1089
\#1090

Returns the total number of orders a customer has placed. 進一步了解

Returns the phone number of the customer. 進一步了解

Returns the list of tags associated with the customer. 進一步了解

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

wholesale regular-customer VIP

Returns whether or not the customer is exempt from taxes. 進一步了解

Returns the total amount spent on all orders. 進一步了解

You can use the Liquid date filter to output the date in a more readable format. 進一步了解

Returns the id of the discount. 進一步了解

Returns the title or discount code of the discount. 進一步了解

{{ discount.title }}

SPRING14

Returns the title or discount code of the discount. Same as discount.title. 進一步了解

Returns the amount of the discount. Use one of the money filters to return the value in a monetary format. 進一步了解

{{ discount.amount | money }}

$25

Returns the total amount of the discount if it has been applied to multiple line items. Use a money filter to return the value in a monetary format. 進一步了解

Returns the amount of the discount’s savings. The negative version of amount. Use one of the money filters to return the value in a monetary format. 進一步了解

{{ discount.savings | money }}

$-25

Returns the total amount of the discount’s savings if it has been applied to multiple line items. The negative version of total_amount. Use a money filter to return the value in a monetary format. 進一步了解

Returns the type of the discount. 進一步了解

The discounted amount on a line item by a particular discount. 進一步了解

The discount application that allocates the amount on the line item. 進一步了解

Describes how a discount selects line items in the cart to be discounted. target_selection has the following possible values:

all: The discount applies to all line items.
entitled: The discount applies to a particular subset of line items, often defined by a condition.
explicit: The discount applies to a specifically selected line item or shipping line. 進一步了解

Describes the type of item that a discount applies to. target_type has the following possible values:

line_item
shipping_line 進一步了解

The customer-facing name of the discount. For example, Welcome10 or CBBWQQAKYBYY. 進一步了解

The total amount that the price of an order is reduced by the discount. 進一步了解

The type of the discount. type has the following possible values:
automatic
discount_code
manual
script 進一步了解

The value of the discount. 進一步了解

The value type of the discount. value_type has the following possible values:
fixed_amount
percentage 進一步了解

Returns the alt tag of the video set on the product details page of the Shopify admin. 進一步了解

Returns the aspect ratio of the external video. 進一步了解

Returns the ID of the external video. 進一步了解

{% assign external_videos = product.media | where: "media_type", "external_video" %}

{% for external_video in external_videos %}
  {{ external_video.external_id }}
{% endfor %}

neFK-pv2sKY
JthaEfEsLYg

Returns the name of the video host (youtube or vimeo). 進一步了解

Returns the media_id of the external video. 進一步了解

Returns the type of the object (external_video). This can be used to filter the product object's media array. 進一步了解

{% assign external_videos = product.media | where: "media_type", "external_video" %}

{% for external_video in external_videos %}
  {{external_video.external_id}}
{% endfor %}

neFK-pv2sKY
JthaEfEsLYg

Returns the alt tag of the video set on the product details page of the Shopify admin. 進一步了解

Returns an array of filter_value objects that are currently active. Only applies to list type filters. 進一步了解

Returns an array of filter_value objects that are currently inactive. Only applies to list type filters. 進一步了解

Returns the customer-facing label for the filter. 進一步了解

Returns a filter_value object for the maximum value of price_range type filters. 進一步了解

Returns a filter_value object for the minimum value of price_range type filters. 進一步了解

Returns the name of the filter. For example, filter.v.option.color. 進一步了解

Returns the maximum product price within the current collection. This is only valid for filters of type price_range. 進一步了解

Returns the filter type. Can be list or price_range. 進一步了解

Returns the current page URL with the filter's currently applied value parameters removed. 進一步了解

If you want to remove the <code>Color</code> filter, then the <code>url_to_remove</code> attribute returns the following URL:

/collections/all?filter.v.option.size=L

Returns an array of filter_value objects for a list type filter. 進一步了解

Returns whether the filter value is active. Returns either true or false. 進一步了解

Returns how many results are related to the filter value. Returns a number. 進一步了解

Returns the customer facing label for the filter value. For example, Red or Rouge. 進一步了解

Returns the name of the filter that the filter value belongs to. For example, filter.v.option.color. Filters of type price_range also include an extra component depending on the filter_value source. 進一步了解

If the filter_value is for a price_range filter's min_value, then the following is returned:

filter.v.price.lte

Returns the current page URL with the filter value parameter added. 進一步了解

Returns the current page URL with the filter value parameter removed. 進一步了解

Returns the value. 進一步了解

The horizontal position of the focal point, as a percent of the image width. Returns 50 if no focal point is set. 進一步了解

The vertical position of the focal point, as a percent of the image height. Returns 50 if no focal point is set. 進一步了解

Returns the position of the baseline within the em box (measured from the bottom). 進一步了解

{{ settings.heading_font.baseline_ratio }}

0.091

Returns the suggested fallback font families. 進一步了解

{{ settings.heading_font.fallback_families }}

sans-serif

Returns the font's name. 進一步了解

{{ settings.heading_font.family }}

"Neue Haas Unica"

Returns the selected font style. 進一步了解

{{ settings.heading_font.style }}

normal

Returns true if the font is a system font. You can use this attribute to identify whether you need to embed the corresponding font-face for the font. 進一步了解

Returns the selected font weight. 進一步了解

{{ settings.heading_font.weight }}

400

Returns all of the variants within the font's family. Each of the variants is also a font object. 進一步了解

{% for variant in settings.heading_font.variants %}
  {{ variant.family }}
{% endfor %}

Returns true if it’s the first iteration of the for loop. Returns false if it is not the first iteration. 進一步了解

{% for product in collections.frontpage.products %}
  {% if forloop.first == true %}
    First time through!
  {% else %}
    Not the first time.
  {% endif %}
{% endfor %}

First time through!
Not the first time.
Not the first time.
Not the first time.
Not the first time.

Returns the current index of the for loop, starting at 1. 進一步了解

{% for product in collections.frontpage.products %}
  {{ forloop.index }}
{% else %}
  // no products in your frontpage collection
{% endfor %}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Returns the current index of the for loop, starting at 0. 進一步了解

{% for product in collections.frontpage.products %}
  {{ forloop.index0 }}
{% endfor %}

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Returns true if it’s the last iteration of the for loop. Returns false if it is not the last iteration. 進一步了解

{% for product in collections.frontpage.products %}
  {% if forloop.last == true %}
    This is the last iteration!
  {% else %}
    Keep going…
  {% endif %}
{% endfor %}

Keep going…
Keep going…
Keep going…
Keep going…
Keep going…
This is the last iteration!

Returns forloop.index in reverse order. 進一步了解

{% for product in collections.frontpage.products %}
  {{ forloop.rindex }}
{% endfor %}

16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1

Returns forloop.index0 in reverse order. 進一步了解

{% for product in collections.frontpage.products %}
  {{ forloop.rindex0 }}
{% endfor %}

15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0

Returns the number of iterations of the for loop. 進一步了解

<!-- if collections.frontpage.products contains 10 products -->
{% for product in collections.frontpage.products %}
  {% capture length %}{{ forloop.length }}{% endcapture %}
{% endfor %}

{{ length }}

10

Returns the first address line associated with the address. Exclusive to form tags with the "address" parameter. 進一步了解

Returns the second address line associated with the address, if it exists. Exclusive to form tags with the "address" parameter. 進一步了解

Returns the name of the author of the blog article comment. Exclusive to form tags with the "article" parameter. 進一步了解

Returns the content of the blog article comment. Exclusive to form tags with the "article" parameter. 進一步了解

Returns the city associated with the address. Exclusive to form tags with the "address" parameter. 進一步了解

Returns the company name associated with the address, if it exists. Exclusive to form tags with the "address" parameter. 進一步了解

Returns the country associated with the address. Exclusive to form tags with the "address" parameter. 進一步了解

Returns the email address of the blog article comment’s author. Exclusive to form tags with the "article" parameter. 進一步了解

Returns the country associated with the address. Exclusive to form tags with the "address" parameter. 進一步了解

Returns an array of strings if the form was not submitted successfully. The strings returned depend on which fields of the form were left empty or contained errors. 進一步了解

{% for error in form.errors %}
  {{ error }}
{% endfor %}

<!-- if the Name field was left empty by the user -->
author

Returns the first name associated with the address. Exclusive to form tags with the "address" parameter. 進一步了解

Returns the id (unique identifier) of the form. 進一步了解

Returns the last name associated with the address. Exclusive to form tags with the "address" parameter. 進一步了解

Used only for form tags with the "customer_login" parameter. The form.password_needed attribute always returns true. 進一步了解

Returns the telephone number associated with the address, if it exists. Exclusive to form tags with the "address" parameter. 進一步了解

Returns true if the form was submitted successfully, or false if the form contained errors. All forms but the address form set this property. The address form is always submitted successfully. 進一步了解

{% if form.posted_successfully? %}
  Comment posted successfully!
{% else %}
  {{ form.errors | default_errors }}
{% endif %}

Returns the province or state associated with the address. Exclusive to form tags with the "address" parameter. 進一步了解

{{ form.city }}, {{ form.province }}

San Francisco, California

Renders an HTML checkbox that can submit the current form as the customer's default address. Exclusive to form tags with the "address" parameter. 進一步了解

{{ form.set_as_default_checkbox }}

<input type="checkbox" id="address_default_address_12345678" name="address[default]" value="1">

Returns the zip code or postal code associated with the address. Exclusive to form tags with the "address" parameter. 進一步了解

The translated error messages for each value in the form_errors array. 進一步了解

The translated names for each value in the form_errors array. 進一步了解

Returns the name of the fulfillment service. 進一步了解

Returns a fulfillment’s tracking number, if it exists. 進一步了解

Tracking Number: {{ fulfillment.tracking_number }}

Tracking Number: 1Z5F44813600X02768

Returns the URL for a tracking number. 進一步了解

{{ fulfillment.tracking_url }}

http://wwwapps.ups.com/etracking/tracking.cgi?InquiryNumber1=1Z5F44813600X02768&TypeOfInquiryNumber=T&AcceptUPSLicenseAgreement=yes&submit=Track

Returns an array of all line items and their quantity included in the fulfillment. Any line items that have already been fulfilled, or are yet to be fulfilled, will not be included in the array. 進一步了解

We have fulfilled the following items:
<ul>
  {% for line in fulfillment.fulfillment_line_items %}
    <li>{{ line.line_item.title }} × {{ line.quantity }}</li>
  {% endfor %}
</ul>

We have fulfilled the following items:
* T-shirt - White / Medium × 8
* Adorable boots × 1

Returns the total number of items included in the fulfillment. 進一步了解

We have fulfilled {{ fulfillment.item_count }} items of your recent order.

We have fulfilled 3 items of your recent order.

The alt text of the media. 進一步了解

The ID of the file. 進一步了解

{{ generic_file.id }}

21918386454593

The media type of the file. Always returns generic_file. 進一步了解

{{ generic_file.media_type }}

"generic_file"

The position of the media in the product.media array. If the source is a file_reference metafield, then nil is returned. 進一步了解

{{ generic_file.position }}

null

The preview image of the file. 進一步了解

The CDN URL text of the file. 進一步了解

{{ generic_file.url }}

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

Returns the amount of money remaining on the gift card. 進一步了解

Returns the code that was used to redeem the gift card. 進一步了解

Returns the currency that the card was issued in. 進一步了解

Returns the customer variable of the customer that the gift card is assigned to. 進一步了解

Hey, {{ gift_card.customer.first_name }}!

Hey, Brian!

Returns true if the card is enabled, or false if the card is disabled. 進一步了解

Returns true if the card is expired, or false if the card is not. 進一步了解

Returns the expiration date of the gift card. 進一步了解

Returns the initial amount of money on the gift card. 進一步了解

Returns the product associated with the purchased gift card, or returns nothing if there is no associated product. 進一步了解

Returns the line item properties assigned to the gift card when it was added to the cart. 進一步了解

Returns the unique URL that links to the gift card’s page on the shop (rendered through gift_card.liquid). 進一步了解

Returns of a list of rule objects for each rule in the group. 進一步了解

Returns the group's sitemap object. If the group doesn't require a sitemap, then this returns blank.

The sitemap can be accessed at /sitemap.xml.

Returns the group's user_agent object. 進一步了解

The handle object will return a value only when an article, blog, collection, page, or product template is being viewed. 進一步了解

Returns the alt tag of the image, set in the Products page of the Admin. 進一步了解

Returns the aspect ratio (width / height) of the image. 進一步了解

Returns true if the image has been associated with a variant. Returns false otherwise. This can be used in cases where you want to create a gallery of images that are not associated with variants. 進一步了解

Returns the height of the image in pixels. 進一步了解

Returns the id of the image. 進一步了解

Returns the type of the object (image). 進一步了解

Returns the position of the image, starting at 1. This is the same as outputting forloop.index. 進一步了解

Returns a preview image for the image, when accessed through a media object. For example, product.featured_media.preview_image. 進一步了解

Returns the id of the image's product. 進一步了解

Returns the relative path of the product image. This is the same as outputting {{ image }}. 進一步了解

{% for image in product.images %}
  {{ image.src }}
  {{ image }}
{% endfor %}

products/my_image.jpg
products/my_image.jpg

Returns an array of attributes for the variant that the image is associated with. 進一步了解

{% for image in product.images %}
  {% for variant in image.variants %}
    {{ image.src }} - used for the variant: {{ variant.title }}
  {% endfor %}
{% endfor %}

products/red-shirt.jpeg - used for the variant: Red
products/green-shirt.jpg - used for the variant: Green
products/yellow-shirt.jpg - used for the variant: Yellow

Returns the width of the image in pixels. 進一步了解

The focal point for the image. 進一步了解

All of the images that have been uploaded to a store. You can access images from the images array by their filename. 進一步了解

{{ images['potions-header.png'] | image_url: width: 300 | image_tag }}

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/potions-header.png?v=1650325393&amp;width=300" alt="" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/potions-header.png?v=1650325393&amp;width=300 300w" width="300" height="173" style="object-position:1.9231% 9.7917%;">

Returns a list of all discount allocations containing the discounted amount and the reference to the parent discount application. line_item.discount_allocations is available on line items in carts, checkouts, orders, and draft orders. 進一步了解

Returns the combined price of all the items in the line item. This is equal to line_item.final_price times line_item.quantity. 進一步了解

Returns the price of the line item including all line level discount amounts. 進一步了解

Returns the fulfillment of the line item. 進一步了解

Returns the fulfillment service associated with the line item's variant. Line items that have no fulfillment service will return manual. 進一步了解

Returns true if the line item's product is a gift card, or false if it is not. 進一步了解

Returns the weight of the line item. Use the weight_with_unit filter to format the weight. 進一步了解

Returns the line item image. 進一步了解

{{ line_item.image |  img_url: 'small' | img_tag }}

<img src="//cdn.shopify.com/s/files/1/0159/3350/products/hvt401_red_small.jpg?v=1398706734" />

Returns the line item's ID.

The line item ID differs depending on the context:

- cart.items returns the ID of the line item's variant. This ID is not unique, and can be shared by multiple items of the same variant.
- checkout.line_items returns a temporary unique hash generated for the checkout.
- order.line_items returns a unique integer ID.

Returns a unique identifier for each item in the cart. 進一步了解

Returns a list of line-specific discount_allocation objects containing the discounted amount and a reference to the parent discount application. 進一步了解

Returns the total amount of all discounts applied to the line item specifically. This doesn't include discounts that are added to the cart. 進一步了解

Returns the discount message if a script has applied a discount to the line item. This attribute only has a value if you are using the Script Editor app. 進一步了解

Returns an array of selected values from the item's product options. 進一步了解

{% unless line_item.product.has_only_default_variant %}
  <ul>
    {% for option in line_item.options_with_values %}
      <li>{{ option.name }}: {{ option.value }}</li>
    {% endfor %}
  </ul>
{% endunless %}

<ul>
  <li>Size: 42mm</li>
  <li>Color: Silver</li>
  <li>Strap: Stainless Steel</li>
</ul>

Returns the original price of the line item before discounts were applied. 進一步了解

Returns the original price of the line item before discounts were applied. 進一步了解

Returns the product of the line item. 進一步了解

Returns the id of the line item’s product. 進一步了解

Returns an array of custom information for an item that has been added to the cart. 進一步了解

{% assign propertySize = line_item.properties | size %}
{% if propertySize > 0 %}
  <ul>
    {% for property in line_item.properties %}
      <li>{{ property.first }}: {{ property.last }}</li>
    {% endfor %}
  </ul>
{% endif %}

Monogram: My dog is the cutest
Gift wrap: Yes

Returns the quantity of the line item. 進一步了解

Returns true if the line item requires shipping, or false if it does not. This is set in the variant options in the Products page of the Admin. 進一步了解

Returns a selling_plan_allocation object when the line item contains a selling plan. 進一步了解

Returns the SKU of the line item’s variant. 進一步了解

Returns the successfully fulfilled quantity of the line item. 進一步了解

Returns true if the line item is taxable, or false if it isn’t. This is set in the variant options in the Products page of the Admin. 進一步了解

Returns the title of this line item. line_item.title combines both the line item’s product.title and the line item’s variant.title, separated by a hyphen. 進一步了解

{{ line_item.title }}

Balloon Shirt - Medium

Returns the unit price of the line item. The price reflects any discounts that are applied to the line item. 進一步了解

Returns a unit_price_measurement object for the line item. 進一步了解

Returns the URL to the product page using variant deep-linking. 進一步了解

{{ line_item.title | link_to: line_item.url }}

<a href="/products/t-shirt?variant=12345678">T-Shirt - Small</a>

Returns a URL that can be used to remove the line item from the cart. This is only valid within the context of cart line items. 進一步了解

Returns the variant of the line item. 進一步了解

Returns the id of the line item’s variant. 進一步了解

Returns the vendor name of the line item’s product. 進一步了解

Returns true if the link is active, or false if the link is inactive. 進一步了解

Similar to link.active, but returns true if a child link of the parent link is active, or false if no child links of the parent link are active. 進一步了解

{{ linklists.main.title }}

{% for link in linklists.main.links %}
  {{ link.title }}: child_active: {{ link.child_active }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: child_active: {{ sub_link.child_active }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: active: {{ sub_sub_link.active }}
    {% endfor %}
  {% endfor %}
{% endfor %}

Main Menu

Home: child_active: false
About Us: child_active: true
  In the news: child_active: false
  Locations: child_active: true
    Montreal: active: true
    Ottawa: active: false

Returns true if a child link has a link object with link.current equal to true. Returns false if no child links have a link object with link.current equal to true. 進一步了解

{{ linklists.main.title }}

{% for link in linklists.main.links %}
  {{ link.title }}: child_current: {{ link.child_current }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: child_current: {{ sub_link.child_current }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: current: {{ sub_sub_link.current }}
    {% endfor %}
  {% endfor %}
{% endfor %}

Main Menu

Home: child_current: false
About Us: child_current: true
  In the news: child_current: false
  Locations: child_current: true
    Montreal: current: true
    Ottawa: current: false

Returns true if the page content associated with the link is considered a match to the current page. Returns false if the content isn't considered a match. 進一步了解

{% for link in linklists.main.links %}
  <a href="{{ link.url }}"
    {% if link.current %}aria-current="page" class="highlight"{% endif %}
  >
  {{ link.title }}
  </a>
{% endfor %}

<a href="/collections/summer">Summer collection</a>
<a href="/collections/winter" aria-current="page" class="highlight">Winter collection</a>
<a href="/collections/all">All products</a>

Returns the number of nested levels that a link contains. 進一步了解

{% assign menu = linklists.main-menu %}

{{ menu.title }}: {{ menu.levels }}
{% for link in menu.links %}
  {{ link.title }}: {{ link.levels }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: {{ sub_link.levels }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: {{ sub_sub_link.levels }}
    {% endfor %}
  {% endfor %}
{% endfor %}

Main Menu: 3
  Home: 0
  About Us: 2
    Locations: 1
      Montreal: 0
      Ottawa: 0

Returns an array of the child links associated with the parent link. 進一步了解

Returns the variable associated to the link. The possible types are: product, collection, page, blog. 進一步了解

{{ link.object.price | money }}

$10

Returns the title of the link. 進一步了解

Returns the type of the link. The possible values are:
collection_link: if the link points to a collection
product_link: if the link points to a product page
page_link: if the link points to a page
blog_link: if the link points to a blog
relative_link: if the link points to the search page, the home page or /collections/all
http_link: if the link points to an external web page, or a type or vendor collection (e.g. /collections/types?q=Pants) 進一步了解

Returns the URL of the link. 進一步了解

Returns the handle of the linklist. 進一步了解

Returns the number of nested levels that a linklist contains.
進一步了解

Given the following menu structure:

Main menu
  └ Home
  └ About Us
    └ Locations
      └ Montreal
      └ Ottawa

{% assign menu = linklists.main-menu %}
{{ menu.title }}: {{ menu.levels }}

Main Menu: 3

Returns an array of links in the linklist. 進一步了解

{% for link in linklists.main-menu.links %}
  <a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}

<a href="/">Home</a>
<a href="/collections/all">Catalog</a>
<a href="/blogs/news">Blog</a>
<a href="/pages/about-us">About Us</a>

Returns the title of the linklist. 進一步了解

Allows you to access all of the menus in a store. You can access a specific menu through the linklists object using the menu's handle. 進一步了解

<!-- Main menu -->
{% for link in linklists.main-menu.links -%}
  {{ link.title | link_to: link.url }}
{%- endfor %}

<!-- Main menu -->
<a href="/" title="">Home</a>
<a href="/collections/all" title="">Catalog</a>
<a href="/pages/contact" title="">Contact</a>

Returns a list of country objects for each country that the store supports. 進一步了解

Returns a list of shop_locale objects for each language that the currently selected country supports. 進一步了解

Returns the country object for the currently selected country. 進一步了解

Returns the shop_locale object for the currently selected language. 進一步了解