How to Change Add to Cart Button Color in Shopify (Easy Methods + Code Guide)

If you’re also working on customizing other elements, check our complete guide on how to customize your Shopify website.

Methods for changing the Add to Cart Button color

There are several methods for changing the color of the Add to Cart button. Some of these are listed below.

1. Change the Add to Cart Button Color using Theme Customizer
2. Change the Add to Cart Button Color using Custom CSS
3. Change the Add to Cart Button Color using Custom Coding

Method 1: Change the Add to Cart Button Color using Theme Customizer

Most Shopify themes offer customizable settings in stores that allow you to change the color of the Add to Cart button. Follow these steps to change the color using your theme customizer.

Step 1: Navigate to Online Store > Themes > Customize.

Step 2: Go to the Main Theme Settings and select colors.

Step 3: Choose the color scheme that you want to edit or create a new one.

Step 4: Change the color of the solid button background and text.

Step 5: Navigate to your Product template from the dropdown and look for the color scheme used in your product form section.

Step 6: Change this color scheme or edit this one to change the color of the Add to cart button background and text.

Step 7: Save the changes.

You may also find useful customization options in our other guides such as changing “View Cart” button color in Shopify.

Method 2: Change the Add to Cart Button Color using Custom CSS Editor

If your theme does not offer a customizable setting to change the color of your Add to Cart button, you can use custom CSS to change the color. Follow these steps to change the color using the Custom CSS.

Step 1: Navigate to Online Store > Customize.

Step 2: Navigate to the Main Theme settings tab.

Step 3: Scroll down to the Custom CSS block.

Step 4: Copy the class of your Add to Cart button using Inspect or directly from the code editor. Press Ctrl + Shift + I to open the Inspect tool.

Step 5: Add this code to your CSS block

    
        .product-form__submit {
            background: #000000 !important;
            color: #ffffff !important;
        }
    

Step 6: Save the changes.

Method 3: Change the Add to Cart Button Color using Custom Coding

If your theme does not offer a customizable setting to change the color of your Add to Cart button, you can use custom CSS to change the color. Follow these steps to change the color using the Custom CSS.

Step 1: Navigate to Online Store > Themes > Edit Code.

Step 2: Open your base.css or theme.css file, depending on the theme you are using. 

Step 3: Copy the class of your Add to Cart button using Inspect or directly from the code editor. Press Ctrl + Shift + I to open the Inspect tool.

Step 4: Add this code at the end of your CSS file. Update the color hex code to match your brand’s color palette.

    
        .product-form__submit {
            background: #000000 !important;
            color: #ffffff !important;
        }
    

Step 5: Save the changes.

Also Read: How to Remove Checkout Bag in Shopify (Step-by-Step Guide)

Conclusion  

How to change add to cart button color in Shopify is one of the quickest ways to highlight your product call-to-action and increase sales. Whether you use the Theme Customizer for a fast visual change or custom CSS for more control, you can easily match your button with your brand colors and improve your store’s overall experience.

If you need help making deeper customizations, feel free to hire our Shopify expert developers or request a complete SEO + UI optimization audit.