If you were editing your storepickup.scss.liquid file recently, you might have seen a message asking you to convert .scss and .scss.liquid files to .css or .css liquid for a better performing online store and theme editor. You have seen this message because Shopify is deprecating sass for Shopify themes.
To best support your store’s performance, Zapiet - Pickup + Delivery versions 7.0.8 and above will automatically create and use the new storepickup.css file. If you would like to convert these files sooner, you can convert them manually.
Manually convert SCSS files to CSS
The only SCSS file we use is storepickup.scss.liquid. To convert it, you will need to
Rename storepickup.scss.liquid to storepickup.css.liquid
In storepickup.liquid, change ####{{ 'storepickup.scss.css' | asset_url | stylesheet_tag }} to ####{{ 'storepickup.css' | asset_url | stylesheet_tag }}
To rename storepickup.scss.liquid to storepickup.css.liquid:
Go to Online Store > Themes > [Theme name] > Edit code
Go to Assets > storepickup.scss.liquid
Click Rename
Rename the file to storepickup.css.liquid
To make sure our storepickup.liquid is loading the correct CSS file:
Go to Online Store > Themes > [Theme name] > Edit code
Go to Snippets > storepickup.liquid
Replace ####{{ 'storepickup.scss.css' | asset_url | stylesheet_tag }} with ####{{ 'storepickup.css' | asset_url | stylesheet_tag }}
Click Save
Conversion Considerations
If you’re using any sass syntax, it will no longer work. You will need to either manually convert your code to CSS, or you can use a converter like JSON formatter. For example, nesting like this will no longer work:
// storepickup.scss.liquid
#storePickupApp {
.pickupIcon {
fill: red;
}
}
Converted to CSS, your code would look like this:
/* Equivalent in CSS */
#storePickupApp .pickupIcon {
fill: red;
}
Any comments will also need to be converted from // comment to /* Comment */.