Change add to cart text colour - PRESTIGE theme

Store Design

Topic summary

Issue: Users want to change the “Add to Cart” button text color in Shopify’s Prestige theme to a specific hex color (originally #DDBB8B).

Solution Provided:

  • Navigate to Online Store → Theme → Edit code
  • Open assets/theme.css file
  • Add CSS code at the bottom:
.ProductForm__AddToCart {
  color: #DDBB8B;
}

Additional Customizations:

  • To change button background color, use background-color: #yourcolor;
  • For stubborn cases where default settings override, add !important flag:
.ProductForm__AddToCart::before {
  background: #35E9C3 !important;
}

Common Issues:

  • Some users report the code only works on featured products (front page) but not on individual product pages
  • Theme default button settings may override custom CSS, requiring !important declarations
  • Multiple users confirmed the solution works after proper implementation

Status: Resolved for most users, though some edge cases require additional troubleshooting with !important flags or alternative CSS selectors.

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

Hi,

I would like to change the text colour on the add to cart button to hex DDBB8B

The text colour changes to this on hover but i would like it to display this colour as standard.

https://www.hanrattyjewellers.com/products/citizen-mens-promaster-diver-eco-drive-blue-strap-watch-127

site not live - password to view - JOLENE456

lkdrumhirk_0-1620656447301.png
lkdrumhirk_0-1620656447301.png1494Ă—814 125 KB

2 Likes
2

@lkdrumhirk

sorry for this issue can you please try this

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.ProductForm__AddToCart {color: #DDBB8B;}
1 Like
3

@lkdrumhirk

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

.ProductForm__AddToCart {
    color: #DDBB8B;
}

Thanks!

1 Like
4

thanks so much, if I want to change the background colour (the button itself) to a different hex colour what line do I use?

1 Like
5

hello @lkdrumhirk if I want to change the background colour (the button itself) to a different hex colour you can use following code and then you change value of background-color yourself

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

.ProductForm__AddToCart {
   
    background-color: #6f5a3f;
}
2 Likes
6

@lkdrumhirk

yes you can do it just change the Hexa code

7

Hi,

I am also using Prestige and this is not working for me.

It changes the color of the add to cart button for the first page when displaying a product one the front page - but there is no change on the product page itself.

What do I do?

8

hello @theithei

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

1 Like
9

Hi, my website is: https://www.pulseofart.de/ (no password).

On the first page I display “1x Kartenständer aus Holz” and the “Add to Cart” Button (In German: Zum Warenkorb hinzufügen) is grey.

If you visit any product page (for example: https://www.pulseofart.de/collections/grusskarten/products/grusskarte-papa) the “add to cart” button is grey.

I want both of these colors changed to the same green color (#539E3C).

Thank you in advance for your help!

10

hello @theithei

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.ProductForm__AddToCart::before {
    background: #539E3C !important ;
}
2 Likes
11

It worked, thank you SO much!

12

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance

1 Like
13

what’s the code for add to cart button?

14

hello @yaseene

do you want to add add to cart button in which section let me know

15

Hi, this code doesn’t seem to work. No matter what I do, it appears the theme’s default button settings override the add-to-cart button settings in my .css. Here’s what I have added to our theme.scss.liquid file at the end:

Our theme’s primary button colour: #be8b70

Intended add-to-cart button colour: #7b895b

Code I’ve added:

.ProductForm__AddToCart {
background: #7b895b !important;
background-color: #7b895b !important;
border-color: #7b895b !important;
}

16

The page is: bangalorewatchco.in/products/pitch

17

Hello,

I also would like to change in my Theme (Prestige) the colour of the cart button. Can you please help me with that? I tried the way you said it in the upper article, it worked well for the colour of the text. I need to change the colour of the button (without animation). Is there a way?

Thank you!

Elisabeth

18

I’m happy to help with that! To change the color of the cart button in the Prestige theme, here’s what you can do:

  1. Go to Online Store > Themes in your Shopify admin.
  2. Find the Prestige theme and click on Customize.
  3. In the theme editor, navigate to Theme Settings and then go to Colors.
  4. Look for the button color option, which may be labeled something like Primary Button or Accent Color, and select the color you’d like for your cart button.

If you don’t see a specific option for the cart button color, you may need to add a bit of custom CSS. To do this:

  1. Go to Actions > Edit Code next to your Prestige theme.

  2. Open the Assets folder and click on theme.scss.liquid or theme.css (depending on your theme version).

  3. Add this CSS at the bottom of the file:

    css

    Copy code .cart-button { background-color: #yourcolorcode; /* replace with your color */ }

This should change the button’s background color without affecting any animation. Let me know if this helps, or if you need further adjustments!

https://coveted.com Coveted.com tried to implement this but they’re thinking of an alternative solution