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

Solved
mwpaulsen86
New Member
3 0 0

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}};) 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 .liquidold version with .liquidnew version without .liquidnew version without .liquid

0 Likes
tim
Shopify Expert
2937 141 987

This is an accepted solution.

For Debut, check css-variables.liquid snippet.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
mwpaulsen86
New Member
3 0 0

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.

0 Likes
tim
Shopify Expert
2937 141 987

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

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes