Clean, Simple but Powerful

A painless way to change the color of Shopify Add to cart button in 5 minutes (step-by-step tutorial)


  • By Editor Team
  • 13 Sep, 2022
  • Tutorial
  • 7 Min Read
Last Update: 13 Sep, 2022

Are you looking for ways to change the color of the Shopify Add to cart button?

Then you are not alone.

When customizing product pages, a significant number of people leave the cart button as it is. Even when its color doesn’t match the brand or item in question.

Psychologically, there’s no doubt that color can have a profound effect on people.

Mary Fernandez from OptinMonster

With the right color, some Shopify owners have experienced over 30% rise in conversion rate. So, there should be no doubt about the importance of choosing and testing the color of your “add to cart” buttons. That’s why I have prepped this step-by-step tutorial to spare you frustration.

Changing the “ATC” button color from the theme editor

This is the simplest way to change the color of the cart buttons in your store. For this, just take the following steps:

Step-1

Go to the “Online Store” page after logging in to your Shopify dashboard.

Change the color of Shopify add to cart button

Step-2

Next, click on the “Customize” button shown in the screenshot below.

Customize

Step-3

Clicking on the “Customize” button will take you to the preview of the theme you have chosen for your Shopify online store. Once you are there, click the “Home page” button on the center top. From the drop-down menu, choose “Products”.

Choose-Products

Step-4

From the “Products” section, choose “Default product”. Depending on the theme, you may see a list of products present in your store. Since I am using a fresh Shopify account, mine is showing “Default product”.

choose-Default-product

Step-5

Once you are on the “Default product” page, click on the “Theme settings”. Doing so will reveal the theme settings options (marked by the red box).

Theme-settings

Step-6

See the “COLORS” option at the top inside the red box? You will need to click that.

Step-7

In the colors panel, you will see the colors of background, headings, body text, buttons, button labels, and everything else. You will need to change the color of the “Buttons”. The color code is in hex format.

Color-Buttons

To change the color of the “ADD TO CART” button, you will need to place the hexa code of your preferred color.

You can find the code at the HTML Color Picker page from W3 Schools.

If you find it a hassle, then just relax. You can also do it by clicking the rectangular black box on the left of the text “Buttons” (shown in the image below). 

Buttons

Choose any color you want using the rainbow slider and the color picker and the button color will change.  For the purpose of this tutorial, I have chosen orange color. You can see the new button color in the video below.

Change the color of Shopify add to cart button using code

The Brooklyn Shopify theme editor doesn’t let you change the background color of the ATC button. But there is a way to do it.  Disclaimer, it involves just 1 line of CSS code. Just follow the steps below.

Step-1

Open the product page preview by following steps 1-4 of the method above. If you are using the Chrome browser, then press Ctrl+Shift+I. The HTML code of the page will open in a window on the right or at the bottom of the page.

Source-Code

The same will happen if you right click on the page and choose “Inspect”.

Inspect

Step-2

Now, click on the tiny arrow (shown in the image). You can also press “Ctrl+Shift+C”.

tiny-arrow

Step-3

You will now be able to choose the element on your Shopify product page that you want to inspect. Hover your mouse to the Add to Cart button and click it. It will show you the code in the window below.

Add-to-Cart-button

The “ADD TO CART” button has a type called “btn–secondary” Locate this text in the yellow box and copy it. it should say something like “.bt–secondary”.

Step-4

Copied the text? Now you will need to go to the theme files by navigating to the “Edit code” option.

Edit-code-1

Step-5

Once there, you will need to find the “theme.scss.liquid” file. This is where all the CSS codes of your Brooklyn Shopify theme are stored. Depending on your theme, this file may also be called “theme.css”.

Now press Ctrl+F to open the text search box. Remember the text “.bt–secondary” that you copied? You will need to paste it here. You can see this text highlighted yellow in the image below.

btn-secondary-code

Step-6

In this section, below the “font-size” line, add the following line: “background-color: green!important” (shown in the image below).

change color of shopify add to cart button

In place of “green”, you can put any other color. The “!important” part makes sure that the color you are putting in the code is the only color the “ADD TO CART” button gets. Since this CSS file is a global file, any change you make is implemented on all the add to cart buttons in your Shopify store.

Check-ADD-TO-CART

See! The “ADD TO CART” button is now green. If you write “orange” instead of “green”, the “ADD TO CART” button will be orange. You can see it in the video below.

There are other ways to change the add to cart button color.

You can pick this article for animate add to cart button: How to animate Shopify add to cart button easily? (Free method)

That’s true.

When you change the cart button’s color, you can see that the background of the “BUY IT NOW” button changes as well. In my next tutorial, I will show you how you can change just the button text color and font size of your Shopify ATC buttons.

I will also show you how you can make your “ADD TO CART” button larger to make sure visitors can easily notice it and click on it.

Editor Team


We are a group of WordPress experts (editorial team) from Themeim. All of these articles go through manual testing to reveal the ultimate outcome.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.