HTML filters

HTML filters create HTML elements based on Liquid properties or a store's assets.

img_tag

Generates an image tag.

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.

The img_tag filter can also be used on the following objects:

payment_button

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

payment_terms

Renders the Shop Pay Installments banner for a product. This filter must be used on the form object within a product form.

script_tag

Generates a script tag.

stylesheet_tag

Generates a stylesheet tag.

The stylesheet_tag filter accepts the following parameters:

Parameter Description
media Sets the media attribute of the link element. When this attribute is applied, the stylesheet is loaded only if the media condition is true.
preload When this value is true, a resource hint for the stylesheet is sent as a Link header with a rel value of preload.

You should use this parameter sparingly. For example, consider preloading only render-blocking stylesheets that are needed for initial functionality of the page, such as above-the-fold content. Learn more about resource hints in Shopify themes.

time_tag

Converts a timestamp into a <time> tag.

The time_tag filter accepts the same parameters as Ruby's strftime method. You can find a