How to Create a Custom CSS File for Shopify (in 3 minutes!)
There’s not one Shopify project I’ve done that didn’t involve some code customization. I’ve been building Shopify stores for 7 years now and the absolute first thing I do before making any edits to the code is create a custom CSS file.
Doing this is an absolute must if you plan on using custom fonts or want to customize the theme with CSS.
The reason you don’t want to just add your CSS to the theme’s existing CSS file is because making just one little mistake in that file can break the whole website.
Unfortunately I am speaking from experience on that one. When I first started out on Shopify I accidentally broke a client's website just by making a small mistake in the theme’s css file.
Yeah, not my proudest moment. So ever since then I separate my CSS code from the theme’s code with a custom css file. Take my advice and do this too because it has a bunch of other benefits as well I’ll get into later.
In the tutorial below, I'll show you how to quickly create that custom CSS file so that you’re ready to start coding, and if you’re a designer you’ll want to make sure to watch all the way through because I’ll be showing you how I like to set up my file to prepare for every Shopify project. We'll set up the brand colors, organize our code into sections and set up media queries.
Watch the tutorial on YouTube:
Here's the code from the video:
It is such good practice to separate any custom code from the theme’s core files when possible. The 3 main benefits of doing is are that:
Number 1, you going to lower the risk of accidentally breaking the website. Number 2, it’s going to make it way easier to troubleshoot any code issues that you experience, because you can find errors a lot easier. And number 3, it will make theme version updates easier as well. When you do a theme version update, the one-click update only works if the update tool can easily tell what is custom code.
Alright designers, I hope you’ll be using these steps in all of your future Shopify projects. It is an absolute must in my website process.
Hana Drdla
