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>