How can I modify the color of my add to cart and share buttons?

Store Design

Topic summary

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:

  • Some users report solutions only partially working (e.g., button outline remains unchanged)
  • Difficulty locating correct CSS files or button classes in theme code
  • Customizers on product pages interfering with standard CSS modifications
  • Transparent buttons making changes hard to visualize

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.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
5

Hello @NamelessTrader ,

I understand you are looking to change the ‘Add to cart’ & Share button text color.

You can implement this change by following the below mentioned steps -:

  1. First Go to Online Store → Themes → Click on Action(three dots) → Edit code.

  2. Search & Find the .css or theme liquid file of your store.

  3. Now, search for the below mentioned code and add the color property in it.

.button–full-width {
display: flex;
width: 100%;
color: black;
}

Output => https://prnt.sc/7f19-RnmFWOK

.share-button__button, .share-button__fallback button {
cursor: pointer;
background-color: transparent;
border: none;
color: black;
}

Output => https://prnt.sc/PItohedmU1La

  1. Save the changes.

I hope the solution helps you.

Please let me know if you need any assistance.

Thank you.

2 Likes