Skip to main content

stylesheet_tag

string | stylesheet_tag
returns string

Generates an HTML <link> tag for a given resource URL. The tag has the following parameters:

AttributeValue
relstylesheet
typetext/css
mediaall

You can add any other HTML attribute to the tag by adding a parameter that matches the attribute name, and the desired value.

Note

The href and rel attributes are managed by the filter and can't be overridden.

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

Output

<link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/base.css?v=88290808517547527771663872409" rel="stylesheet" type="text/css" media="all" />
Anchor to preload

preload

stylesheet_url | stylesheet_tag: preload: boolean

Specify whether the stylesheet should be preloaded.

When preload is set to true, a resource hint is sent as a Link header with a rel value of preload.

Link: <STYLESHEET_URL>; rel=preload; as=style

This option doesn't affect the HTML link tag directly.

You should use the preload 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. To learn more about resource hints in Shopify themes, refer to Performance best practices for Shopify themes.

Anchor to HTML attributes

HTML attributes

string | stylesheet_tag: attribute: string

You can specify HTML attributes by adding a parameter that matches the attribute name, and the desired value. The href and rel attributes are managed by the filter and can't be overridden.

{{ 'base.css' | asset_url | stylesheet_tag: fetchpriority: 'high' }}

Output

<link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/base.css?v=88290808517547527771663872409" rel="stylesheet" type="text/css" media="all" fetchpriority="high" />
Was this page helpful?