Prestige theme: How to change the color of the ATC button on desktop AND mobile?

Store Design

Topic summary

A user is experiencing an issue where custom CSS code successfully changes the Add-to-Cart (ATC) button color on desktop but not on mobile for their Prestige theme store.

Problem Details:

  • The user applied CSS targeting .ProductForm__AddToCart class
  • Changes only appear on desktop view
  • Mobile version retains default styling

Proposed Solutions:
Multiple community members provided similar fixes:

  • Add CSS code to theme.liquid file before the closing </body> tag
  • Target .ProductForm__AddToCart.Button.Button--secondary.Button--full class
  • Use !important flags to override existing styles
  • Suggested code includes background-color and text color properties

Status:
The original poster thanked respondents, suggesting one of the solutions worked. The key appears to be using more specific CSS selectors with the full button class chain and placing the code in the correct location within theme.liquid.

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

Hi, I tried to change the color of my ATC button on the product pages but it is only changed on desktop, not on mobile.

Store is: www.nonu.shop

The code I used is:

.ProductForm__AddToCart {
    background-color: #72a838 !important;
    color: #ffffff !important;
    transition: 0.5s;
}
2

Hello @Startup87

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
.ProductForm__AddToCart.Button.Button--secondary.Button--full {
background-color: #72A838 !important;
color: white !important;
}
</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

3

@Startup87
Hello,

.ProductForm__AddToCart.Button.Button--secondary.Button--full {
	background-color: #30302e !important;
        color: #fff !important;
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This

oscprofessional_0-1674042673596.png
oscprofessional_0-1674042673596.png1442×895 162 KB

Mobile View

oscprofessional_1-1674042760029.png
oscprofessional_1-1674042760029.png656×618 17.5 KB

4

Thank you!

5

@Startup87
add below code in theme.liquid file before closing tag