Custom CSS File on Shopify: How to Create and Why You Need It

Creating a custom CSS file in your Shopify theme is super important if you want to add custom CSS to your theme. It’s easy and only takes a few minutes!

How to Create a Custom CSS File on Shopify

Why you need a custom CSS file

While you could just add all your custom CSS to the end of the theme’s main CSS file, I don't recommend it. Here's why you should create a custom CSS file on Shopify:

• Keep your own code separate and organized. This will make it easy for you to make changes to your own code without having to scroll through all the theme’s very long CSS code.

• Remove the risk of breaking the theme. If you have just one error in your CSS, everything below that error will not work. So you should remove any risk of accidentally messing with the theme’s CSS by just not touching that file at all.

• It’s easier to troubleshoot issues if your own code is separate. If you have a CSS error that's making your website site show incorrectly, there’s less code to sift through to find the error when you know you haven’t touched the main CSS file.

How to create a custom CSS file

To create a custom CSS file, go to Online Store > Actions > Edit Code. Do a search for "css" and see if your theme happens to come with a custom CSS file already. If not, go to Assets > Add a new asset > Create a blank file > custom.css.

Next you need to link this file to the website as just creating this file doesn’t actually load it in the browser. Open the theme.liquid file in the Layout folder. This is where the website’s tag is stored, and content in the is loaded on every single page, like we need it to be.

Look for where another style sheet is located by pressing Command + F on a mac or Control + F on a PC and search for style, until you find another stylesheet. Under the last stylesheet, create an empty line to link your stylesheet. The reason it must go under is because the order of CSS matters so you want to make sure that your custom CSS is overriding the theme’s CSS. Copy and paste the below code in that spot and click Save.

Instead of putting a full URL, we have specified a relative path that points to the assets folder. The Liquid filters will generate a link that points to the stylesheet. After saving, you’re ready to write some CSS in your new custom.css file!

In some cases, you may find that your styles are not working and you will need to use !important to overwrite the theme’s styles. !important should be used sparingly and ideally you should really just increase specificity of the selector to overwrite the original rule. However, sometimes !important is necessary to use, especially when adding custom styles to things that you don’t have access to the code for, like apps. I always add !important for app styles because even if the CSS works without it, any update to the app code could suddenly change that.

Now that you have a custom CSS file, you're ready to learn to use custom fonts on Shopify

Enjoyed this post?

Watch our
Free Training

Watch now
Free Shopify Training for Designers