How can I change the color of only the 'Add to Cart' button in Prestige theme?

Store Design
1

Hi, I’m using Prestige theme and would like to change the colour of my ‘Add to Cart’ button only, rather than all buttons on the site. However, in my theme settings there’s only one colour option for ‘Buttons’ - is there a way to do this?

Example Product Page - https://lunacharles.co.uk/products/elena-star-studded-rattan-handbag-white-gold

Attached is a shot of the button I would like the colour changed from #3b275b to #53a264 if possible.

emmaoreilly_0-1686499323317.png
emmaoreilly_0-1686499323317.png908×798 87.9 KB

2

@emmaoreilly

Hello,

Please add the below code above in theme.liquid

online store >> edit code >> theme.liquid

.ProductForm__AddToCart.Button--primary:before{ background-color: orange!important; }

after added the given code dropdown looks like this.

shreyhweb_0-1686499791895.png
shreyhweb_0-1686499791895.png1920×558 153 KB

If our solution is helpful for you then Please like the post and tap on accepted.

If you want to discuss any further information then please contact us on our whatsapp.

We will always here for your help.

Thankyou :slightly_smiling_face:

3

Thank you!
How would I amend the border colour and the colours of the hover?

4

@emmaoreilly

.ProductForm__AddToCart.Button--primary:not([disabled]):hover{ background-color: transparent!important; } .ProductForm__AddToCart.Button--primary{ border-color: green!important; }

you can use this code and when our solution is helpful please don’t forgot like and accepted.

Thankyou :disappointed_face:

5

Hi @emmaoreilly

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Theme.css

.ProductForm__AddToCart {
    background-color: #53a264;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

6

Hi @emmaoreilly

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:

.ProductForm__BuyButtons .ProductForm__AddToCart {border-color: #53a264 !important;}

.ProductForm__AddToCart.Button–primary:before {background-color: #53a264 !important; border-color: #53a264 !important;}

Regards,

San