Solved

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

mwpaulsen86
Visitor
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

Accepted Solution (1)

tim
Shopify Expert
3258 232 1178

This is an accepted solution.

For Debut, check css-variables.liquid snippet.

View solution in original post

Replies 4 (4)

tim
Shopify Expert
3258 232 1178

This is an accepted solution.

For Debut, check css-variables.liquid snippet.

mwpaulsen86
Visitor
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.

tim
Shopify Expert
3258 232 1178

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

Rarify
Tourist
9 1 4

@tim @mwpaulsen86 Trying to wrap my head around this problem for "baseline" theme.

Could you please explain what the solution was?