HTML Filters

HTML filters generate complete HTML tags from URLs or filenames. They’re convenient shortcuts for creating stylesheet and script references.

stylesheet_tag

Wraps a URL in a complete <link> tag for CSS stylesheets.

Syntax:

{{ url | stylesheet_tag }}

Input: A URL string (typically from asset_url).

Output: A complete <link> element.

Code
Output

{{ 'css/main.css' | asset_url | stylesheet_tag }}

<link href="/files/theme-key/assets/css/main.css?v=theme-key" rel="stylesheet" type="text/css" media="all" />

Generated attributes:

rel="stylesheet"
type="text/css"
media="all"

Example Usage

<head>
  <meta charset="utf-8">
  <title>{{ page.title }}</title>

  {# Load stylesheets #}
  {{ 'css/normalize.css' | asset_url | stylesheet_tag }}
  {{ 'css/main.css' | asset_url | stylesheet_tag }}

  {{ content_for_header }}
</head>

script_tag

Generates a complete <script> tag for a JavaScript file from your theme’s assets.

Syntax:

{{ 'filename.js' | script_tag }}

Input: A filename relative to the assets/ directory.

Output: A complete <script> element with the full asset URL.

Code
Output

{{ 'js/main.js' | script_tag }}

<script src="/files/theme-key/assets/js/main.js?v=theme-key" type="text/javascript"></script>

Example Usage

  {# At the end of the body #}
  {{ 'js/vendor.js' | script_tag }}
  {{ 'js/main.js' | script_tag }}
</body>

Comparison

Filter	Input	Needs `asset_url`?
`stylesheet_tag`	Full URL	Yes
`script_tag`	Filename only	No (built-in)

{# Stylesheet: chain with asset_url #}
{{ 'css/main.css' | asset_url | stylesheet_tag }}

{# Script: filename only #}
{{ 'js/main.js' | script_tag }}