Categories
Shopify Store Setup

How to Safely Add Shopify Custom CSS & 8 Apps to Do It Faster!

Between choosing your products and launching your online business, there’s one very important step – creating a great Shopify store. Even with the best Shopify themes and apps, your store might still be missing an X factor.

That’s where Shopify Custom CSS comes into play.

From changing colors, fonts to removing Powered by Shopify from the store’s footer, customizing CSS may be the extra step needed for you to outshine competition.

But in reality, tweaking the code sometimes can lead to unwanted results. No matter who you are, an amateur or a skilled professional, it always pays to be safe and do some research before diving into Shopify CSS files.

Here we’re going to explore how and where to add custom CSS to Shopify. Then we’ll give you the top 8 apps that can make the whole process easier.


First thing first, make backups of your Shopify theme

There are some questions you need to answer before customizing your Shopify theme. What are the pros and cons of redesigning it? How vital is the change you are thinking about?

Or is there any other way to accomplish your goal without editing CSS in the Shopify store? Using a store builder app or an advanced customizable theme might do the trick.

Once you’re determined on doing this, the absolute first thing to do is to duplicate your theme before you edit its code. This way, if anything goes wrong, you just need to go back and don’t have to start from scratch.

Here are 3 quick steps to backup your Shopify theme:

Step 1: Go to Online Store > Click on Themes.

sign in shopify, shopify admin panel, click online store and themes

Step 2: Choose the theme you want to edit custom CSS > Select Actions.

choose theme you want create and click actions

Step 3: Click Duplicate.

duplicating themes on shopify

Once you’ve done, the duplicate theme will appear on the Themes page.  It is named Copy Of + the name of the theme that you duplicated.

The duplicate theme Copy of appears on the Themes page

How to add Shopify custom CSS?

Okay, now it’s time to get into the nitty gritty of making adjustments to the looks of your Shopify store via CSS editing.

Step 1: Click on Online Store

Second, in the left navigation of your admin dashboard, click on Online Stores. It will open the drop-down menu. Choose the first option underneath Themes.

Step 2: Select Actions > Choose Edit code

Next, you need to choose the Copy of theme which we’ve duplicated before. To find Shopify custom CSS of your current theme, you need to click on the Actions button. In the drop-down menu, select Edit code to access to Shopify source code.

Step 3: Access Shopify CSS file

On the left side, scroll down to the Assets folder. Then click on it and find the correct CSS file. Although it might be different depending on which theme you are using, it will probably be named something like style.scss.liquid or theme.scss.liquid.

This is where to add your Shopify custom CSS.

Step 4: Adding Custom CSS Code

Add your custom CSS snippets the the end of the file and click Save. For future preferences, you should include clear comments explaining each change.


8 FREE apps to add Shopify Custom CSS faster

In the case you are looking to edit your store’s code frequently, there are some faster solution: these CSS customization apps give easier access to the theme’s code.

It is however worth noting that using these apps still requires some knowledge in CSS on your part. Scroll to the end of this article if you want to see a solution that requires no coding whatsoever.

1. Custom CSS Pro

  • A tool that allows adding custom CSS code.
  • 4.7 ⭐️
  • From $1.49/month. 3-day free trial.

Custom CSS Pro allows anyone with knowledge of CSS code to quickly and easily change how your Shopify website looks.

And if you are looking for further control over your Shopify website, the pro version allows you to take advantages of being able to edit any available theme on your store.

2. Custom CSS Editor & Minify

  • Add custom CSS anywhere to custom your shop | Easy & Fast
  • 5.0 ⭐️
  • Free

Custom CSS Editor & Minify is fully integrated inside Shopify. Once it is added, you can simply add custom CSS to all themes on the market.

It gives you the power to change your website without touching .liquid files. As a result, it enjoys an impressive 5.0-star rating and many of them identify the versatile and user-friendly interface as a distinguishing feature.

3. Code Customizer

  • Add custom HTML, CSS, JS code everywhere
  • 5.0 ⭐️
  • Free to install

You can add scripts such as Google Analytics, Facebook Pixel, styles, verify header tags and more easily in seconds.

Code customizer also allows you to add any HTML code to the pages, collections, product pages.

4. Custom CSS & JS

  • Add custom CSS and JS code to your shop.
  • 5.0 ⭐️
  • Free

Custom CSS & JS is designed for those who would like to add CSS or JS to their Shopify website. Styles and Javascript files created with this plugin will be included in your theme files. This results in fast loading times for your customers.

5. Fontify

  • Changing the font for your store has never been easier.
  • 4.9 ⭐️
  • $10 for the first 15 custom fonts. From the 16th font will be $5 for the next 10 fonts. 

With Fontify, all you need to do is to choose a font, select the elements which you want to use for it.

Then, the app will do the rest.

6. AMP by Shop Sheriff

  • AMP (Google AMP, Amped pages, Speed & SEO with the AMP cache)
  • 5.0 ⭐️
  • Free plan available. Additional charges may apply.

AMP by Shop Sheriff helps you adjust custom CSS on your Shopify AMP like padding, margin, colors, fonts, for any elements on your page. Note: AMP is only applicable if users access your website through Google on mobile.

7. Add <HEAD> Code

  • Easily add custom code to the HEAD section of your store.
  • 5.0 ⭐️
  • $1.99/month. 3-day free trial.

Add Head Code allows you to put custom CSS code into the head section of your store without any coding knowledge.

8. XO Insert Code

  • Add custom code to <head>, after <body> and before </body>
  • 5.0 ⭐️
  • Free plan available. 3-day free trial.

XO Insert Code is a great solution that gives you the ability to add code to your Shop pages, including adding scripts, changing styles, editing custom CSS, installing Google Analytics, setting up Facebook Pixel in Shopify, verify header tags and more.


An even easier way to customize your Shopify store

Even when you have a good understanding of Shopify custom CSS, or you’re already using apps to speed things up, changing the code of a Shopify theme can still be tricky.

The EcomSolid Shopify theme offers an alternative way to instantly customize every aspect of your store. It comes with a ready-to-use visual editor that gives you infinite customization power.

Things that you normally have to edit via custom code can now be changed at a click of a mouse.

Especially if you want to custom your Shopify store even further, Live chat with us. We will guide you to make your store look exactly the way you want.

EcomSolid
skyrocket your sales to higher levels with ecomsolid

By Kate Ta

Kate Ta is a content writer and marketing specialist at EcomSolid. She helps the brand create awesome content that drives engagement, and loves reading books in her free time.

Leave a Reply

Your email address will not be published. Required fields are marked *