Contents
Learn how to add or edit the custom CSS on your Shopify store. You can edit the theme.scss.liquid or base.css file or use a third-party app.
One of the biggest strengths of the Shopify platform is the large variety of store themes (both free and paid). But sometimes you may need to slightly adjust the layout or change the colors. For some of these changes (especially the advanced ones), you will need to edit the CSS file of the theme. You can also use the custom CSS to edit the design of the third-party apps installed on your store. What’s the best way to do that?
Option 1 – Edit the Theme Design (Colors, Fonts, CSS, etc.)
Sometimes you actually don’t need to edit the CSS just use the built-in theme customizer. It offers various options depending on the theme you are using but mostly you will be to change only standard stuff like colors, font types, and sometimes layouts.
Some of the themes has also a section called “Custom CSS” where you can add in your CSS. It’s practically very similar to editing a theme file CSS (see below) as once you update the theme, it will be lost as well. Unless the theme is using some advanced theme updater which not many do.
Option 2 – Add/Edit the Custom CSS in Your Theme
The common way of editing the CSS is editing it inside the existing CSS file located in the theme code. It’s usually called theme.scss.liquid or base.css in the new Shopify 2.0 themes (i.e., Dawn). You can find it by going to your store admin > Online Store > Themes > Actions > Edit code > Assets folder.
Once you open it you can edit or add any CSS you want. The disadvantage is that if you change or update the theme, your CSS will be lost. It’s a good practice to put all your customizations in a section called “Custom CSS” or similar and just copy & paste it to the new theme in case you need it.
Option 3 – Create the Custom CSS File
This is very similar to the option 2, but instead of editing existing CSS file, you will create a new one. The main advantage is that once the theme is updated or changed, you can easily connect your CSS file.
To create your own CSS file go to store admin > Online Store > Themes > Actions > Edit code > Assets folder, and click on Add a new asset. On the pop-up select Create a blank file and name it whatever you want (for example, custom.css).
Once you have the new CSS file created, you can add your custom CSS. The important part is to "call" from your theme, so it's actually used. To do so go to Layout folder and open a file called theme.liquid. Add following liquid code to the <head> section where "custom.css" is the file name of your custom CSS file.