stylesheet_ tag
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 }}
{{ '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.
Was this page helpful?