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.

Syntax

{% style %}

CSS_rules

{% endstyle %}

CSS_rules

The desired CSS rules for the <style> tag.

{% style %}

.h1 {

color: {{ settings.colors_accent_1 }};

}

{% endstyle %}

{% style %}
  .h1 {
    color: {{ settings.colors_accent_1 }};
  }
{% endstyle %}

{
  "settings": {
    "colors_accent_1": "#121212"
  }
}

Output

.h1 {

color: #121212;

}

</style>

Was this page helpful?