Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid

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

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

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

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

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

tomato

Creates a new variable. Learn more

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

This statement is valid.

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

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

I am being captured.

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

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

0
1
2

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

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

-1
-2
-3

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

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

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

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

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

h2 {
  font-weight: 900;
}

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

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

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

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

{{ 145 | money }}

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

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

{{ 1.45 | money_with_currency }}

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

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

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

$20

Formats the price using a decimal. Learn more

{{ 1.45 | money_without_currency }}

1.45

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

Hello, {{ billing_address.name }}

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

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

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

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

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

{{ shipping_address.street }}

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

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

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

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

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

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

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

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

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

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

Rex

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

{{ cart.currency.iso_code }}

USD

Returns the number of items inside the cart. Learn more

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

25 items ($53.00)

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

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

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

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

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

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

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

{{ content_for_header }}

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

{{ content_for_index }}

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

{{ content_for_layout }}

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

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

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

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

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

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

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

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

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

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

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

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

{{ customer_address.country_code }}

CA

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

Returns the id of customer address. Learn more

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

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

line_item
shipping_line Learn more

The customer-facing name of the discount. For example, Welcome10 or CBBWQQAKYBYY. Learn more

The total amount that the price of an order is reduced by the discount. Learn more

The type of the discount. type has the following possible values:
automatic
discount_code
manual
script Learn more

The value of the discount. Learn more

The value type of the discount. value_type has the following possible values:
fixed_amount
percentage Learn more

Returns the name of the fulfillment service. Learn more

Returns a fulfillment’s tracking number, if it exists. Learn more

Tracking Number: {{ fulfillment.tracking_number }}

Tracking Number: 1Z5F44813600X02768

Returns the URL for a tracking number. Learn more

{{ fulfillment.tracking_url }}

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

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

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

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

Returns the total number of items included in the fulfillment. Learn more

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

We have fulfilled 3 items of your recent order.

Returns true if the link is active, or false if the link is inactive. Learn more

Similar to link.active, but returns true if a child link of the parent link is active, or false if no child links of the parent link are active. Learn more

{{ linklists.main.title }}

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

Main Menu

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

Returns true if a child link has a link object with link.current equal to true. Returns false if no child links have a link object with link.current equal to true. Learn more

{{ linklists.main.title }}

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

Main Menu

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

Returns true if the page content associated with the link is considered a match to the current page. Returns false if the content isn't considered a match. Learn more

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

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

Returns the number of nested levels that a link contains. Learn more

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

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

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

Returns an array of the child links associated with the parent link. Learn more

Returns the variable associated to the link. The possible types are: product, collection, page, blog. Learn more

{{ link.object.price | money }}

$10

Returns the title of the link. Learn more

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

Returns the URL of the link. Learn more

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

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

Returns checkout buttons for any active payment providers with offsite checkouts. Learn more

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

Returns the product option's name. Learn more

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

<ul>
  <li>Color</li>
  <li>Size</li>
</ul>

Returns the product option's position in the product options array. Learn more

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

Returns the currently selected value for this product option. Learn more

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

Returns an array of possible values for this product option. Learn more

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

<ul>
  <li>Red</li>
  <li>Green</li>
</ul>

Returns true if an HTML form with the attribute action="/search" was submitted successfully. This allows you to show content based on whether a search was performed or not. Learn more

{% if search.performed %}
  <!-- Show search results -->
{% endif %}

Returns an array of matching search result items. The items in the array can be a(n):
product
article
page

You can access the attributes of the above three objects through search.results. Learn more

Returns the number of results found. Learn more

Returns the string that was entered in the search input box. Use the highlight filter to apply a different style to any instances in the search results that match up with search.terms. Learn more

{{ item.content | highlight: search.terms }}

<!-- If the search term was "Yellow" -->
<strong class="highlight">Yellow</strong> shirts are the best!

Returns an array of strings representing the types the search was performed on. The items in the array can be any combination of article, page, product.

The search types can be seen in the URL parameters of a search page. For example, storefront.com/search?type=article,product&q=* will have a search.types array containing article and product. Learn more

You can add attributes to shop.address to return information about a shop’s address. Learn more

Returns the number of collections in a shop. Learn more

Returns the shop’s currency in three-letter format (e.g. USD). Learn more

Returns the description of the shop. Learn more

Returns the primary domain of the shop. Learn more

Returns the shop’s email address. Learn more

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

Returns an array of all published shop_locale on the shop. Learn more

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

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

Returns the shop’s metafields. Metafields can only be set using the Shopify API. Learn more

Returns a string that is used by Shopify to format money without showing the currency. Learn more

Returns a string that is used by Shopify to format money while also displaying the currency. Learn more

Returns the shop’s name. Learn more

Returns the shop’s password page message. Learn more

Returns the .myshopify.com URL of a shop. Learn more

Returns the shop's phone number. Learn more

Returns an array of your shop's policy objects. You can set these policies in your store's Legal settings in your Shopify admin. Learn more

Returns a policy object for your store's privacy policy. Learn more

Returns a policy object for your store's refund policy. Learn more

Returns a policy object for your store's shipping policy. Learn more

Returns a policy object for your store's terms of service. Learn more

Returns the number of products in a shop. Learn more

Returns true if taxes are included in your products' prices. Otherwise, returns false. Learn more

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

Taxes included

Returns an array of all unique product types in a shop. Learn more

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

Returns the full URL of a shop. Learn more

{{ shop.url }}

http://johns-apparel.com

Returns the full URL of a shop prepended by the https protocol. Learn more

{{ shop.secure_url }}

https://johns-apparel.com

Returns an array of all unique vendors in a shop. Learn more

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

As a best practice, it's recommended that you apply the template name as a CSS class on your HTML body tag. Learn more

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

<body class="product">

Returns the name of the template's parent directory. Returns nil for templates whose parent directory is the templates/ folder. Learn more

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

customers

Returns the template's name without the template's custom suffix, if it exists, or the .liquid extension. Learn more

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

product

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

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

alternate

equals Learn more

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

does not equal Learn more

greater than Learn more

less than Learn more

greater than or equal to Learn more

less than or equal to Learn more

condition A or condition B Learn more

condition A and condition B Learn more

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

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

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

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

These shoes are awesome!

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

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

Hey Anonymous!

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

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

This is a cake

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

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

These shoes are not awesome.

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

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

These awesome shoes are affordable.

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

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

You're buying an awesome product!

Converts a timestamp into another date format. Learn more

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

Tue, Apr 22, 14

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

Dear {{ customer.name | default: "customer" }}

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

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

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

Outputs default error messages for the form.errors variable. The messages returned are dependent on the strings returned by form.errors. Learn more

{% if form.errors %}
  {{ form.errors | default_errors }}
{% endif %}

<!-- if form.errors returned "email" -->
Please enter a valid email address.

Creates a set of links for paginated results. Used in conjunction with the paginate variable. Learn more

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

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

{{ address | format_address }}

<p>
  Elizabeth Gonzalez<br>
  1507 Wayside Lane<br>
  San Francisco<br>
  CA<br>
  94103<br>
  United States
</p>

Wraps words inside search results with an HTML <strong> tag with the class highlight if it matches the submitted search terms. Learn more

{{ item.content | highlight: search.terms }}

<!-- If the search term was "Yellow" -->
<strong class="highlight">Yellow</strong> shirts are the best!

Wraps a tag link in a <span> with the class active if that tag is being used to filter a collection. Learn more

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

Converts a string into JSON format. Learn more

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

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

{{ 'collection-1' | placeholder_svg_tag }}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525.5 525.5">
  ...
</svg>

The t filter uses a translation key to access the locale file for the active language and returns the corresponding string of translated text in the locale file. Learn more

{{ 'products.product.sold_out' | t }}

Sold out

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

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

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

Formats the product variant’s weight. Learn more

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

24.0 kg

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

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

Generates an image tag. Learn more

{{ '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="" />

Creates a dynamic checkout button for a product. This filter must be used on the form object within a product form. Learn more

{{ form | payment_button }}

<div data-shopify="payment-button" class="shopify-payment-button">
  ...
</div>

Returns the <svg> tag of the requested payment type image for inlining purposes. Used in conjunction with the shop.enabled_payment_types variable Learn more

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

Generates a script tag. Learn more

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

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

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

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

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

Appends characters to a string. Learn more

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

sales.jpg

Converts a dash-separated string into CamelCase. Learn more

{{ 'coming-soon' | camelcase }}

ComingSoon

Capitalizes the first word in a string. Learn more

{{ 'capitalize me' | capitalize }}

Capitalize me

Converts a string into lowercase. Learn more

{{ 'UPPERCASE' | downcase }}

uppercase

Escapes a string. Learn more

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

<p>test</p>

Formats a string into a handle. Learn more

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

100-m-ms

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

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

My encoded string is: 30ab3459e46e7b209b45dba8378fcbba67297304

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

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

My encoded string is: 30ab3459e46e7b209b45dba8378fcbba67297304

Converts a string into an MD5 hash. Learn more

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

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

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

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

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

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

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

3 items

Prepends characters to a string. Learn more

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

Made a great sale

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

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

Hello, . Goodbye, .

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

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

Hello, . Goodbye, world.

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

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

Mega Shoes

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

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

Mega Awesome Shoes

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

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

h
e
ell

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

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

Hi,
how
are
you
today?

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

{{ '   too many spaces      ' | strip }}

too many spaces

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

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

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

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

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

.moT rojaM ot lortnoc dnuorG

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

{{ '              too many spaces      ' | rstrip }}

"                too many spaces"

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

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

My encoded string is: c7322e3812d3da7bc621300ca1797517c34f63b6

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

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

My encoded string is: c29cce758876791f34b8a1543f0ec3f8e886b5271004d473cfe75ac3148463cb

Strips all HTML tags from a string. Learn more

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

Hello World

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

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

This is a multiline product description.

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

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

The cat...

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

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

The cat came back...

Converts a string into uppercase. Learn more

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

I WANT THIS TO BE UPPERCASE

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

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

john%40liquid.com

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

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

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

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

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

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

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

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

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

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

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

Returns the content of an article. Learn more

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

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

Fri, Sep 16, 11

Returns the excerpt of an article. Learn more

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

Returns the handle of the article. Learn more

Returns the id of an article. Learn more

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

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

Returns the article image's alt text. Learn more

Returns the relative URL to the article image. Learn more

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

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

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

Returns all the tags for an article. Learn more

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

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

Returns the relative URL of the article. Learn more

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

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

Returns the bio of the author of an article. This is entered through the Staff members options on the Account page. Learn more

Returns the email of the author of an article. This is entered through the Staff members options on the Account page. Learn more

Returns the first name of the author of an article. This is entered through the Staff members options on the Account page. Learn more

Returns the homepage of the author of an article. This is entered through the Staff members options on the Account page. Learn more

Returns the image object of the author of the article. Learn more

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

Returns the last name of the author of an article. This is entered through the Staff members options on the Account page. Learn more

Returns the gift cards applied to the checkout. Learn more

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

Returns the billing address of the checkout. Learn more

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

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

Returns the customer associated with the checkout. Learn more

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

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

Discount name: SUMMER19
Savings: -$20.00

Returns the discounts applied to the checkout. Learn more

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

* secret-discount: $12.00

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

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

You save: $12.00

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

Returns the email used during the checkout. Learn more

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

Returns the id of the checkout. Learn more

Returns all the line items of the checkout. Learn more

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

Returns the note of the checkout. Learn more

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

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

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

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

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

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

Returns the shipping address of the checkout. Learn more

Returns the shipping method of the checkout. Learn more

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

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

Shipping methods:
* International Shipping: $12.00

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

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

Returns all the tax lines of the checkout. Learn more

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

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

Total: {{ checkout.total_price | money }}

Total: $26.75

Returns an array of transactions from the checkout. Learn more

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

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

Returns true if the customer accepts marketing. Returns false if the customer does not. Learn more

Returns an array of all addresses associated with a customer. See customer_address for a full list of available attributes. Learn more

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

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

Returns the number of addresses associated with a customer. Learn more

Returns the default customer_address. Learn more

Returns the email address of the customer. Learn more

Returns the first name of the customer. Learn more

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

Returns the id of the customer. Learn more

Returns the last name of the customer. Learn more

Returns the last order placed by the customer, not including test orders. Learn more

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

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

Returns the full name of the customer. Learn more

Returns an array of all orders placed by the customer. Learn more

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

\#1088
\#1089
\#1090

Returns the total number of orders a customer has placed. Learn more

Returns the phone number of the customer. Learn more

Returns the list of tags associated with the customer. Learn more

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

wholesale regular-customer VIP

Returns whether or not the customer is exempt from taxes. Learn more

Returns the total amount spent on all orders. Learn more

Returns the position of the baseline within the em box (measured from the bottom). Learn more

{{ settings.heading_font.baseline_ratio }}

0.091

Returns the suggested fallback font families. Learn more

{{ settings.heading_font.fallback_families }}

sans-serif

Returns the font's name. Learn more

{{ settings.heading_font.family }}

"Neue Haas Unica"

Returns the selected font style. Learn more

{{ settings.heading_font.style }}

normal

Returns the selected font weight. Learn more

{{ settings.heading_font.weight }}

400

Returns all of the variants within the font's family. Each of the variants is also a font object. Learn more

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

Returns the amount of money remaining on the gift card. Learn more

Returns the code that was used to redeem the gift card. Learn more

Returns the currency that the card was issued in. Learn more

Returns the customer variable of the customer that the gift card is assigned to. Learn more

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

Hey, Brian!

Returns true if the card is enabled, or false if the card is disabled. Learn more

Returns true if the card is expired, or false if the card is not. Learn more

Returns the expiration date of the gift card. Learn more

Returns the initial amount of money on the gift card. Learn more

Returns the product associated with the purchased gift card, or returns nothing if there is no associated product. Learn more

Returns the line item properties assigned to the gift card when it was added to the cart. Learn more

Returns the unique URL that links to the gift card’s page on the shop (rendered through gift_card.liquid). Learn more

Returns the handle of the linklist. Learn more

Returns the number of nested levels that a linklist contains.
Learn more

Given the following menu structure:

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

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

Main Menu: 3

Returns an array of links in the linklist. Learn more

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

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

Returns the title of the linklist. Learn more

Returns the author of a page. Learn more

Returns the content of a page. Learn more

Returns the handle of a page. Learn more

Returns the id of a page. Learn more

Returns the timestamp of when the page was created. Use the date filter to format the timestamp. Learn more

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

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

contact

Returns the title of a page. Learn more

Returns the relative URL of a page. Learn more

{{ page.url }}

/pages/about-us

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

Returns the number of product recommendations, or returns 0 if recommendations.performed is false. Learn more

Returns product recommendations. These objects are products. Doesn't return any product if recommendations.performed is false. Learn more

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

Returns the script's ID. Learn more

Returns the script's name. Learn more

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

Returns the locale endonym name. Learn more

{{ shop_locale.endonym_name }}

français canadien

Returns the locale code. Learn more

{{ shop_locale.iso_code }}

fr-CA

Returns the locale name. Learn more

{{ shop_locale.name }}

Canadian French

Returns whether or not this is the shop's primary locale. Learn more

Returns the root relative URL of the locale. Learn more

Returns the theme’s id. This is useful for when you want to link a user directly to the theme’s Customize theme page. Learn more

Returns one of the two possible roles of a theme: main or mobile. Learn more

Returns the name of the theme. Learn more

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

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

Numbers include floats and integers. Learn more

{% assign my_num = 25 %}

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

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

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

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

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

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

Repeatedly executes a block of code. Learn more

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

hat shirt pants

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

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

This collection is empty.

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

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

1 2 3

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

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

1 2 3 5

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

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

one
two
three
one

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

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

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

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

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

apples, oranges, brocolli, carrots

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

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

tag1, tag2, tag3

Returns the first element of an array. Learn more

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

sale

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

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

womens

Gets the last element in an array. Learn more

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

awesome

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

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

SpringSummer

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

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

d, c, b, a

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

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

30

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

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

A B a b

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

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

orange apple banana

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

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

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

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

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

Kitchen products:
- Spatula
- Garlic press

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

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

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

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

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

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

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

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

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

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

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

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

Generates an appropriate tag for the media. Learn more

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

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

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

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

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

Generates a video tag. Learn more

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

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

Returns the asset URL of an image in the ‘assets’ folder of a theme. Learn more

{{ 'logo.png' | asset_img_url: '300x' }}

//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/logo_300x.png?28253

Returns the URL of a file in the ‘assets’ folder of a theme. Learn more

{{ 'shop.css' | asset_url }}

//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253

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

{{ 'logo.png' | file_img_url: '300x' }}

//cdn.shopify.com/s/files/1/0087/0462/files/logo_300x.png?28261

Returns the URL of a file in the Files page of the admin. Learn more

{{ 'size-chart.pdf' | file_url }}

//cdn.shopify.com/s/files/1/0087/0462/files/size-chart.pdf?28261

Generates a link to the customer login page. Learn more

{{ 'Log in' | customer_login_link }}

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

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

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

<script src="//cdn.shopify.com/s/global/prototype.js?1" type="text/javascript"></script>

Returns the URL of an image. Accepts an image size as a parameter. Learn more

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

Generates an HTML link. The first parameter is the URL of the link, and the optional second parameter is the title of the link. Learn more

{{ 'shopify' | link_to: 'https://www.shopify.com', 'A link to Shopify' }}

<a href="https://www.shopify.com" title="A link to Shopify">Shopify</a>

Creates an HTML link to a collection page that lists all products belonging to a vendor. Learn more

{{ "Shopify" | link_to_vendor }}

<a href="/collections/vendors?q=Shopify" title="Shopify">Shopify</a>

Creates an HTML link to a collection page that lists all products belonging to a product type. Learn more

{{ "jeans" | link_to_type }}

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

Creates a link to all products in a collection that have a given tag. Learn more

<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
{% for tag in collection.tags %}
  {{ tag | link_to_tag: tag }}
{% endfor %}

<a title="Show products matching tag Mens" href="/collections/frontpage/mens">Mens</a>
<a title="Show products matching tag Womens" href="/collections/frontpage/womens">Womens</a>
<a title="Show products matching tag Sale" href="/collections/frontpage/sale">Sale</a>

Creates a link to all products in a collection that have a given tag as well as any tags that have been already selected. Learn more

<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
{% for tag in collection.tags %}
  {{ tag | link_to_add_tag: tag }}
{% endfor %}

<!-- If you're on "/collections/frontpage/mens": -->
<a title="Show products matching tag Mens" href="/collections/frontpage/mens">Mens</a>
<a title="Show products matching tag Womens" href="/collections/frontpage/womens+mens">Womens</a>
<a title="Show products matching tag Sale" href="/collections/frontpage/sale+mens">Sale</a>

Generates a link to all products in a collection that have the given tag and all the previous tags that might have been added already. Learn more

<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
{% for tag in collection.tags %}
  {{ tag | link_to_add_tag: tag }}
{% endfor %}

<!-- If you're on "/collections/frontpage/mens": -->
<a title="Remove tag Mens" href="/collections/frontpage">Mens</a>
<a title="Remove tag Womens" href="/collections/frontpage/mens">Womens</a>
<a title="Remove tag Sale" href="/collections/frontpage/mens">Sale</a>

Returns the URL of the payment type’s SVG image. Used in conjunction with the shop.enabled_payment_types variable. Learn more

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

Returns the URL of a global assets that are found on Shopify’s servers. Learn more

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

<script src="//cdn.shopify.com/s/shopify/option_selection.js?20cf2ffc74856c1f49a46f6e0abc4acf6ae5bb34" type="text/javascript"></script>

Creates a URL to a collection page with the provided sort_by parameter. This filter must be applied to a collection URL. Learn more

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

/collections/widgets?sort_by=best-selling

Creates a URL that links to a collection page containing products with a specific product type. Learn more

{{ "T-shirt" | url_for_type }}

collections/types?q=T-shirt

Creates a URL that links to a collection page containing products with a specific product vendor. Learn more

{{ "Shopify" | url_for_vendor }}

/collections/vendors?q=Shopify

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

<a href="{{ product.url | within: collection }}">{{ product.title }}</a>

<a href="/collections/frontpage/products/alien-poster">Alien Poster</a>

Returns a unique ID dynamically generated by Shopify. Learn more

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

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

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

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

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

24 total products in this collection

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

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

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

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

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

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

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

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

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

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

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

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

Returns the description of the collection. Learn more

Returns the handle of a collection. Learn more

Returns the id of a collection. Learn more

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

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

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

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

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

Returns the number of products in a collection. Learn more

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

24 Items

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

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

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

Sort by: best-selling

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

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

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

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

{{ collection.template_suffix }}

no-price

Returns the title of the collection. Learn more

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

Frontpage

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

Returns the URL of the collection. Learn more

Returns the name of the currency (for example United States dollars or Euro). Learn more

Returns the ISO code of the currency (for example USD or EUR). Learn more

Returns the currency's symbol (for example, $ or €). Learn more

Returns the id of the discount. Learn more

Returns the title or discount code of the discount. Learn more

{{ discount.title }}

SPRING14

Returns the title or discount code of the discount. Same as discount.title. Learn more

Returns the amount of the discount. Use one of the money filters to return the value in a monetary format. Learn more

{{ discount.amount | money }}

$25

Returns the total amount of the discount if it has been applied to multiple line items. Use a money filter to return the value in a monetary format. Learn more

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

{{ discount.savings | money }}

$-25

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

Returns the type of the discount. Learn more

Returns true if it’s the first iteration of the for loop. Returns false if it is not the first iteration. Learn more

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

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

Returns the current index of the for loop, starting at 1. Learn more

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

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

Returns the current index of the for loop, starting at 0. Learn more

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

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

Returns true if it’s the last iteration of the for loop. Returns false if it is not the last iteration. Learn more

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

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

Returns forloop.index in reverse order. Learn more

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

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

Returns forloop.index0 in reverse order. Learn more

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

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

Returns the number of iterations of the for loop. Learn more

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

{{ length }}

10

Returns the alt tag of the image, set in the Products page of the Admin. Learn more

Returns the aspect ratio (width / height) of the image. Learn more

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

Returns the height of the image in pixels. Learn more

Returns the id of the image. Learn more

Returns the position of the image, starting at 1. This is the same as outputting forloop.index. Learn more

Returns the id of the image's product. Learn more

Returns the relative path of the product image. This is the same as outputting {{ image }}. Learn more

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

products/my_image.jpg
products/my_image.jpg

Returns an array of attributes for the variant that the image is associated with. Learn more

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

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

Returns the width of the image in pixels. Learn more

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

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

Returns the number of the current page. Learn more

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). Learn more

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

Returns an array of all parts of the pagination. A part is a component used to build the navigation for the pagination. Learn more

Returns the part variable for the Next link in the pagination navigation. Learn more

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

Returns the part variable for the Previous link in the pagination navigation. Learn more

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

Returns the number of items displayed per page. Learn more

Returns the number of pages created by the pagination tag. Learn more

You can use request.host to check which domain a customer is visiting from. Learn more

{{ request.host }}

your-store.myshopify.com

Returns the shop_locale of the current request. Learn more

{{ request.locale.name }}

English

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

{{ request.page_type }}

collection

Returns the path to the current page. Learn more

{{ request.path }}

/collections/classics/products/chambray-shirt

Returns an array of the section's blocks. Learn more

For static sections, returns the section's file name without .liquid. For dynamic sections, returns a dynamically generated ID. Learn more

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

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

Returns the number of iterations of the tablerow loop. Learn more

Returns the current index of the tablerow loop, starting at 1. Learn more

Returns the current index of the tablerow loop, starting at 0. Learn more

Returns tablerow.index in reverse order. Learn more

Returns tablerow.index0 in reverse order. Learn more

Returns true if it’s the first iteration of the tablerow loop. Returns false if it is not the first iteration. Learn more

Returns true if it’s the last iteration of the tablerow loop. Returns false if it is not the last iteration. Learn more

Returns the index of the current row, starting at 1. Learn more

Returns the index of the current row, starting at 0. Learn more

Returns true if the current column is the first column in a row. Returns false if it is not. Learn more

Returns true if the current column is the last column in a row. Returns false if it is not. Learn more

Returns a unique numeric identifier for the transaction. Learn more

Returns the amount of the transaction. Use one of the money filters to return the value in a monetary format. Learn more

Returns the name of the transaction. Learn more

{{ transaction.name }}

c251556901.1

Returns the status of the transaction. Learn more

Returns the translated output of a transaction’s status. Learn more

Returns the timestamp of when the transaction was created. Use the date filter to format the timestamp. Learn more

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

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.

Returns the name of the payment gateway used for the transaction. Learn more

{{ transaction.gateway }}

Cash on Delivery (COD)

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

{{ transaction.payment_details.credit_card_company }}: {{ transaction.payment_details.credit_card_number }}

Visa: •••• •••• •••• 1234

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

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

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

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

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

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

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

Creates an HTML <form> element with all the necessary attributes (action, id, etc.) and <input> to submit the form successfully. Learn more

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

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

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

Allows output of Liquid code on a page without being parsed. Learn more

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

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

Renders a snippet from the snippets folder of a theme.

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

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

{% section 'footer' %}

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

The Liquid {% style %} tag renders an HTML <style> tag with a Shopify data attribute. Learn more

{% style %}
  .section-header {
    color: #dddddd;
  }
{% endstyle %}

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

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

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

129

Calculates the perceived brightness of the given color. Learn more

{{ '#7ab55c' | color_brightness }}

153.21

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

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

7.4

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

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

#355325

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

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

#869180

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

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

528

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

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

122

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

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

#d0e5c5

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

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

#bdbb94

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

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

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

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

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

#6ed938

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

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

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

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

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

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

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

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

#7ab55c
#7ab55c

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

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

24
1.23

Limits a number to a minimum value. Learn more

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

5
2

Limits a number to a maximum value. Learn more

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

2
1

Rounds an output up to the nearest integer. Learn more

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

5
5

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

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

20

Rounds an output down to the nearest integer. Learn more

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

4
4

Subtracts a number from an input. Learn more

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

185

Adds a number to an output. Learn more

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

215

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

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

5
4
4.56

Multiplies an output by a number. Learn more

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

230

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

{{ 12 | modulo:5 }}

2

Returns a list of all the products in your store. You can use all_products to access products by their handles. Learn more

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

Fancy Shoes

Returns a list of all the blog articles in a store. Learn more

{% assign article = articles['news/new-products'] %}
{{ article.title | link_to: article.url }}

<a href="/news/new-products">New products</a>

Returns a list of all the blogs in a store. Learn more

{% for blog in blogs %}
  {{ blog.title }}
{% endfor %}

News
Product updates
Events

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

{{ canonical_url }}

Returns a list of all of the collections in a store. Learn more

{% for collection in collections %}
  {{ collection.title }}
{% endfor %}

Fall collection
Best sellers
New products

current_page returns the number of the page you are on when browsing through paginated content. It can be used outside the paginate block. Learn more

{{ page_title }} - Page: {{ current_page }}

Summer Collection - Page: 1

Returns the handle of the page that is being viewed. Learn more

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

Allows you to access any image in a store by its filename. Learn more

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

Returns a list of all the menus (link lists) in your store. You can use linklists to access your link lists with their handles. Learn more

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

Returns the description of the product, collection, or page that is being viewed. You can set descriptions in the Shopify admin. Learn more

{{ page_description }}

All about my store.

Returns the title of the product, collection, or page that is being viewed. You can set titles in the Shopify admin. Learn more

{{ page_title }}

About us

Returns a list of all the pages in your store. You can use pages to access your pages with their handles. Learn more

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

Returns information about the domain used to access the store. Use request.host to check which domain a customer is visiting from. Learn more

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

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

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

Returns a list of the settings in your published theme. Learn more

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

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

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

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

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

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

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

Returns the handle of the blog. Learn more

Returns the id of the blog. Learn more

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

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

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

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

Returns the title of the blog. Learn more

Returns the relative URL of the blog. Learn more

Returns the timestamp of when the comment was submitted.

Use the date filter to convert the timestamp into a more readable format. Learn more

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

Feb 26, 2019

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

Returns the author of the comment. Learn more

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

Returns the content of the comment. Learn more

Returns the status of the comment. Learn more

Returns the timestamp of when the comment's status was last changed. For example, the timestamp of when a comment was approved by the article's author.

Use the date filter to convert the timestamp into a more readable format. Learn more

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

Mar 13, 2019

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

Inside collection.liquid, current_tags contains all product tags that are used to filter a collection. Learn more

Inside blog.liquid, current_tags contains all article tags that are used to filter the blog. Learn more

The discounted amount on a line item by a particular discount. Learn more

The discount application that allocates the amount on the line item. Learn more

Returns the first address line associated with the address. Exclusive to form tags with the "address" parameter. Learn more

Returns the second address line associated with the address, if it exists. Exclusive to form tags with the "address" parameter. Learn more

Returns the name of the author of the blog article comment. Exclusive to form tags with the "article" parameter. Learn more

Returns the content of the blog article comment. Exclusive to form tags with the "article" parameter. Learn more

Returns the city associated with the address. Exclusive to form tags with the "address" parameter. Learn more

Returns the company name associated with the address, if it exists. Exclusive to form tags with the "address" parameter. Learn more

Returns the country associated with the address. Exclusive to form tags with the "address" parameter. Learn more

Returns the email address of the blog article comment’s author. Exclusive to form tags with the "article" parameter. Learn more

Returns the country associated with the address. Exclusive to form tags with the "address" parameter. Learn more

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

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

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

Returns the first name associated with the address. Exclusive to form tags with the "address" parameter. Learn more

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

Returns the last name associated with the address. Exclusive to form tags with the "address" parameter. Learn more

Used only for form tags with the "customer_login" parameter. The form.password_needed attribute always returns true. Learn more

Returns the telephone number associated with the address, if it exists. Exclusive to form tags with the "address" parameter. Learn more

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

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

Returns the province or state associated with the address. Exclusive to form tags with the "address" parameter. Learn more

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

San Francisco, California

Renders an HTML checkbox that can submit the current form as the customer's default address. Exclusive to form tags with the "address" parameter. Learn more

{{ form.set_as_default_checkbox }}

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

Returns the zip code or postal code associated with the address. Exclusive to form tags with the "address" parameter. Learn more

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

Returns the combined price of all the items in the line item. This is equal to line_item.final_price times line_item.quantity. Learn more

Returns the price of the line item including all line level discount amounts. Learn more

Returns the fulfillment of the line item. Learn more

Returns the fulfillment service associated with the line item's variant. Line items that have no fulfillment service will return manual. Learn more

Returns true if the line item's product is a gift card, or false if it is not. Learn more

Returns the weight of the line item. Use the weight_with_unit filter to format the weight. Learn more

Returns a unique identifier for each item in the cart. Learn more

Returns the line item image. Learn more

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

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

Returns the combined price of all the items in the line_item. This is the equivalent of line_item.price times line_item.quantity. Learn more

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

Returns the original price of the line item before discounts were applied. Learn more

Returns the original price of the line item before discounts were applied. Learn more

Returns the price of the line item’s variant. Learn more

Returns the product of the line item. Learn more

Returns the id of the line item’s product. Learn more

Returns an array of custom information for an item that has been added to the cart. Learn more

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

Monogram: My dog is the cutest
Gift wrap: Yes

Returns the quantity of the line item. Learn more

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

Returns the SKU of the line item’s variant. Learn more

Returns the successfully fulfilled quantity of the line item. Learn more

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

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

{{ line_item.title }}

Balloon Shirt - Medium

Returns the URL to the product page using variant deep-linking. Learn more

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

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

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

Returns the variant of the line item. Learn more

Returns the id of the line item’s variant. Learn more

Returns the vendor name of the line item’s product. Learn more

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

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

Returns the billing address of the order. Learn more

Returns true if an order is canceled, returns false if it is not. Learn more

Returns the timestamp of when an order was canceled. Use the date filter to format the timestamp. Learn more

Returns one of the following cancellation reasons, if an order was canceled:
items unavailable
fraudulent order
customer changed/cancelled order
other Learn more

Returns the translated output of an order’s order.cancel_reason Learn more

English: {{ order.cancel_reason }}
French: {{ order.cancel_reason_label }}

English: Items unavailable
French: Produits indisponibles

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

Returns the customer associated with the order. Learn more