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

Shopify 速查表資源可協助您透過 Liquid 建立 Shopify 佈景主題

Liquid 是什麼?

工具

參考

Shopify 速查表資源可協助您透過 Liquid 建立 Shopify 佈景主題

Liquid 是什麼?

您未有選取任何類別。

Handles

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

What is a handle?

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

How are my handles created?

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

Operators

Liquid has access to all of the logical and comparison operators. These can be used in tags such as if and unless. 進一步了解

==

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

or

condition A or condition B 進一步了解

and

condition A and condition B 進一步了解

contains

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

Types

Liquid objects can return one of six types: String, Number, Boolean, Nil, Array, or EmptyDrop. Liquid variables can be initialized by using the assign or capture tags. 進一步了解

Strings

Strings are declared by wrapping the variable’s value in single or double quotes. 進一步了解

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

Numbers

Numbers include floats and integers. 進一步了解

{% assign my_num = 25 %}

Booleans

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

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

Nil

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

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

EmptyDrop

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

Truthy and Falsy

In programming, we describe “truthy” and “falsy” as anything that returns true or false, respectively, when used inside an if statement. 進一步了解

What is truthy?

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

What is falsy?

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

Whitespace Control

In Liquid, you can include a hyphen in your tag syntax {{-, -}}, {%-, and -%} to strip whitespace from the left or right side of a rendered tag. Normally, even if it doesn’t output text, any line of Liquid in your template will still output an empty line in your rendered HTML. 進一步了解

Whitespace Control

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

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

Control Flow Tags

Control Flow Tags determine which block of code should be executed. 進一步了解

{% if %}

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!

{% elsif %} / {% else %}

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!

{% case %} / {% when %}

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

{% unless %}

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.

{% and %}

The and operator lets you add additional conditions to a tag. A condition that uses and will only be true if both the left and the right side of the condition are true. 進一步了解

{% if product.title == 'Awesome Shoes' and product.price < 20000 %}
  These awesome shoes are affordable.
{% endif %}
These awesome shoes are affordable.

{% or %}

The or operator lets you add additional conditions to a tag. A condition with an or will be true if either the left or the right side of the condition is true. 進一步了解

{% if product.title == 'Awesome Shoes' or product.title == 'Awesome Hat' %}
  You're buying an awesome product!
{% endif %}
You're buying an awesome product!

Iteration Tags

Iteration Tags are used to run a block of code repeatedly. 進一步了解

{% for %}

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

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}
hat shirt pants

{% else %}

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.

{% break %}

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

{% continue %}

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

{% cycle %}

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

{% tablerow %}

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>

Theme Tags

Theme Tags have various functions including: outputting template-specific HTML markup, telling the theme which layout and snippets to use, and splitting a returned array into multiple pages. 進一步了解

{% echo %}

Works inside the liquid tag to output an expression, or Liquid object, in the rendered HTML. Filters can also be applied to expressions that use the echo tag. 進一步了解

{% liquid
if product.featured_image
  echo product.featured_image | img_tag
else
  echo 'product-1' | placeholder_svg_tag
endif %}
<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="Red Shirt Small" />

{% include %}

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

{% form %}

Creates an HTML <form> element with all the necessary attributes (action, id, etc.) and <input> to submit the form successfully. 進一步了解

{% liquid %}

Allows you to write multiple tags within one set of delimiters. This reduces the requirement to open and close multiple sets of delimiters when creating variables and conditions, or executing blocks of code. 進一步了解

{% liquid
case section.blocks.size
when 1
  assign column_size = ''
when 2
  assign column_size = 'one-half'
when 3
  assign column_size = 'one-third'
else
  assign column_size = 'one-quarter'
endcase %}

{% paginate %}

The paginate tag works in conjunction with the for tag to split content into numerous pages. It must wrap a for tag block that loops through an array. 進一步了解

{% raw %}

Allows output of Liquid code on a page without being parsed. 進一步了解

{% raw %}{{ 5 | plus: 6 }}{% endraw %} is equal to 11.
{{ 5 | plus: 6 }} is equal to 11.

{% render %}

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

{% section %}

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>

{% style %}

The Liquid {% style %} tag renders an HTML <style> tag with a Shopify data attribute. 進一步了解

{% style %}
  .section-header {
    color: #dddddd;
  }
{% endstyle %}
<style data-shopify>
  .section-header {
    color: #dddddd;
  }
</style>

Variable Tags

Variable Tags are used to create new Liquid variables. 進一步了解

{% assign %}

Creates a new variable. 進一步了解

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

{% capture %}

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.

{% increment %}

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

{% decrement %}

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

General Filters

General filters serve many different purposes including formatting, converting, and applying CSS classes. 進一步了解

date

Converts a timestamp into another date format. 進一步了解

{{ article.published_at | date: "%a, %b %d, %y" }}
Tue, Apr 22, 14

default

Sets a default value for any variable with no assigned value. Can be used with strings, arrays, and hashes. The default value is returned if the variable resolves to nil or an empty string "". A string containing whitespace characters will not resolve to the default value. 進一步了解

Dear {{ customer.name | default: "customer" }}
<!-- If customer.name is nil -->
Dear customer

<!-- If customer.name is "" -->
Dear customer

<!-- If customer.name is "   " -->
Dear

default_errors

Outputs default error messages for the form.errors variable. The messages returned are dependent on the strings returned by form.errors. 進一步了解

{% if form.errors %}
  {{ form.errors | default_errors }}
{% endif %}
<!-- if form.errors returned "email" -->
Please enter a valid email address.

default_pagination

Creates a set of links for paginated results. Used in conjunction with the paginate variable. 進一步了解

{{ paginate | default_pagination }}
<span class="page current">1</span>
<span class="page"><a href="/collections/all?page=2" title="">2</a></span>
<span class="page"><a href="/collections/all?page=3" title="">3</a></span>
<span class="deco">&hellip;</span>
<span class="page"><a href="/collections/all?page=17" title="">17</a></span>
<span class="next"><a href="/collections/all?page=2" title="">Next &raquo;</a></span>

format_address

Use the format_address filter on an address to print the elements of the address in order according to their locale. The filter will only print the parts of the address that have been provided. This filter works on the addresses page for customers who have accounts in your store, or on your store's address. 進一步了解

{{ address | format_address }}
<p>
  Elizabeth Gonzalez<br>
  1507 Wayside Lane<br>
  San Francisco<br>
  CA<br>
  94103<br>
  United States
</p>

highlight

Wraps words inside search results with an HTML <strong> tag with the class highlight if it matches the submitted search terms. 進一步了解

{{ item.content | highlight: search.terms }}
<!-- If the search term was "Yellow" -->
<strong class="highlight">Yellow</strong> shirts are the best!

highlight_active

Wraps a tag link in a <span> with the class active if that tag is being used to filter a collection. 進一步了解

<!-- collection.tags = ["Cotton", "Crew Neck", "Jersey"] -->
{% for tag in collection.tags %}
    {{ tag | highlight_active | link_to_tag: tag }}
{% endfor %}
<a title="Show products matching tag Cotton" href="/collections/all/cotton"><span class="active">Cotton</span></a>
<a title="Show products matching tag Crew Neck" href="/collections/all/crew-neck">Crew Neck</a>
<a title="Show products matching tag Jersey" href="/collections/all/jersey">Jersey</a>

json

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

var content = {{ pages.page-handle.content | json }};
var content = "\u003Cp\u003E\u003Cstrong\u003EYou made it! Congratulations on starting your own e-commerce store!\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EThis is your shop\u0026#8217;s \u003Cstrong\u003Efrontpage\u003C/strong\u003E, and it\u0026#8217;s the first thing your customers will see when they arrive. You\u0026#8217;ll be able to organize and style this page however you like.\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003ETo get started adding products to your shop, head over to the \u003Ca href=\"/admin\"\u003EAdmin Area\u003C/a\u003E.\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EEnjoy the software,  \u003Cbr /\u003E\nYour Shopify Team.\u003C/p\u003E";

placeholder_svg_tag

Takes a placeholder name and outputs a placeholder SVG illustration. An optional argument can be supplied to include a custom class attribute on the SVG tag. 進一步了解

{{ 'collection-1' | placeholder_svg_tag }}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525.5 525.5">
  ...
</svg>

time_tag

The time_tag filter converts a timestamp into an HTML <time> tag. The output format can be customized by passing deta 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>

weight_with_unit

Formats the product variant’s weight. 進一步了解

{{ product.variants.first.weight | weight_with_unit }}
24.0 kg

Array Filters

Array filters are used to modify the output of arrays. 進一步了解

concat

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

join

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

first

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

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

index

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

last

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

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

map

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

reverse

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

size

Returns the length of a string or an array. 進一步了解

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

sort

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

uniq

Removes any duplicate instances of elements in an array. 進一步了解

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

where

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

Color Filters

brightness_difference

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

color_brightness

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

{{ '#7ab55c' | color_brightness }}
153.21

color_contrast

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

color_darken

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

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

color_desaturate

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

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

color_difference

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

color_extract

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

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

color_lighten

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

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

color_mix

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

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

color_modify

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)

color_saturate

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

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

color_to_rgb

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)

color_to_hsl

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)

color_to_hex

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

Font Filters

Font filters are called on font objects. You can use font filters to load fonts or to obtain font variants. 進一步了解

font_face

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

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

font_url

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

HTML Filters

HTML filters wrap assets in HTML tags. 進一步了解

currency_selector

Generates a drop-down list that customers can use to select an accepted currency on your storefront. This filter must be used on the form object within a currency form. 進一步了解

{% form 'currency' %}
  {{ form | currency_selector: class: 'my_special_class', id: 'Submit'  }}
{% endform %}

img_tag

Generates an image tag. 進一步了解

{{ 'smirking_gnome.gif' | asset_url | img_tag }}
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />

payment_button

Creates a dynamic checkout button for a product. This filter must be used on the form object within a product form. 進一步了解

{{ form | payment_button }}
<div data-shopify="payment-button" class="shopify-payment-button">
  ...
</div>

payment_type_svg_tag

Returns the <svg> tag of the requested payment type image for inlining purposes. Used in conjunction with the shop.enabled_payment_types variable 進一步了解

{% for type in shop.enabled_payment_types %}
  {{ type | payment_type_svg_tag, class: 'custom-class' }}
{% endfor %}
<!-- If the shop accepts Mastercard -->
<svg class="custom-class" xmlns="http://www.w3.org/2000/svg">
  <circle fill="#EB001B" cx="15" cy="12" r="7"></circle>
  <circle fill="#F79E1B" cx="23" cy="12" r="7"></circle>
  ...
</svg>

script_tag

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>

stylesheet_tag

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

Media Filters

Media filters let you generate URLs for a product's media. 進一步了解

external_video_tag

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>

external_video_url

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>

img_tag

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

img_url

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

media_tag

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>

model_viewer_tag

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>

video_tag

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>

Math Filters

Math filters can be linked and are applied in order from left to right, as with all other filters 進一步了解

abs

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

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

at_least

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

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

at_most

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

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

ceil

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

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

divided_by

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

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

floor

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

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

minus

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

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

plus

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

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

round

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

times

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

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

modulo

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

{{ 12 | modulo:5 }}
2

Money Filters

Money filters format prices based on the Currency Formatting found in General Settings. 進一步了解

money

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

money_with_currency

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

money_without_trailing_zeros

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

money_without_currency

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

{{ 1.45 | money_without_currency }}
1.45

String Filters

String filters are used to manipulate outputs and variables of the string type. 進一步了解

append

Appends characters to a string. 進一步了解

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

camelcase

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

{{ 'coming-soon' | camelcase }}
ComingSoon

capitalize

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

{{ 'capitalize me' | capitalize }}
Capitalize me

downcase

Converts a string into lowercase. 進一步了解

{{ 'UPPERCASE' | downcase }}
uppercase

escape

Escapes a string. 進一步了解

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

handleize

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

{{ '100% M & Ms!!!' | handleize }}
100-m-ms

hmac_sha1

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

hmac_sha256

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

md5

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

newline_to_br

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>

pluralize

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

prepend

Prepends characters to a string. 進一步了解

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

remove

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

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

remove_first

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

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

replace

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

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

replace_first

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

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

slice

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

split

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?

strip

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

{{ '   too many spaces      ' | strip }}
too many spaces

lstrip

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

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

rstrip

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

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

sha1

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

sha256

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

strip_html

Strips all HTML tags from a string. 進一步了解

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

strip_newlines

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.

truncate

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

truncatewords

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

upcase

Converts a string into uppercase. 進一步了解

{{ 'i want this to be uppercase' | upcase }}
I WANT THIS TO BE UPPERCASE

url_encode

Converts any URL-unsafe characters in a string into percent-encoded characters. 進一步了解

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

url_escape

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

url_param_escape

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

URL Filters

URL filters output links to assets on Shopify’s Content Delivery Network (CDN). They are also used to create links for filtering collections and blogs. 進一步了解

asset_img_url

Returns the asset URL of an image in the ‘assets’ folder of a theme. 進一步了解

{{ 'logo.png' | asset_img_url: '300x' }}
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/logo_300x.png?28253

asset_url

Returns the URL of a file in the ‘assets’ folder of a theme. 進一步了解

{{ 'shop.css' | asset_url }}
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253

file_img_url

Returns the URL of an image in the Files page of the admin. 進一步了解

{{ 'logo.png' | file_img_url: '300x' }}
//cdn.shopify.com/s/files/1/0087/0462/files/logo_300x.png?28261

file_url

Returns the URL of a file in the Files page of the admin. 進一步了解

{{ 'size-chart.pdf' | file_url }}
//cdn.shopify.com/s/files/1/0087/0462/files/size-chart.pdf?28261

customer_login_link

Generates a link to the customer login page. 進一步了解

{{ 'Log in' | customer_login_link }}
<a href="/account/login" id="customer_login_link">Log in</a>

global_asset_url

Returns the URL of a global asset. Global assets are kept in a central directory on Shopify’s servers. Using global assets can improve the load times of your pages. 進一步了解

{{ 'prototype.js' | global_asset_url | script_tag }}
<script src="//cdn.shopify.com/s/global/prototype.js?1" type="text/javascript"></script>

img_url

Returns the URL of an image. Accepts an image size as a parameter. 進一步了解

{{ product | img_url: '100x100' }}
{{ variant | img_url: '720x720' }}
{{ line_item | img_url: '1024x' }}
{{ image | img_url: '400x400' }}
{{ collection | img_url: '500x500' }}
//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_100x100.jpg?v=1398706734
//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_720x720.jpg?v=1398706734
//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_1024x.jpg?v=1398706734
//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_400x400.jpg?v=1398706734
//cdn.shopify.com/s/files/1/0159/3350/products/shirts_collection_500x500.jpg?v=1338563745

payment_type_img_url

Returns the URL of the payment type’s SVG image. Used in conjunction with the shop.enabled_payment_types variable. 進一步了解

{% for type in shop.enabled_payment_types %}
  <img src="{{ type | payment_type_img_url }}" />
{% endfor %}
<!-- If shop accepts American Express, Mastercard and Visa -->
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_american_express.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_master.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_visa.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">

shopify_asset_url

Returns the URL of a global assets that are found on Shopify’s servers. 進一步了解

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script src="//cdn.shopify.com/s/shopify/option_selection.js?20cf2ffc74856c1f49a46f6e0abc4acf6ae5bb34" type="text/javascript"></script>

sort_by

Creates a URL to a collection page with the provided sort_by parameter. This filter must be applied to a collection URL. 進一步了解

{{ collection.url | sort_by: 'best-selling' }}
/collections/widgets?sort_by=best-selling

url_for_type

Creates a URL that links to a collection page containing products with a specific product type. 進一步了解

{{ "T-shirt" | url_for_type }}
collections/types?q=T-shirt

url_for_vendor

Creates a URL that links to a collection page containing products with a specific product vendor. 進一步了解

{{ "Shopify" | url_for_vendor }}
/collections/vendors?q=Shopify

within

Creates a collection-aware product URL by prepending /collections/collection-handle to a product URL, where collection-handle is the handle of the collection that is currently being viewed. 進一步了解

<a href="{{ product.url | within: collection }}">{{ product.title }}</a>
<a href="/collections/frontpage/products/alien-poster">Alien Poster</a>

Global Objects

These objects can be used and accessed from any file in your theme, and are defined as global objects, or global variables. 進一步了解

all_products

Returns a list of all the products in your store. You can use all_products to access products by their handles. 進一步了解

{{ all_products['fancy-shoes'].title }}
Fancy Shoes

articles

Returns a list of all the blog articles in a store. 進一步了解

{% assign article = articles['news/new-products'] %}
{{ article.title | link_to: article.url }}
<a href="/news/new-products">New products</a>

blogs

Returns a list of all the blogs in a store. 進一步了解

{% for blog in blogs %}
  {{ blog.title }}
{% endfor %}
News
Product updates
Events

canonical_url

Returns the canonical URL of the current page. A page's canonical URL is the page's default URL without any URL parameters. For products and variants, the canonical URL is the default product page with no collection or variant selected. 進一步了解

{{ canonical_url }}

collections

Returns a list of all of the collections in a store. 進一步了解

{% for collection in collections %}
  {{ collection.title }}
{% endfor %}
Fall collection
Best sellers
New products

current_page

current_page returns the number of the page you are on when browsing through paginated content. It can be used outside the paginate block. 進一步了解

{{ page_title }} - Page: {{ current_page }}
Summer Collection - Page: 1

handle

Returns the handle of the page that is being viewed. 進一步了解

{% if handle contains 'hide-from-search' %}
  <meta name="robots" content="noindex">
{% endif %}

images

Allows you to access any image in a store by its filename. 進一步了解

{% assign image = images['store-logo.png'] %}
<img src="{{ image }}" alt="{{ image.alt }}">

linklists

Returns a list of all the menus (link lists) in your store. You can use linklists to access your link lists with their handles. 進一步了解

<ul>
  {% for link in linklists.main-menu.links %}
    <li>{{ link.title | link_to: link.url }}</li>
  {% endfor %}
</ul>
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/collections/all">Catalog</a></li>
  <li><a href="/blogs/news">Blog</a></li>
  <li><a href="/pages/about-us">About Us</a></li>
</ul>

page_description

Returns the description of the product, collection, or page that is being viewed. You can set descriptions in the Shopify admin. 進一步了解

{{ page_description }}
All about my store.

page_title

Returns the title of the product, collection, or page that is being viewed. You can set titles in the Shopify admin. 進一步了解

{{ page_title }}
About us

pages

Returns a list of all the pages in your store. You can use pages to access your pages with their handles. 進一步了解

<h1>{{ pages.about.title }}</h1>
<p>By {{ pages.about.author }}</p>
<div>{{ pages.about.content }}</div>
<h1>About us</h1>
<p>By Anne Teak</p>
<div><p>About page content!</p></div>

request

Returns information about the domain used to access the store. Use request.host to check which domain a customer is visiting from. 進一步了解

{% if request.host == 'myshop.com' %}
  Welcome USA!
{% elsif request.host == 'myshop.ca' %}
  Welcome Canada!
{% else %}
  Welcome!
{% end %}

scripts

Returns information about a store's active scripts. To learn more about Shopify Scripts, visit the help content for the Script Editor app or the Scripts API. 進一步了解

{% if scripts.cart_calculate_line_items %}
  <p>We are running a {{ scripts.cart_calculate_line_items.name }} promotion!</p>
{% endif %}

settings

Returns a list of the settings in your published theme. 進一步了解

{% if settings.use_logo %}
  {{ 'logo.png' | asset_url | img_tag: shop.name }}
{% else %}
  <span class="no-logo">{{ shop.name }}</span>
{% endif %}

address

The address object contains information entered by a customer in Shopify’s checkout pages. Note that a customer can enter two addresses: billing address or shipping address. When accessing attributes of the address object, you must specify which address you want to target. This is done by using either shipping_address or billing_address before the attribute. 進一步了解

address.name

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

Hello, {{ billing_address.name }}

address.first_name

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

address.last_name

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

address.address1

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

address.address2

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

address.street

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

{{ shipping_address.street }}

address.company

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

address.city

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

address.province

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

address.province_code

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

address.zip

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

address.country

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

address.country_code

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

address.phone

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

article

The article object. 進一步了解

article.author

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

article.comments

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

article.comments_count

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

article.comments_enabled?

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

article.comment_post_url

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

article.content

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

article.created_at

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

article.excerpt

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

article.excerpt_or_content

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

article.handle

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

article.id

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

article.image

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

article.image.alt

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

article.image.src

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

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

article.moderated?

Returns true if the blog that the article belongs to is set to moderate comments. Returns false if the blog is not moderated. 進一步了解

article.published_at

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

article.tags

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

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

article.updated_at

Returns returns a timestamp for when a blog article was updated. The date filter can be applied to format the timestamp. 進一步了解

article.url

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

article.user

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

article.user.account_owner

Returns true if the author of the article is the account owner of the shop. Returns false if the author is not the account owner. 進一步了解

article.user.bio

Returns the bio of the author of an article. This is entered through the Staff members options on the Account page. 進一步了解

article.user.email

Returns the email of the author of an article. This is entered through the Staff members options on the Account page. 進一步了解

article.user.first_name

Returns the first name of the author of an article. This is entered through the Staff members options on the Account page. 進一步了解

article.user.homepage

Returns the homepage of the author of an article. This is entered through the Staff members options on the Account page. 進一步了解

article.user.image

Returns the image object of the author of the article. 進一步了解

{% if article.user.image %}
  {{ article.user.image | img_url: '200x200' }}
{% endif %}
//cdn.shopify.com/s/files/1/0087/0462/users/user-image_200x200.png?v=1337103726

article.user.last_name

Returns the last name of the author of an article. This is entered through the Staff members options on the Account page. 進一步了解

block

A block represents the content and settings of a single block in an array of section blocks. The block object can be accessed in a section file by looping through section.blocks. 進一步了解

block.id

Returns a unique ID dynamically generated by Shopify. 進一步了解

block.settings

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

block.shopify_attributes

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

block.type

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

blog

The blog object. 進一步了解

blog.all_tags

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

blog.articles

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

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

blog.articles_count

Returns the total number of articles in a blog. This total does not include hidden articles. 進一步了解

blog.comments_enabled?

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

blog.handle

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

blog.id

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

blog.moderated?

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

blog.next-article

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

blog.previous-article

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

blog.tags

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

blog.title

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

blog.url

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

cart

The cart object can be used and accessed from any file in your theme. 進一步了解

cart.attributes

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

cart.currency

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

cart.item_count

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)

cart.items

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

cart.note

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

cart.original_total_price

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

cart.total_discount

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

cart.total_price

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

cart.total_weight

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

checkout

The checkout object can be accessed in the order status page of the checkout. Shopify Plus merchants can also access properties of the checkout object in the checkout.liquid layout file. 進一步了解

checkout.applied_gift_cards

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

checkout.attributes

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

checkout.billing_address

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

checkout.buyer_accepts_marketing

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

checkout.customer

Returns the customer associated with the checkout. 進一步了解

checkout.discount_applications

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

checkout.discounts

Returns the discounts applied to the checkout. 進一步了解

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

checkout.discounts_amount

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

checkout.discounts_savings

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

checkout.email

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

checkout.gift_cards_amount

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

checkout.id

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

checkout.line_items

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

checkout.name

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

checkout.note

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

checkout.order

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

checkout.order_id

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

checkout.order_name

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

checkout.order_number

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

checkout.requires_shipping

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

checkout.shipping_address

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

checkout.shipping_method

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

checkout.shipping_methods

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

checkout.shipping_price

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

checkout.subtotal_price

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

checkout.tax_lines

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

checkout.tax_price

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

checkout.total_price

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

checkout.transactions

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

collection

The collection object. 進一步了解

collection.all_products_count

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

collection.all_tags

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

collection.all_types

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>

collection.all_vendors

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>

collection.current_type

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

collection.current_vendor

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

collection.default_sort_by

Returns the sort order of the collection, which is set in the collection pages of the Admin. 進一步了解

collection.description

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

collection.handle

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

collection.id

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

collection.image

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

collection.next_product

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

collection.previous_product

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

collection.products

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

collection.products_count

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

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

collection.published_at

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

collection.sort_by

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

collection.sort_options

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>

collection.template_suffix

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

collection.title

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

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

collection.tags

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

collection.url

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

comment

The comment object. 進一步了解

comment.created_at

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

comment.id

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

comment.author

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

comment.email

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

comment.content

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

comment.status

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

comment.updated_at

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

comment.url

Returns the URL of the article with comment.id appended to it. This is so the page will automatically scroll to the comment. 進一步了解

Content Objects

Objects that are used to output the content of template and section files, as well as the scripts and stylesheets loaded by Shopify and Shopify apps. 進一步了解

content_for_header

This object is required in theme.liquid and must be placed inside the HTML head tag. It dynamically loads all scripts required by Shopify into the document head. 進一步了解

{{ content_for_header }}

content_for_index

The content_for_index object contains the content of the dynamic sections to be rendered on the home page selected through a store's theme editor. 進一步了解

{{ content_for_index }}

content_for_layout

The content_for_layout object contains the content of the dynamically generated sections such as collection.liquid or cart.liquid. It is required in theme.liquid and must be placed inside the HTML <body> tag. 進一步了解

{{ content_for_layout }}

country_option_tags

Create option tags for each country. 進一步了解

country_option_tags

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>

currency

The currency object contains information about a store's currency. 進一步了解

currency.name

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

currency.iso_code

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

currency.symbol

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

current_tags

Product tags are used to filter a collection to only show products that contain a specific product tag. Similarly, article tags are used to filter a blog to only show products that contain a specific article tag. The current_tags variable is an array that contains all tags that are being used to filter a collection or blog. 進一步了解

Inside collection.liquid

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

Inside blog.liquid

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

customer_address

The customer_address object contains information of addresses tied to a Customer Account. 進一步了解

customer_address.first_name

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

customer_address.last-name

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

customer_address.address1

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

customer_address.address2

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

customer_address.street

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

customer_address.company

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

customer_address.city

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

customer_address.province

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

customer_address.province_code

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

customer_address.zip

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

customer_address.country

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

customer_address.country_code

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

{{ customer_address.country_code }}
CA

customer_address.phone

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

customer_address.id

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

customer

The customer object contains information about a customer who has a Customer Account. The customer can be used and accessed from any file in your theme. 進一步了解

customer.accepts_marketing

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

customer.addresses

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

customer.addresses_count

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

customer.default_address

Returns the default customer_address. 進一步了解

customer.email

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

customer.first_name

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

customer.has_account

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

customer.id

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

customer.last_name

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

customer.last_order

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

customer.name

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

customer.orders

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

{% for order in customer.orders %}
  {{ order.id }}
{% endfor %}
\#1088
\#1089
\#1090

customer.orders_count

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

customer.phone

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

customer.tags

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

{% for tag in customer.tags %}
  {{ tag }}
{% endfor %}
wholesale regular-customer VIP

customer.customer-tax_exempt

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

customer.total_spent

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

discount

The discount object. Note that this object will display a value only if it’s accessed in notifications or in the Order Printer app. 進一步了解

discount.id

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

discount.title

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

{{ discount.title }}
SPRING14

discount.code

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

discount.amount

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

{{ discount.amount | money }}
$25

discount.total_amount

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

discount.savings

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

discount.total_savings

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

discount.type

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

discount allocation

The discount_allocation object contains all of the information about how a particular discount affects a line item and how the price reduces. The object can be accessed on customer order and notification templates. Shopify Plus merchants can also access properties of the discount_allocation object in the checkout.liquid layout file. 進一步了解

discount_allocation.amount

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

discount_allocation.discount_application

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

discount application

The discount_application object captures the intent of a discount applied on an order. The object can be accessed on customer order and notification templates. Shopify Plus merchants can also access properties of the discount_allocation object in the checkout.liquid layout file. 進一步了解

discount_application.target_selection

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

discount_application.target_type

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

line_item
shipping_line 進一步了解

discount_application.title

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

discount_application.total_allocated_amount

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

discount_application.type

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

discount_application.value

The value of the discount. 進一步了解

discount_application.value_type

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

font

The font object is used to access the font_picker settings. It can be accessed via the global settings object. 進一步了解

font.baseline_ratio

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

{{ settings.heading_font.baseline_ratio }}
0.091

font.fallback_families

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

{{ settings.heading_font.fallback_families }}
sans-serif

font.family

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

{{ settings.heading_font.family }}
"Neue Haas Unica"

font.style

Returns the selected font style. 進一步了解

{{ settings.heading_font.style }}
normal

font.weight

Returns the selected font weight. 進一步了解

{{ settings.heading_font.weight }}
400

font.variants

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

forloop

The forloop object contains attributes of its parent for loop. 進一步了解

forloop.first

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.

forloop.index

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

forloop.index0

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

forloop.last

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!

forloop.rindex

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

forloop.rindex0

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

forloop.length

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

form

The form object is used within the form tag. It contains attributes of its parent form. 進一步了解

form.address1

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

form.address2

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

form.author

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

form.body

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

form.city

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

form.company

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

form.country

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

form.email

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

form.country

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

form.errors

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

form.first_name

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

form.id

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

form.last_name

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

form.password_needed

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

form.phone

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

form.posted_successfully?

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

form.province

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

{{ form.city }}, {{ form.province }}
San Francisco, California

form.set_as_default_checkbox

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

form.zip

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

fulfillment

The fulfillment object. 進一步了解

fulfillment.tracking_company

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

fulfillment.tracking_number

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

Tracking Number: {{ fulfillment.tracking_number }}
Tracking Number: 1Z5F44813600X02768

fulfillment.tracking_url

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

fulfillment.fulfillment_line_items

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

fulfillment.item_count

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.

gift_card

The gift_card object can be accessed in the following templates:
The Gift card created email notification template ‘Email Notifications > Gift card created’
. The gift_card.liquid template. 進一步了解

gift_card.balance

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

gift_card.code

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

gift_card.currency

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

gift_card.customer

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

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

gift_card.enabled

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

gift_card.expired

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

gift_card.expires_on

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

gift_card.initial_value

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

gift_card.product

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

gift_card.properties

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

gift_card.url

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

image

The image object returns information about an image. 進一步了解

image.alt

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

image.aspect_ratio

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

image.attached_to_variant?

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

image.height

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

image.id

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

image.position

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

image.product_id

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

image.src

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

image.variants

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

image.width

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

line_item

A line item represents a single line in the shopping cart. There is one line item for each distinct product variant in the cart. 進一步了解

line_item.discount_allocations

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

line_item.final_line_price

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

line_item.final_price

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

line_item.fulfillment

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

line_item.fulfillment_service

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

line_item.gift_card

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

line_item.grams

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

line_item.key

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

line_item.image

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

line_item.line_price

Returns the combined price of all the items in the line_item. This is the equivalent of line_item.price times line_item.quantity. 進一步了解

line_item.message

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

line_item.original_line_price

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

line_item.original_price

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

line_item.price

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

line_item.product

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

line_item.product_id

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

line_item.properties

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

line_item.quantity

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

line_item.requires_shipping

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

line_item.sku

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

line_item.successfully_fulfilled_quantity

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

line_item.taxable

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

line_item.title

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

line_item.url

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>

line_item.total_discount

Returns the total amount of all discounts applied to the line item.

This attribute only has a value if you are using the Script Editor app. 進一步了解

line_item.variant

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

line_item.variant_id

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

line_item.vendor

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

metafield

The metafields object allows you to store additional information for products, collections, customers, orders, blogs, pages and your shop. You can output metafields on your storefront using Liquid.

There are several apps in the Shopify App Store that you can use to manage your metafields.

A metafield consists of a namespace, a key, a value, and a description (optional). Use the namespace to group different metafields together in a logical way.

Metafields are specified with the value_type as one of the following:

• integer
• string
• json_string

By using the correct value_type you’ll end up with the right type of data when you use the metafields in your Liquid. 進一步了解

metafields

For example, if you’ve added metafields to a product, and the metafield has the following attributes:
Namespace: instructions
Key: Wash
Value: Cold
You can then use the following Liquid in product.liquid to output your metafield.
進一步了解

{% assign instructions = product.metafields.instructions %}
{% assign key = 'Wash' %}
<ul>
  <li>Wash: {{ instructions[key] }}</li>
  <li>Wash: {{ instructions['Wash'] }}</li>
  <li>Wash: {{ instructions.Wash }}</li>
</ul>
Wash: Cold
Wash: Cold
Wash: Cold

order

The order object can be accessed in Liquid templates with customer.orders, in order email templates, and in apps such as Order Printer. 進一步了解

order.attributes

Returns the custom cart attributes for the order, if there are any. You can add as many custom attributes to your cart as you like.

When you're looping through attributes, use {{ attribute | first }} to get the name of the attribute, and {{ attribute | last }} to get its value. 進一步了解

{% if order.attributes %}
  <p>Order notes:</p>
  <ul>
    {% for attribute in order.attributes %}
      <li><strong>{{ attribute | first }}</strong>: {{ attribute | last }}</li>
    {% endfor %}
  </ul>
{% endif %}
<p>Order notes:</p>
<ul>
  <li><strong>Message to merchant</strong>: I love your products! Thanks!</li>
</ul>

order.billing_address

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

order.cancelled

Returns true if an order is canceled, returns false if it is not. 進一步了解

order.cancelled_at

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

order.cancel_reason

Returns one of the following cancellation reasons, if an order was canceled:
items unavailable
fraudulent order
customer changed/cancelled order
other 進一步了解

order.cancel_reason_label

Returns the translated output of an order’s order.cancel_reason 進一步了解

English: {{ order.cancel_reason }}
French: {{ order.cancel_reason_label }}
English: Items unavailable
French: Produits indisponibles

order.created_at

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

order.customer

Returns the customer associated with the order. 進一步了解

order.customer_url

Returns the URL of the customer’s account page. 進一步了解

{{ order.name | link_to: order.customer_url }}
<a href="http://johns-apparel.myshopify.com/account/orders/d94ec4a1956f423dc4907167c9ef0413">#1025</a>

order.discount_applications

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

{% for discount_application in order.discount_applications %}
  Discount name: {{ discount_application.title }}
  Savings: -{{ discount_application.total_allocated_amount | money }}
{% endfor %}
Discount name: SUMMER19
Savings: -$20.00

order.email

Returns the email address associated with an order. 進一步了解

order.financial_status

Returns the financial status of an order. The possible values are:
pending
authorized
paid
partially_paid
refunded
partially_refunded
voided 進一步了解

order.financial_status_label

Returns the translated output of an order’s financial_status. 進一步了解

English: {{ order.financial_status }}
French: {{ order.financial_status_label }}
English: Paid
French: Payée

order.fulfillment_status

Returns the fulfillment status of an order. 進一步了解

order.fulfillment_status_label

Returns the translated output of an order’s fulfillment_status. 進一步了解

English: {{ order.fulfillment_status }}
French: {{ order.fulfillment_status_label }}
English: Unfulfilled
French: Non confirmée

order.line_items

Returns an array of line items from the order. 進一步了解

order.location

POS Only. Returns the physical location of the order. You can configure locations in the Locations settings of the admin. 進一步了解

order.order_status_url

Returns the link to the order status page for this order. 進一步了解

order.name

Returns the name of the order in the format set in the Standards & formats section of the General Settings of your Shopify admin. 進一步了解

{{ order.name }}
\#1025

order.note

Returns the note associated with a customer order. 進一步了解

Special instructions: {{ order.note }}
Special instructions: Please deliver after 5 PM

order.order_number

Returns the integer representation of the order name. 進一步了解

{{ order.order_number }}
1025

order.phone

Returns the phone number associated with an order, if it exists. 進一步了解

order.shipping_address

Returns the shipping address of the order. 進一步了解

order.shipping_methods

Returns an array of shipping_method variables from the order. 進一步了解

order.shipping_price

Returns the shipping price of an order. Use a money filter to return the value in a monetary format. 進一步了解

order.subtotal_price

Returns the subtotal price of an order. Use a money filter to return the value in a monetary format. 進一步了解

order.tags

Returns an array of all of the order's tags. The tags are returned in alphabetical order. 進一步了解

{% for tag in order.tags %}
    {{ tag }}
{% endfor %}
new
leather
sale
special

order.tax_lines

Returns an array of tax_line variables for an order. 進一步了解

{% for tax_line in order.tax_lines %}
  Tax ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%):
  {{ tax_line.price | money }}
{% endfor %}
Tax (GST 14.0%): $25

order.tax_price

Returns the order’s tax price. Use a money filter to return the value in a monetary format. 進一步了解

order.total_discounts

Returns the total value of all discounts applied to the order. 進一步了解

order.total_net_amount

Returns the net amount of the order.

The order.total_net_amount is calculated after refunds are applied. The value is equivalent to order.total_price minus order.total_refunded_amount. 進一步了解

order.total_price

Returns the total price of an order. Use a money filter to return the value in a monetary format. 進一步了解

order.total_refunded_amount

Returns the total refunded amount of an order. 進一步了解

order.transactions

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

Other Objects

Other Liquid objects that are only used in specific circumstances. 進一步了解

additional_checkout_buttons

Returns true if a merchant's store has any payment providers with offsite checkouts, such as PayPal Express Checkout. Use additional_checkout_buttons to check whether these gateways exist. 進一步了解

{% if additional_checkout_buttons %}
  <div class="additional-checkout-buttons">
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}

content_for_additional_checkout_buttons

Returns checkout buttons for any active payment providers with offsite checkouts. 進一步了解

{% if additional_checkout_buttons %}
  <div class="additional_checkout_buttons">
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}

page

The page object. 進一步了解

page.author

Returns the author of a page. 進一步了解

page.content

Returns the content of a page. 進一步了解

page.handle

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

page.id

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

page.published_at

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

page.template_suffix

Returns the name of the custom page template assigned to the page, without the page prefix or the .liquid suffix. Returns nil if a custom template is not assigned to the page. 進一步了解

<!-- on page.contact.liquid -->
{{ page.template_suffix }}
contact

page.title

Returns the title of a page. 進一步了解

page.url

Returns the relative URL of a page. 進一步了解

{{ page.url }}
/pages/about-us

paginate

The paginate tag’s navigation is built using the attributes of the paginate object. You can also use the default_pagination filter for a quicker alternative. 進一步了解

paginate.current_page

Returns the number of the current page. 進一步了解

paginate.current_offset

Returns the total number of items that are on the pages previous to the current one. For example, if you are paginating by 5 items per page and are on the third page, paginate.current_offset would return 10 (5 items × 2 pages). 進一步了解

paginate.items

Returns the total number of items to be paginated. For example, if you are paginating a collection of 120 products, paginate.items would return 120. 進一步了解

paginate.parts

Returns an array of all parts of the pagination. A part is a component used to build the navigation for the pagination. 進一步了解

paginate.next

Returns the part variable for the Next link in the pagination navigation. 進一步了解

{% if paginate.next.is_link %}
  <a href="{{ paginate.next.url }}">{{ paginate.next.title }}</a>
{% endif %}
<!-- If we're not on the last page, and there still needs to be a Next link -->
<a href="/collections/all?page=17">Next »</a>

paginate.previous

Returns the part variable for the Previous link in the pagination navigation. 進一步了解

{% if paginate.previous.is_link %}
  <a href="{{ paginate.previous.url }}">{{ paginate.previous.title }}</a>
{% endif %}
<!-- If we're not on the first page, and there still needs to be a Previous link -->
<a href="/collections/all?page=15">« Previous</a>

paginate.page_size

Returns the number of items displayed per page. 進一步了解

paginate.pages

Returns the number of pages created by the pagination tag. 進一步了解

product

The product object. 進一步了解

product.available

Returns true if a product is available for purchase. Returns false if all of the products’ variants inventory_quantity values are zero or less, and their inventory_policy is not set to ‘Allow users to purchase this item, even if it is no longer in stock.’ 進一步了解

product.collections

Returns an array of all of the collections a product belongs to. 進一步了解

{% for collection in product.collections %}
  {{ collection.title }}
{% endfor %}
Sale
Shirts
Spring

product.compare_at_price_max

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

product.compare_at_price_min

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

product.compare_at_price_varies

Returns true if the compare_at_price_min is different from the compare_at_price_max. Returns false if they are the same. 進一步了解

product.content

Returns the description of the product. Alias for product.description. 進一步了解

product.created_at

Returns a timestamp for when a product was created in the admin. 進一步了解

{{ product.created_at }}
2019-11-01 05:56:37 -0400

product.description

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

product.first_available_variant

Returns the variant object of the first product variant that is available for purchase. In order for a variant to be available, its variant.inventory_quantity must be greater than zero or variant.inventory_policy must be set to continue. A variant with no inventory_policy is considered available. 進一步了解

product.handle

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

product.has_only_default_variant

Returns true if the product only has the default variant. This lets you determine whether to show a variant picker in your product forms.

Products that don't have customized variants have a single default variant with its "Title" option set to "Default Title". 進一步了解

{% if product.has_only_default_variant %}
  <input name="id" value="{{ variant.id }}" type="hidden">
{% else %}
  <select name="id">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}">{{ variant.title }}</option>
    {% endfor%}
  </select>
{% endif %}
<select name="id">
  <option value="34679843235">Red</option>
  <option value="34679843236">Blue</option>
  <option value="34679843237">Green</option>
</select>

product.id

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

product.images

Returns an array of the product’s images. Use the product_img_url filter to link to the product image on Shopify’s Content Delivery Network. 進一步了解

{% for image in product.images %}
  <img src="{{ image.src | product_img_url: 'medium' }}">
{% endfor %}
<img src="//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311" />
<img src="//cdn.shopify.com/s/files/1/0087/0462/products/nice_shirt_medium.jpeg?v=1331480777">
<img src="//cdn.shopify.com/s/files/1/0087/0462/products/aloha_shirt_medium.jpeg?v=1331481001">

product.options

Returns an array of the product’s options. 進一步了解

product.options_with_values

Returns an array of the product's options. 進一步了解

{% for product_option in product.options_with_values %}
  <label>
    {{ product_option.name }}
    <select>
      {% for value in product_option.values %}
        <option {% if product_option.selected_value == value %}selected{% endif %}>
          {{ value }}
        </option>
      {% endfor %}
    </select>
  </label>
{% endfor %}
<label>
  Color
  <select>
    <option selected>Red</option>
    <option>Green</option>
  </select>
</label>

product.price

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

product.price_max

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

product.price_min

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

product.price_varies

Returns true if the product’s variants have varying prices. Returns false if all of the product’s variants have the same price. 進一步了解

product.published_at

Returns a timestamp for when a product was published on a store. 進一步了解

{{ product.published_at }}
2019-11-01 05:56:37 -0400

product.selected_variant

Returns the variant object of the currently-selected variant if there is a valid ?variant= parameter in the URL. Returns nil if there is not. 進一步了解

{{ product.selected_variant.id }}
124746062

product.selected_or_first_available_variant

Returns the variant object of the currently-selected variant if there is a valid ?variant= query parameter in the URL. If there is no selected variant, the first available variant is returned. In order for a variant to be available, its variant.inventory_quantity must be greater than zero or variant.inventory_policy must be set to continue. A variant with no inventory_management is considered available. 進一步了解

product.tags

Returns an array of all of the product’s tags. The tags are returned in alphabetical order. 進一步了解

{% for tag in product.tags %}
  {{ tag }}
{% endfor %}
new
leather
sale
special

product.template_suffix

Returns the name of the custom product template assigned to the product, without the product prefix nor the .liquid suffix. Returns nil if a custom template is not assigned to the product. 進一步了解

<!-- on product.wholesale.liquid -->
{{ product.template_suffix }}
wholesale

product.title

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

product.type

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

product.url

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

{{ product.url }}
/products/awesome-shoes

product.variants

Returns an array the product’s variants. 進一步了解

product.vendor

Returns the vendor of the product. 進一步了解

product_option

The product_option object is available for each option in a product options array. The product options array is accessible via product.options_with_values. 進一步了解

product_option.name

Returns the product option's name. 進一步了解

<ul>
  {% for product_option in product.options_with_values %}
    <li>{{ product_option.name }}</li>
  {% endfor %}
</ul>
<ul>
  <li>Color</li>
  <li>Size</li>
</ul>

product_option.position

Returns the product option's position in the product options array. 進一步了解

<ul>
  {% for product_option in product.options_with_values %}
    <li>{{ product_option.position }} - {{ product_option.name }}</li>
  {% endfor %}
</ul>
<ul>
  <li>1 - Color</li>
  <li>2 - Size</li>
</ul>

product_option.selected_value

Returns the currently selected value for this product option. 進一步了解

<select>
  {% for value in product_option.values %}
    <option {% if product_option.selected_value == value %}selected{% endif %}>
      {{ value }}
    </option>
  {% endfor %}
</select>
<select>
  <option selected>Red</option>
  <option>Green</option>
</select>

product_option.values

Returns an array of possible values for this product option. 進一步了解

<ul>
  {% for value in product_option.values %}
    <li>{{ value }}</li>
  {% endfor %}
</ul>
<ul>
  <li>Red</li>
  <li>Green</li>
</ul>

recommendations

The recommendations object provides product recommendations that are related to a given product, based on data from sales, product descriptions, and relations between products and collections. Product recommendations become more accurate over time as new orders and product data become available. The recommendations object can be used and accessed from any file in your theme. 進一步了解

recommendations.performed

Returns true if the recommendations object is referenced inside a theme section that is rendered via /recommendations/products?section_id=&product_id= with valid parameters:

product_id: id of the section where the recommendations object is being used (required)
section_id: id of the product you want to show recommended products for yes (required)
limit: Limits number of results, up to a maximum of ten no 進一步了解

recommendations.products_count

Returns the number of product recommendations, or returns 0 if recommendations.performed is false. 進一步了解

recommendations.products

Returns product recommendations. These objects are products. Doesn't return any product if recommendations.performed is false. 進一步了解

{% if recommendations.performed %}
  {% if recommendations.products_count > 0 %}
    {% for product in recommendations.products %}
      {{ product.title | link_to: product.url }}
    {% endfor %}
  {% endif %}
{% else %}
  <div class="placeholder">Placeholder animation</div>
{% endif %}
When the enclosing section is rendered synchronously:

Placeholder animation

---------------------
When the enclosing section is rendered from the endpoint /recommendations/products?section_id=<section_id>&product_id=<product_id>:

Product title
Another product title

request

The request object returns information about the domain used to access your store and the page being accessed. 進一步了解

request.host

You can use request.host to check which domain a customer is visiting from. 進一步了解

{{ request.host }}
your-store.myshopify.com

request.locale

Returns the shop_locale of the current request. 進一步了解

{{ request.locale.name }}
English

request.page_type

Returns the type of the current page. These are the different page types:
404
article
blog
cart
collection
list-collections
customers/account
customers/activate_account
customers/addresses
customers/login
customers/order
customers/register
customers/reset_password
gift_card
index
page
password
product
進一步了解

{{ request.page_type }}
collection

request.path

Returns the path to the current page. 進一步了解

{{ request.path }}
/collections/classics/products/chambray-shirt

routes

You can use the routes object to generate dynamic URLs to your storefront. By using them instead of hardcoded links, you can make sure your theme supports any changes to the URL format. 進一步了解

routes.account_addresses_url

Returns the account addresses URL. 進一步了解

routes.account_url

Returns the account URL. 進一步了解

routes.account_login_url

Returns the account login URL. 進一步了解

routes.account_logout_url

Returns the account logout URL. 進一步了解

routes.account_recover_url

Returns the account recover URL. 進一步了解

routes.account_register_url

Returns the account register URL. 進一步了解

routes.all_products_collection_url

Returns the URL that points to the collection for all products. 進一步了解

routes.cart_url

Returns the cart URL. 進一步了解

routes.cart_add_url

Returns the URL that accepts items to be added to a cart. 進一步了解

routes.cart_change_url

Returns the URL that allows a cart to be changed. 進一步了解

routes.cart_clear_url

Returns the URL that will clear the cart. 進一步了解

routes.collections_url

Returns the collections URL. 進一步了解

routes.product_recommendations_url

Returns the product recommendations URL. 進一步了解

routes.root_url

Returns the root URL. 進一步了解

routes.search_url

Returns the search URL. 進一步了解

script

script objects contain information about the Shopify Scripts published in your store. 進一步了解

script.id

Returns the script's ID. 進一步了解

script.name

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

{% if scripts.cart_calculate_line_items %}
  <p>Check out our sale: {{ scripts.cart_calculate_line_items.name }}</p>
{% endif %}
Check out our sale: Buy one chambray shirt and get a second for half price

section

The section object lets you access a section's properties and setting values. 進一步了解

section.blocks

Returns an array of the section's blocks. 進一步了解

section.id

For static sections, returns the section's file name without .liquid. For dynamic sections, returns a dynamically generated ID. 進一步了解

section.settings

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

<h2>{{ section.settings.heading }}</h2>
<a href="{{ section.settings.featured_collection.url }}">This week's best selling items</a>
<h2>Weekly promotion</h2> <a href="/collections/new-this-week">This week's best selling items</a>

shipping_method

The shipping_method object. 進一步了解

shipping_method.handle

Returns the handle of the shipping method. The price of the shipping rate is appended to the end of the handle. 進一步了解

{{ shipping_method.handle }}
shopify-international-shipping-25.00

shipping_method.original_price

Returns the original price of the shipping method before discounts were applied. Use a money filter to return the value in a monetary format. 進一步了解

{{ shipping_method.original_price | money }}
$20.00

shipping_method.price

Returns the price of the shipping method. Use a money filter to return the value in a monetary format. 進一步了解

{{ shipping_method.price | money }}
$15

shipping_method.title

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

{{ shipping_method.title }}
International Shipping

shop

The shop object can be used and accessed from any file in your theme. 進一步了解

shop.address

You can add attributes to shop.address to return information about a shop’s address. 進一步了解

shop.collections_count

Returns the number of collections in a shop. 進一步了解

shop.currency

Returns the shop’s currency in three-letter format (e.g. USD). 進一步了解

shop.description

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

shop.domain

Returns the primary domain of the shop. 進一步了解

shop.email

Returns the shop’s email address. 進一步了解

shop.enabled_currencies

Returns the list of currency objects that the store accepts.

To return the currency of the cart, see the cart.currency object.

To return the store currency, see the shop.currency object. 進一步了解

shop.enabled_locales

Returns an array of all published shop_locale on the shop. 進一步了解

{% for locale in shop.enabled_locales %}
  {{ locale.name }} ({{ locale.iso_code }})
{% endfor %}

shop.enabled_payment_types

Returns an array of accepted credit cards for the shop. Use the payment_type_img_url filter to link to the SVG image file of the credit card. 進一步了解

shop.metafields

Returns the shop’s metafields. Metafields can only be set using the Shopify API. 進一步了解

shop.money_format

Returns a string that is used by Shopify to format money without showing the currency. 進一步了解

shop.money_with_currency_format

Returns a string that is used by Shopify to format money while also displaying the currency. 進一步了解

shop.name

Returns the shop’s name. 進一步了解

shop.password_message

Returns the shop’s password page message. 進一步了解

shop.permanent_domain

Returns the .myshopify.com URL of a shop. 進一步了解

shop.phone

Returns the shop's phone number. 進一步了解

shop.policies

Returns an array of your shop's policy objects. You can set these policies in your store's Legal settings in your Shopify admin. 進一步了解

shop.privacy_policy

Returns a policy object for your store's privacy policy. 進一步了解

shop.refund_policy

Returns a policy object for your store's refund policy. 進一步了解

shop.shipping_policy

Returns a policy object for your store's shipping policy. 進一步了解

shop.terms_of_service

Returns a policy object for your store's terms of service. 進一步了解

shop.products_count

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

shop.taxes-included

Returns true if taxes are included in your products' prices. Otherwise, returns false. 進一步了解

{% if shop.taxes_included %}
  Taxes included
{% else %}
  Excluding taxes
{% endif %}
Taxes included

shop.types

Returns an array of all unique product types in a shop. 進一步了解

{% for product_type in shop.types %}
  {{ product_type | link_to_type }}
{% endfor %}

shop.url

Returns the full URL of a shop. 進一步了解

{{ shop.url }}
http://johns-apparel.com

shop.secure_url

Returns the full URL of a shop prepended by the https protocol. 進一步了解

{{ shop.secure_url }}
https://johns-apparel.com

shop.vendors

Returns an array of all unique vendors in a shop. 進一步了解

{% for product_vendor in shop.vendors %}
  {{ product_vendor | link_to_vendor }}
{% endfor %}

shop_locale

Returns information about the shop's locale. 進一步了解

shop_locale.endonym_name

Returns the locale endonym name. 進一步了解

{{ shop_locale.endonym_name }}
français canadien

shop_locale.iso_code

Returns the locale code. 進一步了解

{{ shop_locale.iso_code }}
fr-CA

shop_locale.name

Returns the locale name. 進一步了解

{{ shop_locale.name }}
Canadian French

shop_locale.primary

Returns whether or not this is the shop's primary locale. 進一步了解

shop_locale.root_url

Returns the root relative URL of the locale. 進一步了解

tablerow

The tablerow object is used within the tablerow tag. It contains attributes of its parent for loop. 進一步了解

tablerow.length

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

tablerow.index

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

tablerow.index0

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

tablerow.rindex

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

tablerow.rindex0

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

tablerow.first

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

tablerow.last

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

tablerow.col

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

tablerow.col0

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

tablerow.col_first

Returns true if the current column is the first column in a row. Returns false if it is not. 進一步了解

tablerow.col_last

Returns true if the current column is the last column in a row. Returns false if it is not. 進一步了解

tax_line

The tax_line object. 進一步了解

tax_line.title

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

{{ tax_line.title }}
GST

tax_line.price

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

{{ tax_line.price | money }}
€25

tax_line.rate

Returns the rate of the tax in decimal notation. 進一步了解

{{ tax_line.rate }}
0.14

tax_line.rate_percentage

Returns the rate of the tax in percentage format. 進一步了解

{{ tax_line.rate_percentage }}%
14%

template

The template object has a handful of attributes. Referencing just template returns the name of the template used to render the current page, with the .liquid extension omitted. The template object can be used and accessed from any file in your theme. 進一步了解

template

As a best practice, it's recommended that you apply the template name as a CSS class on your HTML body tag. 進一步了解

<body class="{{ template }}">
<body class="product">

template.directory

Returns the name of the template's parent directory. Returns nil for templates whose parent directory is the templates/ folder. 進一步了解

<!-- If you're on the customers/login.liquid template -->
{{ template.directory }}
customers

template.name

Returns the template's name without the template's custom suffix, if it exists, or the .liquid extension. 進一步了解

<!-- If you're on the product.alternate.liquid template -->
{{ template.name }}
product

template.suffix

Returns the name of the custom template without the template.name prefix or the .liquid extension. Returns nil if a custom template is not being used. 進一步了解

<!-- If you're on the product.alternate.liquid template -->
{{ template.suffix }}
alternate

theme

The theme object contains information about published themes in a shop. You can also use themes to iterate through both themes. 進一步了解

theme.id

Returns the theme’s id. This is useful for when you want to link a user directly to the theme’s Customize theme page. 進一步了解

theme.role (deprecated)

Returns one of the two possible roles of a theme: main or mobile. 進一步了解

theme.name

Returns the name of the theme. 進一步了解

transaction

The transaction object. 進一步了解

transaction.id

Returns a unique numeric identifier for the transaction. 進一步了解

transaction.amount

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

transaction.name

Returns the name of the transaction. 進一步了解

{{ transaction.name }}
c251556901.1

transaction.status

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

transaction.status_label

Returns the translated output of a transaction’s status. 進一步了解

transaction.created_at

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

transaction.receipt

Returns text with information from the payment gateway about the payment receipt. This includes whether the payment was a test case and an authorization code if one was included in the transaction. 進一步了解

transaction.kind

Returns the type of transaction. There are five transaction types:

  • authorization is the reserving of money that the customer has agreed to pay.
  • capture is the transfer of the money that was reserved during the authorization stage.
  • sale is a combination of authorization and capture, performed in one step.
  • void is the cancellation of a pending authorization or capture.
  • refund is the partial or full refund of the captured money to the customer.
進一步了解

transaction.gateway

Returns the name of the payment gateway used for the transaction. 進一步了解

{{ transaction.gateway }}
Cash on Delivery (COD)

transaction.payment_details

The payment_details object contains additional properties related to the payment method used in the transaction.
credit_card_company returns the name of the company who issued the customer’s credit card.
credit_card_number returns the customer’s credit card number. All but the last four digits are redacted. 進一步了解

{{ transaction.payment_details.credit_card_company }}: {{ transaction.payment_details.credit_card_number }}
Visa: •••• •••• •••• 1234

variant

The variant object. 進一步了解

variant.available

Returns true if the variant is available to be purchased, or false if it is not. In order for a variant to be available, its variant.inventory_quantity must be greater than zero or variant.inventory_policy must be set to continue. A variant with no variant.inventory_management is also considered available. 進一步了解

variant.barcode

Returns the variant’s barcode. 進一步了解

variant.compare_at_price

Returns the variant’s compare at price. Use one of the money filters to return the value in a monetary format. 進一步了解

variant.id

Returns the variant’s unique id. 進一步了解

variant.image

Returns the image object associated to the variant. 進一步了解

{{ variant.image.src }}
products/red-shirt.jpeg

variant.incoming

Returns true if the variant has incoming inventory. 進一步了解

variant.inventory_management

Returns the variant’s inventory tracking service. 進一步了解

variant.inventory_policy

Returns the string continue if the ‘Allow users to purchase this item, even if it is no longer in stock.’ checkbox is checked in the variant options in the Admin. Returns deny if it is unchecked. 進一步了解

variant.next_incoming_date

Returns the date when the next incoming inventory will arrive. 進一步了解

variant.inventory_quantity

Returns the variant’s inventory quantity. 進一步了解

variant.option1

Returns the value of the variant’s first option. 進一步了解

variant.option2

Returns the value of the variant’s second option. 進一步了解

variant.option3

Returns the value of the variant’s third option. 進一步了解

variant.price

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

variant.requires_shipping

Returns a boolean result as to whether the variant is set to require shipping. 進一步了解

variant.selected

Returns true if the variant is currently selected by the ?variant= URL parameter. Returns false if the variant is not selected by a URL parameter. 進一步了解

variant.sku

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

variant.taxable

Returns a boolean result as to whether taxes will be charged for this variant. 進一步了解

variant.title

Returns the concatenation of all the variant’s option values, joined by a /. 進一步了解

<!-- If variant’s option1, option2, and option3 are "Red", "Small", "Wool", respectively -->
{{ variant.title }}
Red / Small / Wool

variant.unit_price

Returns the unit price of the product variant. The price reflects any discounts that are applied to the line item.

Unit prices are available only to stores located in Germany or France. 進一步了解

variant.unit_price_measurement

Returns a unit_price_measurement object for the product variant.

Unit prices are available only to stores located in Germany or France. 進一步了解

variant.url

Returns the variant’s absolute URL. 進一步了解

{{ variant.url }}
http://my-store.myshopify.com/products/t-shirt?variant=12345678

variant.weight

Returns the variant’s weight in grams. Use the weight_with_unit filter to convert it to the shop’s weight format or the weight unit configured on the variant. 進一步了解

variant.weight_unit

Returns the unit for the weight configured on the variant. Works well paired with the weight_in_unit attribute and the weight_with_unit filter. 進一步了解

variant.weight_in_unit

Returns the weight of the product converted to the unit configured on the variant. Works well paired with the weight_unit attribute and the weight_with_unit filter. 進一步了解