How to convert SCSS to CSS in Narrative Theme

[Tian_C]

Hi, so recently I've got a warning:

"

SCSS support is deprecated in themes
Convert .scss and .scss.liquid files to .css or .css.liquid for a better performing online store and theme editor.

"

Which is a little scary since while I can do some basic coding, converting .scss.liquid to .css.liquid sounds pretty daunting to me.

Is there an easy way to do this? All the online converters I know throw and error when it comes to liquid variables. Or will Narrative update its theme and convert this for us?

Would be great if anyone can answer this.

Thanks,

Tian

[ZestardTech]

Hello There,

convert SCSS to CSS online

https://jsonformatter.org/scss-to-css
https://www.cssportal.com/scss-to-css/
https://www.safetoconvert.com/scss-to-css-converter

[Tian_C]

Sorry, I guess I wasn't clear here.

I think the main issue I have is converting .SCSS.liquid to .CSS.liquid

All the formatters shows a parsing error when it gets to liquid variables

Thanks,

Tian

[Moonizip]

Hi,

I'm also interested in this topic. I'm in the same situation as the OP.

I need to convert from .SCSS.liquid to .CSS.liquid because Shopify told me to do so. 

Unfortunately, the online tools suggested above don't work for this. 

Has anyone a solution?

Thanks 

[LBP]

An easy way is to just view a page that has the rendered css (on your store), view page source, find the file, and copy and paste the rendered css code to a new file. Then, upload the new file as an asset, and change the link in theme.liquid to point to your new file...note that this will result in a straight css file however. 

[Tian_C]

Thanks LBP, that may be my last resort. Without the .liquid, it won't be easy for my admin to adjust the website color. I'll leave the question open without solution for now in case someone has a better solution.

I appreciate your help

Tian

[eliasdiek]

You can use Gulp to convert scss.liquid files to css.liquid with the availability to update colors, font settings, etc. Gulp provides several useful plugins which we can use to convert SCSS files mixed with Liquid variables.

If someone needs help, please email me at [email protected]

[Moonizip]

Thank you for the tip. I successfully did what you said.

However, I don't see any performance improvement in the Page Speed insights report, under "Eliminate render-blocking resources". It's exactly same as before. 

Shopify says in this article that migrating to css would increase page speed performance. What's the point of migrating then? :'( or maybe I didn't do things right?

[Anonymous]

yeah, I also tried converter, got an error on the first line despite the fact that I never changed it (made barely any edits yet). So I just extracted the code from Chrome, copied it into Sublime Text, saved as CSS, uploaded it to assets, and pointed to it in theme.liquid. 

I didn't notice anything happening faster as far as the "speed score" goes, but I immediately noticed the interface as being much faster for me. Which is helpful. 

Thanks a lot!

[Petsareus]

Hi can you please dumb it down for me a bit more? Is there a special way that you extracted the.scss file from chrome? Did you use an extension or did you just copy and paste?

Also, what do you mean you pointed to it in theme.liquid? How did you "point" to it? 

Also, did you delete the old file theme.scssliquid after you uploaded the new .css from Sublime Text?

[LBP]

Go to online store -> actions -> edit code, locate theme.liquid

Within theme.liquid, look for something similar to this:  {{ 'theme.scss.css' | asset_url | stylesheet_tag }} ...don't touch it for now, just keep theme.liquid open.

Now go to your website (the front end...what your customers see) and view page source. Locate the reference to theme.css. Open it and copy and paste the contents of this file into notepad (or similar) and save it as custom_style.css.

Upload custom_style.css as an asset. This can be done on the same page where you located theme.liquid. On the left pain, scroll down to assets and click add new asset.

Go back to theme.liquid and update it to include your rendered css instead of the scss. Change {{ 'theme.scss.css' | asset_url | stylesheet_tag }} to {{ 'custom_style.css' | asset_url | stylesheet_tag }}

Save it.

[adventmedia]

My updated theme does not have anything similar to theme.scss.css. It has styles.scss.liquid and styles.css.liquid. I assume that one of those needs to be convereted to pure css, but why wouldn't the developer include a css file?

[GIREGGIA]

i made the exact change and the images and links weren't fully pulling. i reverted back since the suggestion converted with errors.

[StudioM]

Hi There 🙂

Your kind help will be much appreciated!

I used .scss up until now, and it worked generally fine in most cases, except there was a collection section on the index page that took ages to load, especially on mobile.

Thus, in hope to to fix this issue, I tried switching to .css by following this steps:

1. I viewed the source code of the index page.
2. I've found and opened the file / link that contained: cdn.shopify.com/s/files/1/0467/6848/8604/t/76/assets/theme.scss.css?v=*********************
3. I opened the link and copied its content to a notepad.
4. On the the code edit of the theme (Narrative), I uploaded the notepad file as a new asset called "custom_style.css"
5. I then opened the theme.liquid and changed the stylesheet: "{{ 'theme.scss.css' | asset_url }}"  part with stylesheet: "{{ 'custom_style.css' | asset_url }}"

The result: the store seems to load a bit faster indeed, only the collection section in question is now completely invisible.

Meaning: The thumbnails and the info of the products are there and are clickable, and you can see each product image individually on the its own page- they are just not visible on the index's collection section at all.

Million thanks in advance for any assistance!

[Phil1980]

Thank you very much, sir!

[adventmedia]

That method resulted in a clustef*ck in the frontend.

[kriszti]

Because it's a crap solution, it removes all the liquid variables that your theme uses for colors, font sizes, etc and hard codes them.. if you are lucky. 

[adventmedia]

So, just make edits to styles.css.liquid?

[Ninthony]

You'll have to see which your theme is using. Go into the <head> of your HTML in theme.liquid and look for something like:

{{ 'styles.css' | asset_url | stylesheet_tag }}

If you find one that says .scss, then you'll need to convert that.  "styles.css.liquid"  is a pure CSS file. Having the .liquid extension just means that you can use liquid inside of the stylesheet, so if that's all you have then no converting necessary.

[adventmedia]

Okay, I understand. 

I have an issue with this theme update that the header and menu are not adjusting to media queries properly. The current (old version) theme is good. I need someone to fix these problems and also need someone to convert the sccss to css so that when there is no longer support for scss this site will be okay.

Can you look at the previews and provide a cost to make these edits?

Current theme version
https://rztymhw0k8zxbcyx-9291146.shopifypreview.com

Updated theme (bad header)
https://rspql3xkr7ulh2gb-9291146.shopifypreview.com

[adventmedia]

mmenu-styles.scss is the only .scss file. It looks like it is minified. I don't know how to convert this.

[WilDrew10]

Where do I can find the rendered .css file?

I got same problem here.

thanks

[PittiePaws]

OMG AFTER HOURS of fixing format

i tried this and it worked . Thanks so much !

[pradeept_bhanu]

I got the following error while using the online parsers:

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

[Muhammad_Hamza]

Hi, I also want to add some CSS to my website's home page. I want to add a live slider to the home. So, please suggest me some online tool or anything else to solve this issue.

[garachhb]

I tried but tool is not working, the problem with shopify is that you have very limited resource to customize and increase the speed. Like Wordpress, there are plugins where you can minify js, HTML,csss but shopify doesn't have. As well as shopify should have system that once you update latest version then everything should be done automatically. but here Shopify notifies that "

SCSS support is deprecated in themes

Convert .scss and .scss.liquid files to .css or .css.liquid for a better performing online store and theme editor.

- 

this is not a proper way to treat, not everybody are very good in coding. Also not everybody can also afford to pay to the developers.

[Jessy-clothes]

i had plak theme with lot of customization, i tried to hire people from fiverr,upwrok and freelancer and they all fail tu update my site while converting all the scss file to css.

Luckily plak theme have a custom task service, and they updated my theme for only 250$

[EcomRAZ]

You need to dig deep to find the right people on Fiverr, Upwork, and other platforms. 

[watertusk]

Not good

[Zworthkey]

hey,

.scss is more faster then the .css

there are many tools to change the .scss code to the  .css

[SLEVB]

Interesting as the text used Shopify shown below mentioned "better performing". i would see this as FASTER. You seem to know it is not

 I don't know myself if scss or css is faster but speed is so important and Google ranking is about the change and its very important we do everything to keep site super fast. I do hoep we are not taking a backwards step with this change

[NerdyCreative]

1. First you have to remove all the liquid variables from the .scss.liquid file,
2. Then use one of the Online tools to convert SCSS to CSS(e.g https://www.safetoconvert.com/scss-to-css-converter),
3. Create the .css.liquid file,
4. Add again the liquid variables on the .css.liquid file,
5. Done.

If you want to do this for you ping me at [email protected] 🙂

[Dugg]

How do you remove all the liquid variables? That is the part I can't seem to get right in order to convert.

[IrishMugger]

I just did this with a highly customized version of Debut.  Just go to the rendered frontend.  Open the code inspector and then find the theme.scss code on any css class and click the theme.scss.  It opens the theme.scss rendered as it would be in css.  I click cmd-A to select all and CMD-C to copy it.  Then I went to the them and created anew css file called newtheme.css and pasted the code there.  Then I went into the theme.liquid and where the theme.scss was being called I changed it to newtheme.css and saved.  It works just fine on front end and solves the scss being phased out.  I still have the originals in the theme as they are not hurting anything in case something is not right I can quickly switch back.

[Danny04099]

Hi is this something you can do ? Convert my .scss to .css ? I am getting so many errors it's really stressing me out.

[REQTECH]

Hey I built this tool that allows you to convert style.scss.liquid to style.css.liquid. The only thing you have to do is escape the strings of any URLs used in your liquid variables. You can see an example in the tool.

See here https://liquid-scss-css.herokuapp.com/

You can compile for standard CSS or minify. Let me know if that works for you!

[Tian_C]

Thanks for your compile engine. It doesn't work for me since there are multiple if statements in my scss theme. I would accept this as solution, but would still like there to be a perfect solution for it (I expect this mainly from Shopify and not its community), so I will leave it open for the moment.

On the other hand, Shopify put up the warning a long time ago and doesn't seem to have any effect on the website yet, so maybe there is no need to recompile to css after all. I very much appreciate your effort though! 

[JoesIdeas]

@SLEVB the text they're using is misleading.

SCSS is rendered on the server side and converted to CSS before the page loads, so the browser is able to read it.

Since there is no actual performance difference, I dug in and found that Shopify means to say "better performance in the theme editor"... not better performance when the page is loading.

The only performance gain I was able to identify is that your theme editor is a little faster when opening / saving files (I didn't test this, but after reading Shopify documentation this was the only actual performance gain I found).

SCSS is an amazing system used in modern web development, it's strange to me they are going backwards to plain CSS... it adds an extra development cost for store owners (writing CSS takes longer + you don't get the automatic minification of scss.liquid).

I keep hoping they will change their mind since SCSS is better for store owners + developers, but these deprecation messages don't seem to be going away. Maybe it's a cost saving for Shopify to scrap the SCSS -> CSS generator / minifier... I haven't been able to find a published reason but scratching my head why they would scrap SCSS.

[StudioM]

Hi @JoesIdeas,

Your comment is an actual eye-opener- Thanks you so much!

I hope that it will save other people's time, effort, funds and head-cracking that could go into actual constructive activity (or, at least, not wasting it completely due to an alarming and misleading deprecation message).

Now that you made me understand that this switch will not fix a frustrating loading speed issue that I am facing, I hope that you can perhaps know the solution:

I'm using the Narrative theme, and it works fine except for extremely long mobile loading time of thumbnails of a Featured Collection section on my homepage.

It simply takes CELLULAR CENTURIES for the thumbnails of this section to be displayed on a small device, while everything around them, including their own captions, is already there growing beard waiting.

It happens although: 

1. This collection contains just a few items which most are very light (and it's nowhere close to the amount of products that needs to be added there later).
2. Besides this collection, my homepage contains only a few other sections which are very light as well.
3. Everything for now- including the thumbnails of this featured collection section in issue- is loading fine on desktop.
4. Everything- except for this thumbs- is loading fine on mobile as well.

I've already tried every app out there to and even reached to Shopify's support (what a joke), but this issue is still looking for a saviour and I hope it's you.

Your kind help will be much, much appreciated!

[pcebo]

@JoesIdeas Thank you for that explanation, very eye opening. 

I was recently doing some work to try to improve my  Google PageSpeed Snsights scores and the theme.scss.css is showing up as a render-blocking resource. This promoted me to start looking at theme.scss.css where I saw this:

SCSS support is deprecated in themes

Convert .scss and .scss.liquid files to .css or .css.liquid for a better performing online store and theme editor.

If converting has no impact on page load performance then I wont bother with converting to CSS.

That being said, is there anything that can be done address the fact this file showing up as a ender-blocking resource?

Thanks!

[Tian_C]

I think I'm going to still leave this open until someone from Shopify creates an auto-conversion tool for us. Or the theme developer updates it for free and receive payment from Shopify itself.

I kinda get it that for development work, we should pay for developers. It's only fair. I used to work as a developer myself (albeit not a good one to be confident enough to do this task), so I understand completely. However, that should only be the case when we want something with added-value that would boost our sales.

We are already paying Shopify a monthly fee, which promises free theme, and all the basic associated e-commerce functions.

I don't understand why we should pay even more to make the website "functional" (as from what I understand Shopify will eventually stop working if we still have SCSS file?). 

It's quite disappointing actually.

For now I will do as what some has suggested (get the code from the inspector), but I can't believe they would let some poor merchant somewhere with absolutely no coding skills to someday be blind-sided by this.

[adventmedia]

I can't believe the developer for PAID theme does not provide this solution. I just updated theme to new version and now it's a complete mess and they tell me "Oh, please hire an expert." WTF?

[tmaasen648]

This link gives Shopify's suggestion on how best to handle this issue (see How to adjust your workflow) 

https://www.shopify.com/partners/blog/deprecating-sass 

[MagevskiBulls]

Hi Tian.

I`ve been facing the same issue and I would also love to have Shopify supporting us and giving us precise directions in this situation.

I also use Narrative theme.

Thanks!

[adventmedia]

I has this problem with Parallax theme. If it's not a Shopify theme then Shopify will not help you. I hired an expert; Apps On Demand. He fixed it for $40.

[dkuehne]

I did this in the Shopify "Supply" theme, but this should work for other themes.

1. First, do this on a copy of your store theme, so you can first test it. Never do something like this on your live store.
2. Simply grab the css that is rendered from your theme scss (from a browser). Use the browser tools and copy the file contents. Make sure that you are copying the main theme css (this will be rendered as css).
3. Next go and edit your code for your store.
4. Click "Add a new asset" under the assets directory.
5. Name the new file "theme" [and choose the .css from the dropdown]. Do not choose .scss
6. Paste the css that you copied above into that empty file.
7. Save the file (you will not see any changes yet, since you have one more step.)
8. Now under the layout directory, click on the theme.liquid file
9. Scroll down until you see the line that says  {{ 'theme.scss' | asset_url | stylesheet_tag }} or whatever you main scss file was called. Change the scss to css and save the file.
10. Now your theme should be using the theme.css file that you created above in the assets directory.
11. You can now delete the old theme.scss.liquid file, but you can leave it, just in case you want to revert to the scss.

This worked for me, so I hope it works for you. Again, I'm currently using the "Supply" theme and I'm going to update the css to use a css grid system instead of floats, etc.

Bonus (Creating a custom css file): Create another custom css file and call it custom.css and add a reference to your theme.liquid file right under the change you made in step 9. This should look like this when you're finished:

  {{ 'theme.css' | asset_url | stylesheet_tag }}
  {{ 'custom.css' | asset_url | stylesheet_tag }}

Now your css should cascade correctly and any additional custom css you add can go in this file.

Hope this helps.