style

Generates an HTML <style> tag with an attribute of data-shopify.

Note

If you reference color settings inside style tags, then the associated CSS rules will update as the setting is changed in the theme editor, without a page refresh. See more information and limitations of live preview.

Syntax

{% style %}

CSS_rules

{% endstyle %}

CSS_rules

The desired CSS rules for the <style> tag.

{% style %}

.h1 {

color: {{ settings.colors_accent_1 }};

}

{% endstyle %}

Output

.h1 {

color: #121212;

}

</style>

Output

<style data-shopify>
  .h1 {
    color: #121212;
  }
</style>

Was this page helpful?

style

Syntax

Code

Data

Output

Output