CSS Variables

CSS variables are an official part of the CSS specification and are called CSS Custom Properties

The theme delivers CSS variables for the most important settings from the theme configuration. You can inspect them in the storefront using your browser's developer tools (in browser: right-click > Inspect). CSS variables help you to ensure a uniform appearance in the presentation of your storefront.

Available CSS Variablen

// CSS Variables
--zen-layout-container-width
--zen-layout-button-radius
--zen-layout-input-radius
--zen-layout-element-radius
--zen-color-brand-primary
--zen-color-brand-secondary
--zen-border-color
--zen-background-color
--zen-container-bg
--zen-meta-theme-color
--zen-text-color
--zen-light-text-color
--zen-headline-color
--zen-light-headline-color
--zen-color-price
--zen-color-buy-button
--zen-color-buy-button-text
--zen-gray-100
--zen-gray-200
--zen-gray-300
--zen-gray-400
--zen-gray-500
--zen-gray-600
--zen-gray-700
--zen-gray-800
--zen-gray-900
--zen-font-family-base
--zen-font-family-headline
--zen-font-size-base
--zen-h1-font-size
--zen-h2-font-size
--zen-h3-font-size
--zen-h4-font-size
--zen-h5-font-size
--zen-h6-font-size
--zen-font-weight-base
--zen-headings-font-weight

Usage

The color value stored in the variable corresponds to the setting from the theme configuration. You can use a CSS variable in the color fields of the experience elements, for example.

//  Calling the primary color of the shop as a CSS variable
var(--zen-color-brand-primary)

Example:

primary color as CSS variable