Hello, im having a little trouble, ive tried changing colour of my “Add to cart” buttons, but i turns out that “Solid button background” isn’t working for them, Background works. Is there any way that i can change background of those button without changing entire background colour?
@Pokeloot Thanks for reaching out to Shopify community with your concern. We can definitely change the color by using CSS code. Can you please provide the URL of your store and if it is password protected please share the password too. Also, let us know which color you want for the button? Thanks
@Pokeloot can you please share your website product link? we will need to use the custom css
Hii @Pokeloot,
Step 1: Check Theme Color Hierarchy (Most Common Cause)
Go to:
Online Store → Themes → Customize → Theme settings → Colors
Primary / Solid button background
Primary button text
Secondary / Outline button
Accent color
If “Solid button background” isn’t working, your Add to Cart button is likely using:
Primary button
Accent color
Or a section-level override
Step 2: Check Product Page / Section-Level Overrides
Some themes override button colors per section, especially on:
Product pages
Featured product sections
Quick add / buy boxes
How to check:
Go to Customize
Open a Product page
Click the Product information section
Look for:
Button color
Color scheme
Accent color
Style selector
If a color is set here, it will override global theme settings.
Step 3: Apply a Targeted CSS Override (Reliable Fix)
If your theme doesn’t expose the correct setting, use a small CSS override that affects only the Add to Cart button, not the entire site background.
Steps:
Go to Online Store → Themes → Edit code
Open Assets → base.css / theme.css / global.css
Add this at the bottom:
/* Add to Cart button background override */
.product-form__submit,
button[name="add"] {
background-color: #YOURCOLOR !important;
border-color: #YOURCOLOR !important;
color: #ffffff !important;
}
Step 4: Check for App Conflicts
If you’re using:
Upsell apps
Bundle / quantity break apps
Sticky add-to-cart apps
They may inject their own button styles, overriding theme colors.
How to confirm:
Temporarily disable the app
Refresh the product page
Check if the button color changes
If it does, the app CSS needs to be overridden instead.
In many Shopify themes, “Solid button background” controls only primary button styles, while Add to Cart buttons are often styled separately for conversion and consistency. That’s why the background option works, but the solid button setting does not apply to them.
You can change the background color for the Add to cart Button with the help of Add to Cart selector which is: product-form__submit
With this class you can change the background or make any change.
Like I’ve made the change below:
.product-form__submit {
background-color: red !important;
}
You can made any adjustment based on your need.
Hi @Pokeloot
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
None of above were working for me. I managed to get to my point with chaning global background setting in this theme to the colour i want my button to be, and then i changed whole background in css
i had the same question and i found a way to fix it today. Im not sure if this is for every theme, but i am using Rise at the moment.
Online Store → Themes → … → Edit Code
What final snippet should look like
class=“product-form__submit button button–full-width {% if show_dynamic_checkout %}button–primary{% else %}button–secondary{% endif %}”
it took me over 2 hours to find this. im not sure why its not in base.css or really anywhere else.