How to convert theme.scss files to theme.css in Shopify themes?

Store Design
1

Shopify is notifying shop owners about the need to convert theme.scss files to theme.css files. They are saying that all free and paid Shopify themes in the future will have this conversion.

Ok, that’s good.

Looks like a .css file can be saved as a .scss file but not vice versa. But, how am I supposed to convert our theme.scss to .css - there aren’t any guides or anything provided. So, I just downloaded the most recent version of our theme, but that is still using the old theme.scss file that Shopify told me they do not want!

Can someone shed some light on this issue, pls. Thanks.

4 Likes
2

same here, with VENTURE THEME

3 Likes
3

Hi @SHIBdev ,

If there were clear instructions, we may complete the task, but I couldn’t find any guidance for the layperson who’d be happy to do some coding.

There is some info for developers. For example, looks like Mixins don’t work with .css but could not find detail about converting them to .css - the Shopify pages assume that everybody understands how it’s done!

It looks like Debut has been updated so far. And, Venture theme has not been updated yet, it seems.

So, why is Shopify sending messages to shop owners before converting all of their themes?

3 Likes
4

Same here with Brooklyn template.

Didn’t find any options so far… (actually, i hope Brooklyn will be updated soon !)

2 Likes
5

Hi @Antho3 ,

How do you know Brooklyn is next: were you informed by Shopify?

Perhaps Venture will be last on their to do list; 600 lines in the beginning of .scss appear to be code for Mixins. Think Debut’s coding was easier to adapt maybe?

How do they expect people to do the conversion for 600 lines of Venture’s theme.scss, if they do not explain the details?

1 Like
6

You can use a converter:

https://jsonformatter.org/scss-to-css

Should be fine. Just duplicate your theme, copy your theme.scss.liquid file and paste it into the converter, copy what comes out the other end and paste it into your theme.scss.liquid file. Save it, check your website and make sure all looks well, then publish :slightly_smiling_face:

2 Likes
7

Hi @Ninthony ,

Tried some online code checkers etc before and can not say they worked well. In this case, there is a very long list of Mixin variables, and am not predicting whether all will be converted correctly. But, thanks for the suggestion, and I’ll give it a go some time later today or tomorrow. Will let you know how it goes.

2 Likes
8

Please do. While my stores theme doesnt use too many mixins, we’ll be updating in the coming weeks too and this was my plan so I sure hope it goes alright lol.

2 Likes
9

Hi @Ninthony ,

Not good news! Finds multiple parsing errors. Starts with not liking Line 231:

fatal error: parse error: failed at $color-btn-primary: { { settings.color_button_bg } } ; (stdin) on line 231

I deleted the whole primary button section beginning with Line 231 and tried again. It didn’t like the following section on the secondary button either! And if I keep deleting sections, there will not be much of theme.scss left. What to do?

4 Likes
10

Hi !

Did you find a solution to get by the SCSS / CSS issue ?

Cheer’s

2 Likes
11

Wow, not working for me at all. I have an error, apparently in the first line, which I’ve never even touched (I have a super new store, barely started, so I have barely changed anything as of now, and definitely not on the first line).

Error I got:

fatal error: parse error: failed at { % comment % } (stdin) on line 1

1 Like
12

+1 , please help.
I get this error while trying to migrate/convert the .scss file to .css

Compilation Error
Error: Invalid CSS after " $color-text:": expected 1 selector or at-rule, was “{{ settings.color_t”
on line 338 of sass/Users/********/Desktop/css/theme.scss

$color-text: {{ settings.color_text }};

is there an ‘easy’ way for shop owners to fix this?

13

the online converters won’t work.

getting this (kind of) errors all the time;

fatal error: parse error: failed at $color-text: { { settings.color_text } } ; (stdin) on line 338

14

So I searched this forum if anyone else has asked this or not. There is a thread where someone suggested getting the CSS from the browser (Inspect Element), copying it into a code editor, saving it as CSS, uploading it to assets, and then pointing to it in theme.liquid.

I’m not sure what’s going to happen when the themes will be updated, I guess, CSS? So far, for me, it worked.

My store’s speed score is the same, but my interface is super fast now. It was sometimes unbearably slow, so, I’ll take this improvement. :blush:

1 Like
15

Is this something we need to do now in our shops? Will it be automatically done in any way?

1 Like
16

Thanks @Anonymous , it worked!

HOW TO:

  • Open Google Chrome : ‘yourstore.myshopify.com’ :

  • Right click (on the page) : click on ‘Inspect element’ : click the arrow on the left (it opens) the ‘’ section :

  • search for; ’ ’ in the head section/code :

  • Right click on the link : click on ‘open in new tab’ : a new tab with your website’s css will open up :

  • Select all text/code and copy (ctrl/cmd + c) it :

  • Go to the ‘Assets’ folder in your Shopify account (yourstore.myshopify.com : online store : edit store : ‘Assets’ folder) :

  • Click on ‘add a new asset’ and name it ‘theme.css’ :

  • Paste (ctrl/cmd + v) the text/code in ‘theme.css’ :

  • save it :

  • Go to ‘theme.liquid’ and search for ’ {{ ‘theme.scss.css’ | asset_url | stylesheet_tag }} ’ :

  • disable this line of code ( put the line between ’ ’ (or delete the whole line of code)) :

Add the line of code you copied at first, inside the section; ’ ’ (make shure you remove ‘.scss’ !)

Save it.

I guess you could delete the ‘old’ .scss files (I didn’t! ; because it’s unclear for me what Shopify want’s/is doing..and what works best)

Hope this is helpful (and a good/the right way)

Thank’s @Anonymous and everybody for the answers and info!

WE GOT THIS! :wink: (little messy, i know..)

6 Likes
17

@FG10 can you please explain better what code did you applied into theme.liquid after you’ve created the new theme.css please?

2 Likes
18

Hi @Annavittoria ,

(old one)

notice the ‘.scss’

(new one)

2 Likes
19

@FG10 i’ve just converted the string ’ {{ ‘theme.scss.css’ | asset_url | stylesheet_tag }} ’ into ’ {{ ‘theme.css’ | asset_url | stylesheet_tag }} ’ so it will point on the new file.

Do you think it works anyway? It seems to work…

and please note that this string must be edited in many liquid files, like password.liquid and so on, because many things use to work with the old theme.scss…

I’m just searching for ‘scss’ in any files and editing them

1 Like
20

@Annavittoria ,

yes you’re right.

Add the line into the ‘layout’ files.

{{ ‘theme.css’ | asset_url | stylesheet_tag }}

Thanks!

1 Like