How to Add/Edit Custom CSS File on 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?

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.

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

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.

About Author

Tom is one of our Customer Success Gurus and knows everything about our apps and how to set them up. He's likely the guy you will talk to when you need help. Tom's favorite topic is upselling/cross-selling about which he also likes to write on our blog. If he's not helping merchants he's likely out doing something crazy like parachuting or downhill longboarding.

Leave A Reply