Changing the ATC color and text color on impulse theme

Store Design

Topic summary

Issue: Changing Add to Cart (ATC) button colors in the Shopify Impulse theme.

  • The original poster sought to make the ATC (Add to Cart) button’s background a light green and the text white, noting “secondary button” as the theme’s class.
  • A helper provided a CSS snippet to add at the bottom of assets/theme.css targeting .add-to-cart.btn–secondary, setting border and background to #8fc1a2 and text to white. This successfully resolved the ATC button color change.

Follow-ups:

  • Request to change the Apple Pay button from black to dark blue. No working solution or code was provided; this may be limited by payment button styling controls.
  • Another participant asked how to change the ATC hover color; helpers requested a store URL (and password if protected). The URL onlyallure.com was shared; solution pending.
  • A separate participant reported that adding the provided code disrupted the theme layout and asked how to adjust the ATC button without affecting the entire theme; no fix posted yet.

Status: Initial ATC color issue resolved; hover and Apple Pay color changes remain open.

Summarized with AI on February 22. AI used: gpt-5.
1

Hello Everyone,

I am having such a hard time and its taking forever to figure out how to change the color of my ATC button. You’d think that these themes, especially the paid ones where you pay $200 for a theme would have an option to change the color of it since its one of the most important things in the experience of a customer… Anyways.

I tried inspecting the element and saving it and that didn’t work, in fact, I almost ruined everything by changing something else, found out I just saved the mobile look so I switched it back to responsive. Its just crazy to me because you basically have to have a degree at this point to figure this stuff out. I have an associates in Web Design and Multimedia and I can’t even figure it out

I know that there is a line of code you can throw at the bottom of the theme code, I know my themes name for the atc isnt add to cart its secondary button I believe. If someone here could help me out it would be greatly appreciated. I need to be able to put the color code in by the way.

Thanks,

Sam

2 Likes
2

@spolesak

Please provide a screenshot of which color you would like to change and also provide your store url.

Thanks!

3

spolesak_0-1615775813246.png
spolesak_0-1615775813246.png1775×1347 176 KB

ocean-works.org is my url, I want the text to be white, and the background to be that lighter green color.

Thanks DMW!

1 Like
4

@spolesak

Please add the following code at the bottom of your assets/theme.css file.

.add-to-cart.btn--secondary {
border: 1px solid;
border-color: #8fc1a2 !important;
background-color: #8fc1a2 !important;
color: #ffff !important;
}

Let me know if this works.

Thanks!

4 Likes
5

YOU ARE MY HERO,

While we are at it, what is the code to change this apple pay thing from black to a different color? If I had a choice it would be dark blue. Thank you!!!

image0 (2).jpeg
image0 (2).jpeg828×1792 169 KB

2 Likes
6

@spolesak

My side looks like this.

buy-it-now-button.jpg
buy-it-now-button.jpg498×559 28.4 KB

1 Like
7

Made my night thank you, I’ve been working tirelessly on my site all weekend and this was a big roadblock, thank you so much for helping me out, BIG RELIEF!

2 Likes
8

@spolesak

It’s my pleasure to help you.

9

Thank you! How do I also change the color for when the mouse hover overs ATC button?

1 Like
10

@Karley202

Please share your store URL.

11

hello @Karley202

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

12

onlyallure.com

13

@Kinjaldavra onlyallure.com

14

Hello, every time I try to add your code either at the body of the made .add-to-cart.btn–secondary line I am sending the entire theme into the following screenshot. How can I adjust the Add to cart button without effecting the entire theme?