{"id":9461,"date":"2022-07-22T03:43:49","date_gmt":"2022-07-22T07:43:49","guid":{"rendered":"https:\/\/onecommerce.io\/blog\/?p=9461"},"modified":"2023-08-14T23:49:31","modified_gmt":"2023-08-15T03:49:31","slug":"shopify-custom-css","status":"publish","type":"post","link":"https:\/\/onecommerce.io\/blog\/2022\/07\/22\/shopify-custom-css\/","title":{"rendered":"How to Safely Add Shopify Custom CSS to Your Theme in 2023"},"content":{"rendered":"

Shopify is a platform with a lot of flexibility, and one of the ways you can customize your store is with CSS.<\/span><\/i><\/p>\n

CSS (cascading style sheets)<\/i><\/b> is a code language that tells web browsers how to style and format HTML elements.<\/span><\/i><\/p>\n

Shopify\u2019s default themes are already pretty great, but sometimes you might want to make some changes to make your store stand out.<\/span><\/i><\/p>\n

That\u2019s when<\/span><\/i> Shopify custom CSS <\/i><\/b><\/a>becomes a good choice!<\/span><\/i><\/p>\n

Maybe you want to change the color of your themes, add a custom font, or <\/span><\/i>remove Powered by Shopify<\/span><\/i><\/a> from the footer\u2026 Whatever your vision is, CSS can help you make it a reality.<\/span><\/i><\/p>\n

We\u2019ve found a few ways you can add Shopify custom CSS to your theme. Let’s see which they are, and which is the best and least difficult option for you.<\/span><\/i><\/p>\n

Sounds good? Let\u2019s go for it!<\/span><\/p>\n

What is the best way to add Shopify custom CSS?<\/b><\/h2>\n

The Shopify platform is known for its large variety of store themes, both free and paid. This is one of its biggest strengths, as it allows store owners to find a theme that perfectly suits their needs. However, sometimes you may need to slightly adjust the layout or change the colors.\u00a0<\/span><\/p>\n

For some of these changes (especially the advanced ones), you will need to custom the CSS file of the theme. You can also use custom CSS to edit the design of the third-party apps installed on your store. This flexibility and customization are one of the reasons why Shopify is such a popular eCommerce platform.<\/span><\/p>\n

So, let\u2019s take a look at the<\/span> 4 options<\/b> below to know which is the best to add Shopify custom CSS to your theme and make your store stand out from others.\u00a0<\/span><\/p>\n

Option 1: Edit the Shopify theme design<\/b><\/h3>\n

If you want to make changes to your website that are more than just cosmetic, you might want to consider editing the CSS for your Shopify theme. CSS is the code that controls the look and feel of your website, and by editing it, you can make changes that will be applied across your entire site.<\/span><\/p>\n

But here, we have a more comfortable way to edit your theme, and that is the <\/span>built-in theme customizer<\/b>.<\/span><\/p>\n

\"Shopify

The built-in theme customizer is a great way to change standard things without having to edit the CSS.<\/p><\/div>\n

The built-in theme customizer is a great way to change standard things like colors, fonts, and some layouts without having to edit the CSS. It offers a variety of options depending on the theme you are using, so you can usually find what you’re looking for. Plus, it’s a lot easier to use than CSS, so it’s worth checking out if you’re not sure how to add or edit CSS.<\/span><\/p>\n

Additionally, one downside of editing CSS is that your adjustments will be lost if your theme is updated. Except if you’re using a theme with an advanced theme updater, which not many themes have.<\/span><\/p>\n

Due to this,\u00a0 make sure to back up your code so you can apply it again after a new update whenever you make CSS changes.<\/span><\/p>\n

Option 2: Add or edit Shopify custom CSS through your theme editor<\/b><\/h3>\n

This is <\/span>the most common and the least difficult option<\/b> that we are going to discuss in this article.<\/span><\/p>\n

The main character is to add or edit the CSS directly in the existing CSS file located in the Shopify theme code. This file is usually called <\/span>theme.scss.liquid <\/b>or<\/span> base.css<\/b> in the new Shopify 2.0 themes (i.e., Dawn).\u00a0<\/span><\/p>\n

You can find it by going to your <\/span>store admin > Online Store > Themes > Actions > Edit code > Assets folder<\/b>.<\/span><\/p>\n

Once you open up the CSS file, you can edit or add any CSS you want.\u00a0<\/span><\/p>\n

\"Shopify

The most common and the least difficult option is add Shopify custom CSS through your theme editor<\/p><\/div>\n

However, one disadvantage of this method is that if you change or update the theme, your custom CSS will be lost. Therefore, it’s a good practice to put all your customizations in a section called “<\/span>Custom CSS<\/b>” or something similar to avoid losing your CSS. Then, you can just copy and paste it into the new theme if you need to.<\/span><\/p>\n

So, how to do option 2?<\/span><\/i><\/p>\n

Don\u2019t worry, we will mention it in the following section.<\/span><\/p>\n

Option 3: Create a new Shopify custom CSS file<\/b><\/h3>\n

Creating your own CSS file is a great way to customize your shop’s look and feel. By creating a new CSS file, you can easily connect your CSS file to your theme. This way, if you update or change your theme, you won’t have to worry about losing your customizations.\u00a0<\/span><\/p>\n

To create your own CSS file, go to the store admin, then <\/span>Online Store<\/b> > <\/span>Themes <\/b>> <\/span>Actions <\/b>> <\/span>Edit Code<\/b>. In the Assets folder, click on Add a new asset. On the pop-up, select Create a blank file and name it whatever you want.<\/span><\/p>\n

\"Shopify

By creating a new CSS file, you can easily connect your CSS file to your theme<\/span><\/p><\/div>\n

When you have read this far, you will probably understand that this option is similar to option 2.\u00a0<\/span><\/p>\n

Indeed, both ways have a similar implementation, but they are different in the title. You can add\/edit or create a new Shopify custom CSS through the theme editor.<\/span><\/p>\n

Therefore, we have combined these options so that you can flexibly choose the right option according to your needs.\u00a0<\/span><\/p>\n

Option 4: Add or edit the Shopify custom CSS via a third-party app<\/b><\/h3>\n

The last method for adding custom CSS to your Shopify store requires the installation of a <\/span>third-party app<\/a><\/strong>. While this may seem like an extra step, it actually provides a big advantage.\u00a0<\/span><\/p>\n

All the custom CSS entered into the app is independent of your current theme. In other words, you can change or update themes as you like without affecting your custom CSS. There are a few apps that offer this functionality, and some of them are even free.\u00a0<\/span><\/p>\n

\"Shopify

Add Shopify custom CSS via a third-party app may seem like an extra step, it actually provides a big advantage.\u00a0<\/span><\/p><\/div>\n

The only downside is that every app has some impact on the store\u2019s performance. Especially if the CSS is loaded via a different file. So, you need to consider carefully which way is the best for your store before making a decision.<\/span><\/p>\n

Overall, <\/span>the best way to add custom CSS to your Shopify store is through the theme editor<\/b>. The theme editor is a code editor built into the Shopify platform, where you can make changes to your store\u2019s code.\u00a0<\/span><\/p>\n

Tweaking the code sometimes can lead to unexpected results. But, you are not alone, even CSS gods make mistakes.<\/span><\/p>\n

Just remember, when making changes to your code, it\u2019s always a good idea to create a backup of your theme first. That way, if something goes wrong, you can always revert to the original.<\/span><\/p>\n

Back up your Shopify theme<\/b><\/h2>\n

As mentioned earlier, adding Shopify custom CSS to your store could be a complicated process. First, you should find out if there is any <\/span>other way to edit your Shopify Theme<\/span><\/a> without editing CSS.\u00a0<\/span><\/p>\n

Using a store builder app or an advanced customizable theme might do the trick. This will allow you to revert your shop to its current state if you make any mistakes.<\/span><\/p>\n

\"Shopify

it\u2019s always a good idea to create a backup of your theme first<\/p><\/div>\n

But even <\/span><\/i>CSS experts make mistakes<\/i><\/b>. How can you be confident that you are not making any mistakes when adding <\/span><\/i>Shopify custom CSS<\/i><\/b> to your store?<\/span><\/i><\/p>\n

So, if you have any reason to believe that you might inadvertently make an error in your CSS, we strongly advise backing up your store.<\/span><\/p>\n

This way, when anything goes wrong, you just need to go back and don\u2019t have to start from scratch.<\/span><\/p>\n

A quick guide to backup your Shopify theme in just 2 steps<\/b><\/h3>\n

To back up the Shopify theme of your online store, you can follow these 2 simple steps.<\/span><\/p>\n

Step 1: Negative to your Theme Page<\/b><\/h4>\n

To begin, you need to log into your <\/span>Shopify Admin<\/b><\/a>, go to \u201c<\/span>Online Store<\/b>\u201d in the left toolbar, and click on \u201c<\/span>Themes<\/b>\u201d from the dropdown.<\/span><\/p>\n

It would then take you to the Theme page by default.<\/span><\/p>\n

\"Shopify

it\u2019s always a good idea to create a backup of your theme first<\/p><\/div>\n

Step 2: Make a copy of the current theme<\/b><\/h4>\n

On your<\/span> Dawn<\/b>, click on \u201c<\/span>Actions<\/b>\u201d then choose \u201c<\/span>Duplicate<\/b>\u201d from the dropdown, <\/span>and you have finished backing up your Shopify theme.<\/span><\/p>\n

\"Shopify

Click on \u201cActions\u201d then choose \u201cDuplicate\u201d<\/p><\/div>\n

Once you\u2019ve done, the duplicate theme will appear on the Themes page.\u00a0 It is named<\/span> Copy Of + the name of the theme<\/b> that you duplicated.\u00a0<\/span><\/p>\n

In case you don\u2019t want this name, you can rename it by clicking on \u201c<\/span>Rename<\/b>\u201d from the <\/span>Actions <\/b>button.\u00a0<\/span><\/p>\n

\"Shopify

Click on \u201cRename\u201d from the Actions button<\/p><\/div>\n

Great! Now you know how to backup your theme. I\u2019m pretty sure that you are ready to jump into any other actions to your current theme.<\/span><\/p>\n

How to add Shopify Custom CSS to your theme<\/b><\/h2>\n

First, let’s learn how to <\/span>edit Shopify Custom CSS in step 1 <\/b>and then we move on to <\/span>add custom CSS in step 2.<\/b><\/p>\n

Step 1:\u00a0 Edit your Shopify Custom CSS<\/b><\/h3>\n

Editing the CSS inside the existing CSS file located in the theme code is the most common way to edit CSS. <\/span>You can find it by going to your<\/span> Shopify admin > Online Store > Themes > Actions > Edit code > Assets folder.<\/b><\/p>\n

You will see a file under \u201c<\/span>Assets<\/b>\u201d which is usually called <\/span>theme.scss.liquid<\/i><\/b> or <\/span>base.css<\/i><\/b> in the new Shopify 2.0 themes (i.e., Dawn). <\/span>From here, you can start to edit your Shopify Custom CSS<\/strong>.<\/span><\/p>\n

\"Shopify

Shopify admin > Online Store > Themes > Actions > Edit code > Assets folder.<\/p><\/div>\n

Plus, if you’re looking for a quick and easy way to edit your CSS file, you can look no further than your own personal stylesheet.\u00a0<\/span><\/p>\n

This method is straightforward, and it’s easy to keep track of all the changes you’ve made. <\/span>However, the downside is that it’s not as full-proof as some of the other methods out there.\u00a0<\/span><\/p>\n

If you’re looking for a long-term solution, you might want to consider adding your own custom CSS. This will make it a lot easier to keep track of all the custom code you’re adding, but it will be a bit harder to set up.<\/span><\/p>\n

Step 2: Add a Shopify custom CSS file<\/b><\/h3>\n

To add a Shopify custom CSS, you will have to click on \u201c<\/span>Add a new asset<\/b>\u201d under the <\/span>Asset folder<\/b> shown below.<\/span><\/p>\n

From here, you will see 2 options: \u201c<\/span>Upload a file<\/b>\u201d or \u201c<\/span>Create a blank file<\/b>.\u201d<\/span><\/p>\n

Click \u201c<\/span>Create a blank file<\/b>\u201d and name it whatever you want (for example, custom.css).<\/span><\/p>\n

\"Shopify

Click \u201cCreate a blank file\u201d and name it whatever you want<\/p><\/div>\n

Once you have the new CSS file created, you can add your custom CSS.<\/span><\/p>\n

The important part is to “call” from your theme, so it’s used. To do so, go to the Layout folder and open a file called <\/span>theme.liquid<\/b>.\u00a0<\/span><\/p>\n

Add the following liquid code to the <\/span><head><\/b> section where “<\/span>custom.css<\/b>” is the file name of your custom CSS file. Once you have updated or changed your theme, you need to copy this code to the file <\/span>theme.liquid<\/b> again.\u00a0<\/span><\/p>\n

Now navigate to your <\/span>theme.liquid<\/b> using the search bar.<\/span><\/p>\n

Click on the file to open it, and locate a line that looks similar to this code below:<\/span><\/p>\n\n\n\n
\n

<link rel=”stylesheet” href=”{{ ‘component-predictive-search.css’ | asset_url }}” media=”print”onload=”this.media=’all'”><\/b><\/p>\n

(the easier way is to Ctrl + F and enter \u201d<\/span><\/i>stylesheet<\/i><\/b>\u201d)<\/span><\/i><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

U<\/span>nderneath this line, paste this code to your theme.liquid file:<\/span><\/p>\n\n\n\n
\n

<link rel=”stylesheet” href=”{{ ‘custom.css’ | asset_url }}” type=”text\/css”><\/b><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\"Shopify

paste this code to your theme.liquid<\/p><\/div>\n

Keep in mind that the file name <\/span>needs to match the name of the CSS<\/b> file that you just uploaded<\/span><\/p>\n

Your CSS file will remain in your assets folder, even if you switch themes. You’ll just need to copy this code into your new theme’s theme.liquid file.<\/span><\/p>\n

Great! No more steps and you finally know how to add or edit your Shopify custom CSS!<\/span><\/p>\n

Final thoughts<\/b><\/h2>\n

Shopify<\/a> themes are already styled for you, but you may want to customize your store even further by adding your own CSS. This can be a great way to really make your store stand out from the crowd and give it that extra bit of personality that you’re looking for.<\/span><\/p>\n

If you’re not sure how to add<\/span> Shopify custom CSS<\/b> to your store, several online resources can assist you in getting started with this article.<\/span><\/p>\n

Once you’ve added your CSS, you will be able to fine-tune your store design until it’s exactly what you wish for. So if you’re looking to take your store to the next level, don’t be afraid to experiment with some custom CSS.<\/span><\/p>\n

 <\/p>\n

\n
\n

Hey, want to know more about\u00a0OneCommerce<\/strong>?\u00a0CHECK IT OUT<\/a>!\u00a0<\/em><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

You can add Shopify custom CSS to your online store and learn how to change the look of your store to match your branding. <\/p>\n","protected":false},"author":8,"featured_media":18617,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts\/9461"}],"collection":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/comments?post=9461"}],"version-history":[{"count":11,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts\/9461\/revisions"}],"predecessor-version":[{"id":14087,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts\/9461\/revisions\/14087"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/media\/18617"}],"wp:attachment":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/media?parent=9461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/categories?post=9461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/tags?post=9461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}