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.
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.
Note: If you reference <a href="/themes/architecture/settings/input-settings#color">color settings</a> inside <code>style</code> 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 %}
Code
{% style %}
.h1 {
color: {{ settings.colors_accent_1 }};
}
{% endstyle %}Data
{
"settings": {
"colors_accent_1": "#121212"
}
}Output
<style data-shopify>
.h1 {
color: #121212;
}
</style>
Output
<style data-shopify>
.h1 {
color: #121212;
}
</style>Was this page helpful?