Appearance settings can now be exposed as CSS variables on the storefront.
This means values configured in Appearance Settings, such as colours and other visual settings, can now be referenced directly in your custom CSS. Instead of hard-coding those values into your stylesheet, you can rely on variables that update automatically when the appearance settings change.
What Was It Like Before?
Previously, if you wanted your custom CSS to match the values set in Appearance Settings, those values often had to be manually repeated in your stylesheet.
That meant if something like a primary colour changed, the CSS might also need to be updated separately. Over time, this created more maintenance and increased the risk of styling drifting away from the configured storefront appearance.
Pre-Requisites
To use this feature, you’ll need access to:
- Appearance Settings
- CSS Override or your storefront’s custom CSS
You’ll also need to know which appearance values you want to reference in your styling.
How to Use It
Start by creating or updating a CSS file and referencing the available appearance variables in your rules.
For example, instead of hard-coding a colour value into your stylesheet, use the corresponding CSS variable generated from Appearance Settings.
Once your CSS is ready, upload it through your existing CSS override process.
After that, change a value in Appearance Settings and confirm that the storefront styling updates automatically through the variable-driven CSS.
Tips
This is especially useful when building reusable themes or maintaining multiple storefronts with a shared styling approach.
Using CSS variables helps reduce duplicated values in your stylesheets and makes future updates much easier to manage. It also makes custom CSS more adaptable, since the design can respond automatically to changes made in the admin area.
Troubleshooting
If your custom styling is not updating as expected, first check that the correct CSS variable is being used in your stylesheet.
Then confirm that the related value in Appearance Settings has been changed and saved successfully. It’s also worth checking whether the CSS file has been uploaded correctly in the override area and whether any caching needs to be cleared.
Summary
This update makes storefront styling more flexible by allowing Appearance Settings to flow directly into custom CSS through variables.
For teams managing custom themes or overrides, this reduces manual updates and helps keep styling aligned with the latest configured appearance settings.