Variables

A variable is a placeholder for information that you want to show in a snippet, such as an inventory quantity, SKU number, or metafield value.

When the snippet shows on a page, the variable outputs the value it represents.

For example, suppose you have a snippet with the content:

Only {{ variant.inventory_quantity }} left in stock!

The {{ variant.inventory_quantity }} text is a variable that outputs the inventory quantity of the selected variant on the product page, like this:

Only 7 left in stock!

Variable outputs update automatically when a variant is selected

For example, suppose you have a product with two variants, and each variant has a different inventory quantity.

When a variant is selected on the product page, the inventory quantity that's shown on the page updates automatically without a page refresh.

You can use variables anywhere in the snippet content, and you can use multiple variables in a snippet.

Conditions and variables work together

You can show the entire snippet only when certain conditions are met, such as when the inventory quantity is less than 10, and then use variables in the snipppet content to show values, such as the inventory quantity.

You can modify the output of a variable by directly altering it with a filter.

On this page

Syntax

Variables are written using Shopify's Liquid output syntax, which is text inside of double curly braces, like this:

{{ product.title }}

The text inside of the curly braces can be almost any Liquid object or property reference.

Variables are written using Shopify's Liquid output syntax, but they are not Liquid code.

Liquid code can not be used in snippets, so logic and control flow tags written with curly brace percentage delimiters {% %} will not work.

The output of a Liquid object or property reference should be either a string or an array of strings.

If the output is an array of strings, you can use filters to format the array.

For example, you can format an array of the collections that the product belongs to as a single string of comma-separated collection titles like this:

{{ product.collections | map: 'title' | join: ', ' }}

Filters

Filters are used to modify the output of variables. To apply filters to an output, add the filter and any filter parameters within the variable's curly brace delimiters, preceded by a pipe character, like this:

{{ product.title | capitalize }}

Multiple filters can be used on one output. They're parsed from left to right.

You can apply the following filters to an output:

append

string

{{ string | append: string }}

Adds a given string to the end of a string.

Learn more
capitalize

string

{{ string | capitalize }}

Capitalizes the first word in a string and downcases the remaining characters.

Learn more
compact

array

{{ array | compact }}

Removes any nil items from an array.

Learn more
date

string

{{ string | date: string }}

Converts a timestamp into another date format. The date filter accepts the same parameters as Ruby's strftime method for formatting the date. For a list of shorthand formats, refer to the Ruby documentation or strftime reference and sandbox.

The current date

You can apply the date filter to the keywords 'now' and 'today' to output the current timestamp.

Learn more
default

variable

{{ variable | default: variable }}

Sets a default value for any variable whose value is empty, false, or nil.

allow_false

{{ variable | default: variable, allow_false: boolean }}

By default, the default filter's value will be used in place of false values. You can use the allow_false parameter to allow variables to return false instead of the default value.

Learn more
divided_by

number

{{ number | divided_by: number }}

Divides a number by a given number. The divided_by filter produces a result of the same type as the divisor. This means if you divide by an integer, the result will be an integer, and if you divide by a float, the result will be a float.

Learn more
downcase

string

{{ string | downcase }}

Converts a string to all lowercase characters.

Learn more
escape

string

{{ string | escape }}

Escapes special characters in HTML, such as <>, ', and &, and converts characters into escape sequences. The filter doesn't effect characters within the string that don't have a corresponding escape sequence.

Learn more
join

array

{{ array | join }}

Combines all of the items in an array into a single string, separated by a space.

Custom separator

{{ array | join: string }}

You can specify a custom separator for the joined items.

Learn more
json

array | object | string

{{ variable | json }}

Converts an array, oject, or string into JSON format.

Learn more
link_to_tag

string

{{ string | link_to_tag }}

Generates an HTML <a> tag with an href attribute linking to the current collection, filtered to show only products that have the given tag.

Learn more
map

array

{{ array | map: string }}

Creates an array of values from a specific property of the items in an array.

Learn more
metafield_tag

metafield

{{ metafield | metafield_tag }}

Generates an HTML element to host the metafield data. The type of element that's generated differs depending on the type of metafield.

Note

The metafield_tag filter doesn't support list metafields other than list.single_line_text_field.

Learn more
metafield_text

metafield

{{ metafield | metafield_text }}

Generates a text version of the metafield data.

Learn more
minus

number

{{ number | minus: number }}

Subtracts a given number from another number.

Learn more
money

number

{{ number | money }}

Formats a given price based on the store's HTML without currency setting.

Learn more
money_with_currency

number

{{ number | money_with_currency }}

Formats a given price based on the store's HTML without currency setting, with the currency symbol.

Learn more
money_without_currency

number

{{ number | money_without_currency }}

Formats a given price based on the store's HTML without currency setting, without the currency symbol.

Learn more
money_without_trailing_zeroes

number

{{ number | money_without_trailing_zeroes }}

Formats a given price based on the store's HTML without currency setting, excluding the decimal separator (either . or ,) and trailing zeros. If the price has a non-zero decimal value, then the output is the same as the money filter.

Learn more
plus

number

{{ number | plus: number }}

Adds two numbers.

Learn more
prepend

string

{{ string | prepend: string }}

Adds a given string to the beginning of a string.

Learn more
replace

string

{{ string | replace: string, string }}

Replaces any instance of a substring inside a string with a given string.

Learn more
replace_first

string

{{ string | replace_first: string, string }}

Replaces the first instance of a substring inside a string with a given string.

Learn more
replace_last

string

{{ string | replace_last: string, string }}

Replaces the last instance of a substring inside a string with a given string.

Learn more
round

number

{{ number | round }}

Rounds a number to the nearest integer.

Learn more
size

array

{{ array | size }}

Returns the number of items in the array.

Learn more
slice

array | string

{{ variable | slice }}

Returns a substring or series of array items, starting at a given 0-based index. By default, the substring has a length of one character, and the array series has one array item. However, you can provide a second parameter to specify the number of characters or array items.

Negative index

You can supply a negative index which will count from the end of the string or array.

Learn more
sort

array

{{ array | sort }}

Sorts the items in an array in case-sensitive alphabetical, or numerical, order.

Learn more
sort_natural

array

{{ array | sort_natural }}

Sorts the items in an array in case-insensitive alphabetical order.

Learn more
split

string

{{ string | split: string }}

Splits a string into an array of substrings based on a given separator.

Learn more
strip_html

string

{{ string | strip_html }}

Strips all HTML tags from a string.

Learn more
times

number

{{ number | times: number }}

Multiplies a number by a given number.

Learn more
truncate

string

{{ string | truncate: number }}

Truncates a string down to a given number of characters. If the specified number of characters is less than the length of the string, then an ellipsis (...) is appended to the truncated string. The ellipsis is included in the character count of the truncated string.

Specify a custom ellipsis

{{ string | truncate: number, string }}

You can provide a second parameter to specify a custom ellipsis. If you don't want an ellipsis, then you can supply an empty string.

Learn more
truncate_words

string

{{ string | truncate_words: number }}

Truncates a string down to a given number of words. If the specified number of words is less than the number of words in the string, then an ellipsis (...) is appended to the truncated string.

Specify a custom ellipsis

{{ string | truncate_words: number, string }}

You can provide a second parameter to specify a custom ellipsis. If you don't want an ellipsis, then you can supply an empty string.

Caution

HTML tags are treated as words, so you should strip any HTML from truncated content. If you don't strip HTML, then closing HTML tags can be removed, which can result in unexpected behavior.

Learn more
uniq

array

{{ array | uniq }}

Removes any duplicate items in an array.

Learn more
upcase

string

{{ string | upcase }}

Converts a string to all uppercase characters.

Learn more
weight_with_unit

number

{{ number | weight_with_unit }}

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

Override the default unit

{{ number | weight_with_unit: variable }}

You can specify a unit to override the default from the general settings.

Learn more
where

array

{{ array | where: string, string }}

Filters an array to include only items with a specific property value. This requires you to provide both the property name and the associated value.

Filter for boolean properties with a true value

You can filter for items that have a true value for a boolean property. This requires you to provide only the property name.

Learn more

The Format Filter

{{ variable | format: '{value}' }}

The format filter formats the variable output based on a given string, usually HTML.

The following placeholders output values in the string:

  • {value} — Outputs the value of the variable.
  • {handle} — Outputs the handle of the variable.

For example, you can output the product title in an HTML <strong> element like this:

{{ product.title | format: '<strong>{value}</strong>' }}

To use HTML in the format string, you need to set the snippet Type to HTML.

Arrays

When applied to an array, the format filter formats and outputs each array item based on the given string.

For example, you can show a list of the tags of the product like this:

<ul>
  {{ product.tags | format: '<li>{value}</li>' }}
</ul>

And you can show a list of the tags of the product, which each tag name being a clickable link to the tag filter, like this:

<ul>
  {{ product.tags | format: '<li><a href="/collections/all/{handle}">{value}</a></li>' }}
</ul>

Objects

When applied to an object (or an array of objects), the format filter provides access to the object properties.

The {property} placehoder, where property is the name of an object property, outputs the value of the property in the string.

For example, you can show a list of the collections that the product belongs to, with each collection title being a clickable link to the collection, like this:

<ul>
  {{ product.collections | format: '<li><a href="{url}">{title}</a></li>' }}
</ul>

In the above example, {{ product.collections }} returns an array of collection objects.

The format filter formats and outputs each object based on the given string, and the {title} and {url} placeholders output the value of each object's title and url properties, respectively.

Examples

Product information

For a complete list of product properties, see Shopify's product object reference.

The title of the product:

{{ product.title }}

The type of the product:

{{ product.type }}

The vendor of the product:

{{ product.vendor }}

The number of variants of the product:

{{ product.variants | size }}

The lowest price of any variants of the product, formatted as money:

{{ product.price | money }}

The compare at price of the product, formatted as money with currency:

{{ product.compare_at_price | money_with_currency }}

The availability of the product, formatted as 'Available' or 'Unavailable':

{{ product.available | replace: 'true', 'Available' | replace: 'false', 'Unavailable' }}

A comma-separated list of the option names of the product (eg 'Size, Color, Material'):

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

A list of the collections the product belongs to:

<ul>
  {{ product.collections | format: '<li><a href="{url}">{title}</a></li>' }}
</ul>

The value of the custom.color metafield applied to the product:

{{ product.metafields.custom.color | metafield_tag }}

Variant information

For a complete list of product variant properties, see Shopify's variant object reference.

The title of the variant:

{{ variant.title }}

The SKU of the variant:

{{ variant.sku }}

The weight of the variant, formatted as weight with unit:

{{ variant.weight | weight_with_unit }}

The price of the variant, formatted as money:

{{ variant.price | money }}

The compare at price of the variant, formatted as money with currency:

{{ variant.compare_at_price | money_with_currency }}

The availability of the variant, formatted as 'Available' or 'Unavailable':

{{ variant.available | replace: 'true', 'Available' | replace: 'false', 'Unavailable' }}

The value of the variant for the first product option (eg 'Medium'):

{{ variant.option1 }}

The value of the variant for the second product option (eg 'Black'):

{{ variant.option2 }}

The value of the variant for the third product option (eg 'Rubber'):

{{ variant.option3 }}

The arrival date for the next incoming inventory of the variant, formatted with a custom date format (eg 'January 01, 2024'):

{{ variant.next_incoming_date | date: '%B %d, %Y' }}

The value of the custom.description metafield applied to the variant:

{{ variant.metafields.custom.description | metafield_tag }}

Still need help? Contact Us Contact Us