Custom CSS File on Shopify: How to Create and Why You Need It
How to add custom CSS to Shopify
There are a few ways to add custom CSS to a Shopify theme.
Theme editor
In the theme editor, you can add custom CSS to any section, that will apply to just that one section. This is located at the bottom of each section's settings. This is a super convenient way to make style changes to just one section. In the theme editor, you can also add theme-wide CSS at the bottom of the theme settings.
While these options can be very convenient for a little bit of CSS, the custom CSS settings in the theme editor are frustrating to use because they often show errors that do not allow you to save your changes, or the code is deleted as you type. Also, the editing area is very small so it's not ideal for making a lot of customizations or organizing your code.
Code Files
Within the theme code files, you're able to add site-wide CSS. This is more convenient for creating global styles, and for large amounts of customizations. Additionally, it doesn't create unnecessary errors that don't allow you to save the file — although this means you're responsible for avoiding errors. As a designer, if you're heavily customizing a Shopify theme, then you'll definitely want to use the theme code files to use custom fonts and organize your custom code.
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.
Hana Drdla
