Converting SCSS to CSS

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, Store 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

  1. Rename storepickup.scss.liquid to storepickup.css.liquid
  2. 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:

  1. Go to Online Store > Themes > [Theme name] > Edit code
  2. Go to Assets > storepickup.scss.liquid
  3. Click Rename
  4. Rename the file to storepickup.css.liquid

To make sure our storepickup.liquid is loading the correct CSS file:

  2. Go to Snippets > storepickup.liquid
  3. Replace {{ 'storepickup.scss.css' | asset_url | stylesheet_tag }} with {{ 'storepickup.css' | asset_url | stylesheet_tag }}

  4. 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 */.

Sebastian is the author of this solution article.

Did you find it helpful? Yes No

Send feedback