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.
15

Hello @emmaf ,

I am glad the solution helps you.

Please like and accept my solution.

Thank you.