If you noticed that your Shopify site styles are no longer being applied to your site, you’re not alone. I bet you’re wondering what happened.
The good news is your site is not hacked, and nothing has broken on the functional shopping experience. Shopify has simply stopped supporting .scss files.
The strangest part about this depreciation is that the default themes provided by Shopify used SCSS, so if you created your theme from their default theme, your site is likely broken.
Is there an easy way to fix a Shopify site?
Shopify gives this article about depreciating .scss. But it’s just not as straight forward in practice as this article describes. Especially the part about .scss still working – because it does not. It was officially discounted on NOVEMBER 4, 2020.
Initial Shopify .scss Depreciation Quick Fix
So you will probably need to have a new theme built out, but in the short term, you can hard code a version of your site by doing the following:
Try running the code through a program like https://jsonformatter.org/scss-to-css
In most cases, this program will encounter errors. The error will list the line, go to that line in the code, examine the class, then find the variable’s value (it’s likely in the style selector in the Shopify theme customizer area) and insert the actual value into the scss file in place of the variable. Continue in this manner until errors are resolved.
Upload the new css file to your theme assets folder. Update the css link from the scss file to your new css file. Check the theme. If you’re still missing some styles, determine what those are by using the developer/inspector tool in your browser and add the necessary styles to the new css file.
Fixing Your Shopify Theme – The Big Picture
In the long term, you’ll need to rebuild the theme so that the customizer options will be effective. This gives you an opportunities to take advantage of Shopify’s new Section based shops (2.0) which offer a lot more customizations and layout options.
If you need help rebuilding your shoplifty theme, drop Contento Interactive an email.