HTML filters
HTML filters create HTML elements based on Liquid properties or a store's assets.
img_tag
Generates an image tag.
Input
{{ 'smirking_gnome.gif' | asset_url | img_tag }}
Output
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />
The img_tag
filter accepts parameters to output an alt tag, class names, and a size parameter:
- The first parameter is output as the alt text.
- The second parameter is the css class, or classes to be applied to the tag.
- The last parameter is the image size parameter.
Input
{{ 'smirking_gnome.gif' | asset_url | img_tag: 'Smirking Gnome', 'cssclass1 cssclass2' }}
Output
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="Smirking Gnome" class="cssclass1 cssclass2" />
The img_tag
filter can also be used on the following objects:
Input
{{ product | img_tag }}
{{ variant | img_tag: 'alternate text' }}
{{ line_item | img_tag: 'alternate text', 'css-class' }}
{{ image | img_tag: 'alternate text', 'css-class', 'small' }}
{{ collection | img_tag: 'alternate text', 'css-class', 'large' }}
Output
<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="Red Shirt Small" />
<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="alternate text" />
<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="alternate text" class="css-class" />
<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="alternate text" class="css-class" />
<img src="//cdn.shopify.com/s/files/1/0159/3350/products/shirts_collection_large.jpg?v=1338563745" alt="alternate text" class="css-class" />
currency_selector
Generates a drop-down list that customers can use to select an accepted currency on your storefront. This filter must be used on the form
object within a currency form.
Example
{% form 'currency' %}
{{ form | currency_selector: class: 'my_special_class', id: 'Submit' }}
{% endform %}
payment_button
Creates a dynamic checkout button for a product. This filter must be used on the form
object within a product form.
Input
{{ form | payment_button }}
Output
<div data-shopify="payment-button" class="shopify-payment-button">
...
</div>
script_tag
Generates a script tag.
Input
{{ 'shop.js' | asset_url | script_tag }}
Output
<script src="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.js?28178" type="text/javascript"></script>
stylesheet_tag
Generates a stylesheet tag.
Input
{{ 'shop.css' | asset_url | stylesheet_tag }}
Output
<link href="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28178" rel="stylesheet" type="text/css" media="all" />
time_tag
Converts a timestamp into a <time>
tag.
Input
{{ article.published_at | time_tag }}
Output
<time datetime="2018-12-31T18:00:00Z">Monday, December 31, 2018 at 1:00 pm -0500</time>
The time_tag
filter accepts the same parameters as Ruby's strftime
method. You can find a list of the shorthand formats in Ruby's documentation or use a site like strfti.me. These parameters do not affect the value of the datetime
attribute set in the <time>
tag.
Input
{{ article.published_at | time_tag: '%a, %b %d, %Y' }}
Output
<time datetime="2018-12-31T18:00:00Z">Mon, Dec 31, 2018</time>
format
You can pass a format
parameter to the time_tag
filter to output a date format for the storefront's language. The available formats are:
abbreviated_date
basic
date
date_at_time
default
on_date
Input
{{ article.published_at | time_tag: format: 'date' }}
Output
<time datetime="2018-12-31T18:00:00Z">December 31, 2018</time>
The following table provides a preview of what different format
options display for various languages.
format |
English | French | Japanese |
---|---|---|---|
abbreviated_date |
Dec 31, 2018 | 31 déc 2018 | 2018年12月31日 |
basic |
12/31/2018 | 31/12/2018 | 2018/12/31 |
date |
December 31, 2018 | 31 décembre 2018 | 2018年12月31日 |
date_at_time |
December 31, 2018 at 1:00 pm | 31 décembre 2018 à 13:00 | 2018年12月31日 13:00 |
default |
Monday, December 31, 2018 at 1:00 pm -0500 | lundi 31 décembre 2018 à 13:00 -0500 | 2018年12月31日(月曜日) 13:00 -0500 |
on_date |
on Dec 31, 2018 | le 31 déc 2018 | 2018年12月31日で |
datetime
You can pass a datetime
parameter with strftime shorthand formats to use a custom format for the datetime
attribute of the output <time>
tag.
Input
{{ article.published_at | time_tag: '%a, %b %d, %Y', datetime: '%Y-%m-%d' }}
Output
<time datetime="2016-02-24">Wed, 24 Feb, 2016</time>
Setting format
options in locale files
The date format can also be defined in your theme's locale settings:
In theme / locales / en.json
"date_formats": {
"month_day_year": "%B %d, %Y"
}
Input
{{ article.published_at | time_tag: format: 'month_day_year' }}
Output
<time datetime="2016-02-24T14:47:51Z">February 24, 2016</time>
payment_type_svg_tag
Returns the <svg>
tag of the requested payment type image for inlining purposes. Used in conjunction with the shop.enabled_payment_types variable. Accepts an optional class
attribute which is applied on the <svg>
tag to control the styling of the icon.
Input
{% for type in shop.enabled_payment_types %}
{{ type | payment_type_svg_tag, class: 'custom-class' }}
{% endfor %}
Output
<!-- If the shop accepts Mastercard and Discover -->
<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>
<svg class="custom-class" xmlns="http://www.w3.org/2000/svg">
<path fill="#494949" d="M9 11h20v2H9z"></path>
...
</svg>