Main Issue:
Users need to customize the color of “Add to Cart” and “Share” buttons in their Shopify stores, primarily using the Origin and Broadcast themes. The buttons don’t match their store’s color schemes.
Primary Solutions Provided:
CSS Method: Navigate to Online Store → Themes → Edit Code → theme.liquid or base.css/style.css/theme.css file. Add custom CSS targeting button classes like .share-button__button, .button--full-width, or .payment-buttons .add-to-cart with desired background and color properties.
Specific Code Examples: Contributors shared CSS snippets to change button backgrounds (e.g., sandybrown, #ff80f00) and text colors (e.g., white, black), often requiring !important flags.
Common Challenges:
Additional Requests:
One user also asked about adding a “Back” or “Previous Page” button to product pages, which would require more complex customization or hiring a Shopify developer.
Status: Multiple users confirmed solutions worked for them, though some continue troubleshooting theme-specific issues.
Hi There
I’ve tried the above solution, but it isn’t working for me
I have an Australian store with the correct colour, can’t recall how I managed to do it on that store, but with my US store, I can’t seem to fix it.
I’m looking for the ADD TO CART to be princeton orange, with white text, as per my Aus Store.
Any help would be great.
Hi There
I’ve tried the above solution, but it isn’t working for me
I have an Australian store with the correct colour, can’t recall how I managed to do it on that store, but with my US store, I can’t seem to fix it.
I’m looking for the ADD TO CART to be princeton orange, with white text, as per my Aus Store.
Any help would be great.
My Aus website with the correct ADD TO CART colour scheme is www.radkids.com.au
M6y US Website is www.radkidsusa.com
That is weird it should be on the same buttons.
check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.payment-buttons .add-to-cart {
background: #ff8f00 !important;
color: #fff !important;
}
And save.
Thank you for the response.
The only .css in my asset folder is theme.css.liquid. I added the code to the bottom of this, but it doesn’t seem to be working.
Hi Anshul
I’ve been trying to change the colour of my ADD TO CART in my new US store, to match the colour of ADD TO CART in my Australia store, but I can’t seem to get it right.
I got the following instructions from another Shopify partner (see under the line below) but it doesn’t work for me
Are you possibly able to take a look?
That is weird it should be on the same buttons.
check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.payment-buttons .add-to-cart {
background: #ff8f00 !important;
color: #fff !important;
}
Copy
And save.
Something is completely off with my theme and I cannot find anything from the code
.button–full-width {
display: flex;
width: 100%;
Can someone take a look at my theme? It is driving me crazy that the button is transparent.
color: black;
