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
{{ '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" />
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.

Was this page helpful?