How to Create a Custom CSS File on Shopify

If you want to add custom CSS to your theme, I highly recommend creating a custom CSS file. 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 <head> tag is stored, and content in the <head> 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.

<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">

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.

Let us know in the comments if these steps worked for you!

Hana Drdla

Hana Drdla

Hana is one of the co-founders of Luna and a Shopify pro. She loves helping entrepreneurs launch their businesses through her freelance web development business.


Sign up to receive monthly emails packed full of tutorials, new products and special offers.

0 0 votes
Article Rating
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments


With sections that work with the most popular themes. For store owners and designers.

We’re making beautiful Shopify stores a breeze with customizable pre-built sections.

Related Posts