Using variables/settings from schema in css (in 2021)

Technical Q&A
1

I’m aware that shopify recently deprecated scss/sass, but it looks like newly downloaded themes are only including regular css files (theme.css) as opposed to liquid files (theme.css.liquid). I’m having a hard time figuring out how to call variables from the schema portions of the website. Before, you could just use liquid (ex: color: {{settings.my_font_color}}:wink: but now it looks like they’re using traditional css variables (ex: color: var(–my-font-color);). The problem is, I can’t find the :root element, or how they’re filling the value for those variables.

It looks like it’s still pulling data from the merchant selected settings/schema/whatever because the editing options that were present originally still work, but I can’t figure out how to make my own anymore. I’ve tried adding my own like I did under the old system, and using the id in the “var()” function like they seem to be doing now, but it just says “(my variable name) is not set”. I’ve left a couple screenshots of the css vs. css.liquid assets to show you what I’m talking about.

old version with .liquid
old version with .liquid262×338 3.6 KB

new version without .liquid
new version without .liquid262×369 4.01 KB

2

For Debut, check css-variables.liquid snippet**.**

1 Like
3

Thank you so much!! That’s exactly what I was looking for. Is this anywhere in the documentation? I spent the better part of the day yesterday googling it, but all I could find was older documentation that’s no longer relevant (at least with newly installed themes). It’s entirely possible I just missed it (I’m certainly not the best googler in the world) but if there’s a better, more up to date source for doc’s, I’d love to know about it.

4

No, do not think there is any dox on theme internals. They do not even share a changelog, which is a shame IMHO.

5

@tim_1 @mwpaulsen86 Trying to wrap my head around this problem for “baseline” theme.

Could you please explain what the solution was?

1 Like