Using theme settings

The properties you choose in the Settings panel or set in your manifest file are stored in variables. The value of these variables can be used in the theme’s style.css file and page templates.

You can reference these variables in the theme’s style.css file or using Curlybars expressions in page templates.

Using variables in CSS

Setting variables can be used in both CSS and the theme’s Sass source files by assigning a variable to a CSS property in the same way you would assign a normal value:

.button {
  color: $button_color;
}

The variable name, in this example button_color, is the setting identifier from the manifest file.

You can also use single curly brackets to embed the variable in a CSS expression:

.container {
  max-width: #{$container_width}px
}

Using variables in page templates

Setting variables become properties of the settings object in page templates. As with any Curlybars object, you can use double curly brackets and dot notation to insert a property in a page template. For example:

<h1>
  {{setting.homepage_heading}}
</h1>
<div class="hero" style="background: url('{{settings.homepage_background_image}}')">
  ...
</div>

Questions or feedback about this article? Let us know