.dev
Partner Dashboard

stylesheet ​

Last updated View as Markdown

With the stylesheet tag, CSS is added to the page in an HTML <style> tag with a data-youcan attribute.

The same CSS is added only once per page. When a snippet with a stylesheet tag is rendered several times, for example once for each product card, you get one <style> tag.

liquid
{% stylesheet %}
  CSS_rules
{% endstylesheet %}

Example ​

liquid
{% stylesheet %}
  .product-card {
    border-radius: 8px;
  }
{% endstylesheet %}

Output

html
<style data-youcan>
  .product-card {
    border-radius: 8px;
  }
</style>