How to add a custom CSS file to your Shopify store

Tomas Janu

|

March 28, 2023

How to add a custom CSS file to your Shopify store

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.

How to add a custom CSS file to your Shopify store

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?

Upsell with Candy Rack

Option 1 – Add Custom CSS via Theme Editor (Recommended)

In February 2023, Shopify introduced a new way of managing custom CSS. It's now a native part of every theme built by Shopify (i.e. Dawn) and our recommended option to manage CSS on your store.

The main benefits are simple CSS management, live preview of changes, supported theme updates, and built-in validator and suggestions.

Adding custom CSS via Shopify theme editor
Adding custom CSS via Shopify theme editor

To add custom CSS via the theme editor please follow these steps:

  1. Go to your store admin > Sales channels > Online Store Customize
  2. Go to theme settings (paintbrush icon in the left menu) > CUSTOM CSS
  3. Add custom CSS per your need, check the live preview, and click on Save if all is good

Option 2 – 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.

Editing store styles via theme customization
Editing store styles via theme customization

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 3 – 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.

Adding custom CSS via theme.scss.liquid file
Adding custom CSS via theme.scss.liquid file

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 4 – 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).

Adding the custom CSS file to theme.liquid
Adding the custom CSS file to theme.liquid

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.

{{ 'custom.css' | asset_url | stylesheet_tag }}

Once you update or change your theme, you need to copy this code to theme.liquid again. But the custom CSS file will always stay in your assets folder.

Option 5 – Add/Edit the Custom CSS via Third-party App

The last method requires the installation of a third-party app but provides a big advantage. All the custom CSS entered into the app is independent of your current theme. So you can change or update themes as you like but the CSS will prevail. Or you can target the CSS for each theme installed as shown in the example below.

Adding custom CSS via Custom CSS & JS app
Adding custom CSS via Custom CSS & JS app

There are a few apps that do this and some of them are even free. The disadvantage is that every app has some impact on the store’s performance. Especially if the CSS is loaded via a different file. So consider carefully which way is the best for your store.

Start your Shopify store for free and pay only $1 for the first monthStart your Shopify store for free and pay only $1 for the first month

Tomas Janu

Tom loves writing about upselling, conversion optimization, and e-commerce trends. He is one of our co-founders, and you can sometimes talk to him if you contact our support team. Make sure to follow him on LinkedIn for more Shopify-related tips and news.

Latest articles

All articles

Boost your Shopify business with our apps

All our apps are designed to help you grow your Shopify business. Check them out and take advantage of the free trial period.

Boost my Shopify