stylesheet_
string | stylesheet_tag
returns string
Generates an HTML <link> tag for a given resource URL. The tag has the following parameters:
| Attribute | Value |
|---|---|
rel | stylesheet |
type | |
media | all |
{{ 'base.css' | asset_url | stylesheet_tag }}
Code
{{ '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" />
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
Link: ; 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?