Updated August 23, 2020
CSS and Minification
CSS (Cascade Styling Sheets) are files that control the style of your website by connecting style properties to html elements. Like this:
In Shopify, you’ll find CSS files in your theme Assets folder.
What is minification?
CSS are text files. Minification compresses the text by removing extra characters like spaces and comments, and combining common styles. This makes the file size smaller. When your files are lighter they transfer faster, which helps your site load faster.The Challenge
You want to compress your files, but you also want them to be readable so you can edit and make updates. No worries, Shopify has a technique that compresses your human readable CSS files into minified files on the server.How to Minify Your Shopify CSS Files
If you’re not comfortable working with code and prefer to use an app instead, our app File Optimizer is the easiest way to minify CSS, JavaScript, and Liquid files.
First, any time you make a change to your theme you should duplicate it just to be safe. Work on the duplicate theme, then when you’re done editing Preview it, then if all is good you can publish that. If you haven’t done that work flow before, all you need to do is go to Online Stores > Themes, then next to your theme there’s an Action button. From there you can Duplicate, Preview, etc.
I usually mark mine with a version number, date, and summary of the change.
Finding Unminified CSS Files
You can do a quick analysis with GTmetrix to spot any unminified files. If you see a suggestion with a file that has cdn.shopify.com the file is usually coming from your theme (in the Assets folder). If they’re 3rd party, you don’t have control over them and will have to ask the app developer to minify (more on that later).
Minifying CSS on Your Theme
filename.scss.liquid files are already minified. filename.css files are typically not minified.
Steps to minify a CSS file on Shopify:
- In this example, you would click ebay-styles.css, then rename it to ebay-styles.scss.liquid
- Find where the file is being loaded. This command is usually in theme.liquid, most likely in the “head” section.
- Using the same example, you’d change “ebay-styles.css” to “ebay-styles.scss.css”
- Like magic, Shopify will compress your file on their server before serving it up.
- Now that CSS file will get served up as a smaller file and save page weight.
File name change in the load command (in theme.liquid):
The output before – you have organized code how it looks in your editor:
The output after – you have compressed code like this:
Typically CSS files are pretty small, so you won’t notice a significant change in load speed, but with each incremental improvement to performance optimization, you collectively make your site faster, and Google likes that.
Troubleshooting CSS Errors
This technique works great if your CSS files are clean. If there are errors in your CSS, the minified file could break your layout so you’ll have to fix those. If you you made recent change that triggered the jumble, just go back and reread to make sure there are no typos, like if you forgot a semicolon. If you can’t locate the error, you have a couple options:- Use CSS lint to paste your CSS and test for errors.
- Debug by commenting out sections of code then save and preview. When the site loads fine, you know the bug is in the commented section, so you can check there instead of reading the whole CSS file.
Side Note About Custom CSS
Your theme will usually have a style.scss.liquid (or style.css) file that controls the styles for the theme. If you make custom edits you could add them to the end of that file, but then if/when you update your theme, your customizations will get overwritten. Here’s what I do:- Create an asset file called custom.scss.liquid
- Include it in your theme.liquid after your main stylesheet.
- Any customizations you make put them here.
{{ 'custom.scss.css' | asset_url | stylesheet_tag }}
I also like to use comments to give structure and make it easier to read for the next person that works on the site.
Minifying CSS from 3rd Parties
For CSS minify suggestions coming from apps, you’ll have to request them to minify it. If you open the Minify CSS tab in your GTmetrix results, you can look at the domain name of the file -this might give a clue to who is serving it. If you don’t recognize it as an app, you can try google searching the file to try and find which app is serving up the file. When you find out which app is serving the file, you can contact them and request to minify, something like this:Hi,
It looks like there’s an unminified CSS file being served from your app (see attached screenshot).
Any chance you can minify that?
Thanks
Hello, Thanks for your great and helpful articles for Shopify users here.
If I’m removing all the empty lines in my theme.js.liquid (and perhaps other files) I noticed my file has less Kb and still run exactly the same.
Do you think it’s helpful to gain some site speed ?
Hey Gautier, yes that’s one of the things that file minification does. When you minify files you remove spaces and extra code that isn’t needed to run the file.
Removing spaces yourself is a way to manually make a file smaller, you can also use tools like mentioned above where you copy / paste in JS and CSS and get them processed for minification, or you can use the File Optimizer app for Shopify to handle the work for you of minifying CSS, JS, and Liquid files.
Shopify is moving away from scss. So that tip in this article is no longer viable.
Thanks Ted, good point and a reminder that I should update the article (officially on the task list :D). I think it’s a bad move discontinuing SCSS support so I continue to use / recommend it.
The problem with moving to pure CSS is:
– Need to keep track of 2 files now, your raw version (for editing) and minified version (for serving)
– SCSS allows for cleaner and quicker code, translating to lower dev costs
There is no performance benefit because SCSS gets compiled on the server and served as a CSS file. Shopify mentions performance benefit, but that is only in the theme editor when you’re saving the file, which is insignificant.
Good reminder here, and you’re right it sounds like they’re moving away from it, I just hope they change their mind because it’s a great feature.
Hey thank you for these precious tips,
Tell me, you who know a lot about the code and the themes, can we minify the .liquid files of the theme? if yes tell me how please,
See you soon
Hi Julien yes there are 2 ways to minimize liquid files. 1) You can go through the liquid file, pull out the code in between each set of liquid tags, then minify it using an online tool like the ones I mentioned in the article, then paste the now-minified code back in (make sure you do this on a backup file in case it doesn’t work), or 2) You can use our app File Optimizer https://apps.shopify.com/file-optimizer to automate that.
Wonderful article, is there anything we can do for leverage browser caching on shopify
Shopify controls the request headers / server caching already. For an example you can view your source code in a browser and look at your assets, they’ll be marked with a version query like this: filename.css?v=16461411057987478701.
You can’t access server configurations to change the cache policies but if there’s a specific goal / solution you’re going for give us a shout.
Minifying and unminifying js.liquid files is a pain I haven’t found a solution to, as when I unminify, if the tool doesn’t stop because it doesn’t recognize liquid variables, and if the tool does unminify, then then shopify will reject the code because of some Regex error or something.
I hear ya there, we actually have a solution – a Shopify app that handles this – coming soon. If you want to hear when it comes out join our email list (in the footer of this page) and you’ll be the first to know. 👍
I would love to know that how to minify all js files step by step for shopify like this css one?
Thanks for the suggestion, we actually have an app coming out soon that will handle it for you. I’ll give an update as soon as it launches. 👍
Also, my CSS is already minified. Why am I still able to see formatted code to edit from theme.scss.liquid. I can’t imagine trying to make changes to a minified CSS file that has no formatting (as mentioned in this article)
Using .scss.liquid allows you to see the original code in the editor, and then it automatically minifies on the server. This is the easy way to make sure your css is minified for production while readable for development. 👍
I love your whole site. Such helpful resources for technical Shopify users. Instead of optimizing, I tend to keep clicking to read more about all topics!! Anyway, I need to minify JavaScript. Getting an error on an assets/theme.js file. When using JSCompress, do I manually copy and paste the code from the assets/theme.js file to JSCompress then copy back the compressed code to the assets/theme.js file in the Edit Code area?
Thanks Mishelle appreciate the comment!
If your JS file in your theme ends with “.liquid” then copy/pasting won’t work, you’ll have to separate the javascript from the liquid code first.
If it’s a .js file then yes you can minify by copying all the code, then use a tool like JS Compress, then put back in.
But make sure to back up your original file in your theme first, in case you or a developer needs to edit or reference later. To backup, create a new asset and call it something like “theme.bak.js” or “theme_js_backup.js”.
If you’re getting the error when trying to minimize it, it either means an error in the code, or you need to click the “ECMAScript 2019 (via babel-minify)” box in JS Compress (to enable modern JS syntax).
Thank you for sharing resources to optimize shopify stores.