Output tags


An output tag looks like this: {{ output }}, and it displays the liquid statement that is found between its curly braces.

For example, if we wanted to display our shop's name, we would use the following:

{{ shop.name }}

Filters

Filters manipulate output tags. For example, if you want to show a customer a price of $99.00 and use the template variable {{ product.price }}, Shopify will display the price as 9900 (in cents). We need to use a filter to manipulate the output and display a formatted price. We need to use the filter money like so: {{ product.price | money }}, which will return this: $99.00 USD.

The syntax for a filter looks like this:

{{ variablename | filtername }}

Filter types available to you are:

HTML Filters

HTML filters available to you are:

img_tag

Generates an image tag.

{{ 'image-name.gif' | asset_url | img_tag }}

(Return to top of page)

script_tag

Generates a script tag.

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

(Return to top of page)

stylesheet_tag

Generates a stylesheet tag.

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

(Return to top of page)

Math filters

Math filters available to you are:

divided_by (input, operand)

Divides input by operand.

You save {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price }}%

(Return to top of page)

minus (input, operand)

Subtracts input from operand.

You save {{ product.compare_at_price | minus: product.price | money }}!

(Return to top of page)

plus (input, operand)

Adds input to operand.

Showing {{ paginate.current_offset }}-{{ paginate.current_offset | plus: paginate.page_size }} items.

(Return to top of page)

times (input, operand)

Multiplies input by operand.

You save {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price }}%}

(Return to top of page)

modulo (input, operand)

Divides the input by the operand and returns the remainder.

{{ 12 | modulo:5 }} //output: 2

(Return to top of page)

Manipulation filters

Manipulation filters available to you are:

append (input)

Use this filter to append characters to a string.

Input

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

Output

sales.jpg

(Return to top of page)

camelize

Converts text into CamelCase.

Input

{{ 'coming-soon' | camelcase }}

Ouptut

ComingSoon

(Return to top of page)

capitalize

Capitalizes the first word.

Input

{{ 'capitalize me' | capitalize }}

Output

Capitalize me

(Return to top of page)

date (input, format)

Changes the date format.

%a
Abbreviated weekday ("Sun").
%A
Full weekday name ("Sunday").
%b
The abbreviated month name ("Jan").
%B
The full month name ("January").
%c
The preferred local date and time representation.
%d
Day of the month, zero padded (01.31).
%-d
Day of the month, not padded (1.31).
%e
Day of the month, blank-padded ( 1.31).
%H
Hour of the day, 24-hour clock (00.23).
%I
Hour of the day, 12-hour clock (1:12).
%j
Day of the year (001.366).
%K
Hour of the day, 24-hour clock (1:12).
%m
Month of the year (01.12).
%M
Minute of the hour (00.59).
%p
Meridian indicator (AM/PM).
%S
Second of the minute (00.60).
%U
The number of the week in the current year, starting with the first Sunday as the first day of the first week.
%W
The number of the week in the current year, starting with the first Monday as the first day of the first week.
%w
Day of the week (Sunday is 0, so 0...6).
%x
Preferred representation for the date alone, no time.
%X
Preferred representation for the time alone, no date.
%y
Year without a century (00.99).
%Y
Year with a century.
%Z
Time zone name.
%%
Literal % character.
Combinations

%c - date and time (%a %b %e %T %Y)


%D - Date (%m/%d/%y)


%F - The ISO 8601 date format (%Y-%m-%d)


%r - 12-hour time (%I:%M:%S %p)


%R - 24-hour time (%H:%M)


%T - 24-hour time (%H:%M:%S)

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

(Return to top of page)

default(input, value)

If input is empty, default returns value, otherwise, the input. Can be used with strings, arrays, and hashes. Example:

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

returns "Dear customer" if we don't know the name, but "Dear John" if we do.

(Return to top of page)

default_pagination

Use in conjunction with the paginate liquid tag.

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

(Return to top of page)

downcase

Converts text into lowercase.

Input

{{ 'UPPERCASE' | downcase }}

Ouput

uppercase

(Return to top of page)

escape

Escapes a string.

{{ product.title | escape }}

(Return to top of page)

first

Gets the first element passed through an array.

{{ product.images | first }}

(Return to top of page)

handle (or handleize)

Strips special characters (%@#$...etc) out of a string.

Input

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

Ouput

100-m-ms

(Return to top of page)

highight_active_tag

Creates a span with the active class around a tag if that tag is active.

{% for tag in collection.tags %}
{{ tag | highlight_active | link_to_tag: tag }}
{% endfor %}

(Return to top of page)

join (input, segmenter = '')

Joins an array with a specified character (e.g. ',').

Input

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

Output

tag1, tag2, tag3

(Return to top of page)

json (input)

The Rich Text Editor adds “carriage returns” to content, so the strip_newlines filter is not good enough of a tool to dump your content into a JavaScript variable. The strip_newlines filter only removes newlines characters, not carriage returns.

Shopify has another filter perfectly suited for the job. It's the json filter.

If you use the following, you will very likely get a "unterminated string literal" JavaScript error — and that's the least of your concerns as you must worry also about there being a double quote in the content of the page:

var content = "{{ pages.page-handle.content }}";

Here's how you use the json to do the job the right way:

var content = {{ pages.page-handle.content | json }};

Do not wrap your Liquid output tag with quotes. The json filter already takes care of that for you. Also, the json filter will escape quotes as needed inside the content. This is a fool-proof solution. It is using the json filter for its entended purpose.

The json filter is also used to dump Liquid objects into JavaScript variables:

var json_product = {{ collections.featured.products.first | json }};
var json_cart = {{ cart | json }};

(Return to top of page)

last

Gets the last element passed in an array.

{{ product.images | last }}

(Return to top of page)

map

Can be called on arrays. Replaces each element by the given element's property. For example:

{% assign collection_titles = collections | map: 'title' %}
{{ collection_titles }}

Returns an array of collection titles then displays them.

(Return to top of page)

md5

Use this filter to compute the URL of an image hosted on Gravatar.

Example usage in article.liquid that will show the gravatar associated with the author of a comment:

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

By default, images are presented at 80px by 80px if no size parameter is supplied. You may request a specific image size, which will be dynamically delivered from Gravatar by using the s= or size= parameter and passing a single pixel dimension (since the images are square). Example:

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

Developer information on Gravatar service image requests: http://en.gravatar.com/site/implement/images Creating the Hash: http://en.gravatar.com/site/implement/hash

(Return to top of page)

newline_to_br

Inserts a <br /> linebreak tag in front of every \n line break character.

{{ settings.about_text | newline_to_br }}

(Return to top of page)

pluralize

Specifies the pluralized version of the word you need.

Input

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

Output

3 items

(Return to top of page)

prepend

Prepends characters to a string.

Input

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

Output

Made a great sale

(Return to top of page)

remove

Removes all occurences of the substring from the input.

{{ product.description | remove: 'way too expensive' }}

(Return to top of page)

remove_first

Removes only the first occurence of the substring from the input.

{{ product.description | remove_first: 'remove-me' }}

(Return to top of page)

replace

Replaces all occurences of a string with another.

{{ product.description | replace: 'super', 'mega' }}

(Return to top of page)

replace_first

Replaces the first occurence of a string with another.

{{ product.description | replace_first: 'super', 'mega' }}

(Return to top of page)

Reverses an array. Can be used for looping through a list backwards.

Example:

 {% for article in blog.articles %}
    {{ article.excerpt | reverse }}
 {% endfor %}

will display blog exceprts in reverse order.

(Return to top of page)

size

Returns the size of a string or an array.

Input

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

Output

30

(Return to top of page)

sort (input, property = nil)

Sort elements of the array provide optional property with which to sort an array of hashes or drops.

Example:

{% assign variants = product.variants | sort: 'price' %}
{% for variant in variants %}
  <li>{{ variant.title }} - {{ variant.price | money }}</li>
{% endfor %}

(Return to top of page)

split

Takes a string and divides it into substrings based on a delimiter.

{% assign words = "Uses cheat codes, calls the game boring." | split: ' ' %}
First word: {{ words.first }}
First word: {{ words[0] }}
Second word: {{ words[1] }}
Last word: {{ words.last }}
All words: {{ words | join: ', ' }}
{% for word in words %}
{{ word }}
{% endfor %}

Output

First word: Uses
First word: Uses
Second word: cheat
Last word: boring.
All words: Uses, cheat, codes,, calls, the, game, boring.
Uses
cheat
codes,
calls
the
game
boring.

(Return to top of page)

strip

Strips tabs, spaces, and newlines (all whitespace) from the left and right sides of strings. Example:

{{ '   too many spaces      ' | strip }}

Returns "too many spaces".

(Return to top of page)

lstrip

Strips tabs, spaces, and newlines (all whitespace) from the left side of strings. Example:

{{ '   too many spaces      ' | strip }}

Returns "too many spaces      ".

(Return to top of page)

rstrip

Strips tabs, spaces, and newlines (all whitespace) from the right side of strings. Example:

{{ '   too many spaces      ' | strip }}

Returns "   too many spaces".

(Return to top of page)

strip_html

Strips all HTML tags from the text.

{{ article.content | strip_html | truncate: 20 }}

(Return to top of page)

strip_newlines

Removes all of the newlines from the input.

{{ product.description | strip_newlines }}

(Return to top of page)

truncate (input, characters = x)

Truncates a string down to 'x' characters.

{{ article.content | strip_html | truncate: 50 }}

(Return to top of page)

truncatewords (input, words = x)

Truncates a string down to 'x' words.

{{ article.content | strip_html | truncatewords: 20 }}

(Return to top of page)

upcase

Converts a string to UPPER CASE.

Input

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

Output

I WANT THIS TO BE UPPERCASE

(Return to top of page)

weight_with_unit

Formats the product variant's weight.

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

(Return to top of page)

within

Adds /collections/collection-handle/ to a product URL, so that a product can be viewed within the scope of a collection.

Example:

{{ product.url | within: collection }}

For a discussion of the within filter please read How To Navigate Within A Collection.

Money filters

Money filters available to you are:

money

Formats the price using the store's money without currency format, as set in the shop settings. What's passed to this filter is almost always cents.

{{ 145 | money }}

Output

<!-- if your shop money format is ${{amount}} -->
$1.45
<!-- if your shop money format is €{{amount_no_decimals}} -->
€1

(Return to top of page)

money_with_currency

Wraps the amount with the currency symbol and the currency abbreviation (e.g. CAD).

{{ product.price | money_with_currency }}

(Return to top of page)

money_without_currency

Formats the price using a decimal.

{{ product.price | money_without_currency }}

(Return to top of page)

URL filters

URL filters available to you are:

asset_url

Returns the URL of an asset.

{{ 'shop.css' | asset_url }}

(Return to top of page)

files_url

Returns the URL of a file in the Files section.

{{ 'shop.pdf' | files_url }}

(Return to top of page)

collection_img_url

Generates the collection image URL.

{{ collection.image.src | collection_img_url: 'large' }}

(Return to top of page)

Syntax:

customer_login_link(text)

Example:

{{ 'Log in' | customer_login_link }}

This filter takes link text and generates a link to the customer login page.

(Return to top of page)

Generates an HTML link.

{{ 'Shopify' | link_to: 'http://shopify.com' }}

(Return to top of page)

Generates an HTML link to the vendor page of the product.

{{ "Shopify" | link_to_vendor }}

(Return to top of page)

Generates an HTML link to the type page of the product.

{{ "T-shirt" | link_to_type }}

(Return to top of page)

Generates a link to all products in a collection that have a given tag.

{% for tag in collection.tags %}
{{ tag | link_to_tag: tag }}
{% endfor %}

(Return to top of page)

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

{% for tag in collection.tags %}
{{ '+' | link_to_add_tag: tag }}
{{ tag }}
{% endfor %}

(Return to top of page)

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.

{% for tag in collection.tags %}
{{ '+' | link_to_add_tag: tag }}
{{ tag }}
{% endfor %}

(Return to top of page)

product_img_url

Generates the product image URL.

{{ product.featured_image | product_img_url }}

(Return to top of page)

shopify_asset_url

Returns the URL of a globally-hosted asset. Globally hosted assets are option_selection.js, api.jquery.js, shopify_common.js, customer_area.js, currencies.js, and customer.css.

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

(Return to top of page)

theme_url

Generates the theme URL.

{{ theme_role | theme_url }}

This filter outputs a URL that switches the active theme to the given role ("main" or "mobile"). This is the same URL used in the link generated by link_to_theme.

See also: themes, theme.

(Return to top of page)

url_escape(input)

URL-escapes the input, i.e., replaces all characters that are not allowed in URLs, with their escaped variants.

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

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

(Return to top of page)

url_param_escape(input)

Similar to url_escape, this filter also replaces the "&" character with "%26".

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

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

(Return to top of page)

url_for_product

Generates a URL for a product name by transforming it to a handle and adding the appropriate directory (/products/) in front of it to make the URL work. This won't fetch the actual handle of the product, which could have been edited to something else.

{{ "Red sportscar" | url_for_product }}

(Return to top of page)

url_for_type

Generates a URL for a product/collection type by transforming it to a handle and adding the appropriate directory in front of it to make the URL work.

{{ "T-shirt" | url_for_type }}

(Return to top of page)

url_for_vendor

Generates a URL for a vendor name by transforming it to a handle and adding the appropriate directory in front of it to make the URL work.

{{ "Shopify" | url_for_vendor }}

(Return to top of page)

Ready to put what you've learned into action?

Build an online store with Shopify Try it Free

Experience the future of retail now

Shopify Point of Sale Try it Free