Using variables in CSS and HTML

The properties you choose in the Settings panel or set in your manifest file for colors, fonts, and theme images are stored in variables. You can use these variables in the theme’s style.css file. You can also reference the variables using Curlybars expressions in HTML page templates.

The variables are useful if you want to specify the same value in several places and update it quickly. Updating the property updates it everywhere the variable is used. You can change the names and labels, delete variables, or add your own (see the Settings manifest reference).

For a complete list of the default settings available in our themes, refer to our online documentation.

Examples using variables in CSS

The properties you set for colors, fonts, and theme images are stored in variables that you can use in your theme’s style.css file.

For example, you can use some of the default variables in CSS with the following syntax:

• $primary_color
• $primary_inverse_color
• $heading_font
• $text_font

In the CSS file, you assign a variable to a CSS property the same way you would assign a normal value. For example:

.button {
  label-color: $text_font;
}

You can also use single curly brackets to embed the helper in a CSS expression, as follows:

max-width: #{$search_width}px

Examples using variables in Curlybars in HTML

The properties you set for colors, fonts, and theme images are stored in variables that you can reference with Curlybars expressions in HTML page templates.

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

For example:

• {{settings.color_1}} is the HEX value of a color. For example: #FF00FF
• {{{settings.font_1}} is the font stack. For example, system is defined as: ‘-apple-system, BlinkMacSystemFont, ‘Segoe UI’, Helvetica, Arial, sans-serif”
• {{settings.homepage_background_image}} is the path to the file stored in this field. For example: p8.zdassets.com/theme_assets/…
• {{settings.range_input}} is the value of the range input.

The settings object can be used as input to any helper. For example:

{{is settings.enabled}} ... {{/is}}