Can we alter the button color on product pages only in Prestige theme?

Store Design
1

Hi,

Can we change the color of the button on the product page only? When we go to the theme settings and change it, all the buttons on the site changes too.

And, can we also have another ADD TO CART Button on the bottom of the desccription?

Our shoplink: www.usandtheearth.com

mommylau_0-1617000187747.png
mommylau_0-1617000187747.png1073Ă—493 271 KB

Thanks!

1 Like
2

@mommylau - both can be done , will need css change and second will need to edit code to put button under description

1 Like
3

Hey there @mommylau ,

To change the color of the add to cart button, add the following code to your theme.css file

.ProductForm__AddToCart  {
background: green;
color: white;
border: 1px solid white;
}

You can change the values according to your needs.

To put another “Add to cart” button you’ll possibly need developer assistance, you can contact me if you need my help.

1 Like
4

Hi,

This works with my other store. But the other one, it didn’t. We’re using the same theme

https://www.chasingspringtime.com.au/collections/tops/products/plus-size-tops-plus-size-classic-blouse-navy-geo-on-cotton-lawn

This one has a transition effect and the pink that I put it only shows on the transition and when I removed the transition, it stays on BLACK color. Can you help me?

mommylau_0-1617069495877.png
mommylau_0-1617069495877.png1444Ă—800 178 KB

5

Do you remember how you removed the transition from the buttons?

6

@kagey1 - what transitions do you want to remove? can you share the page link?

7

@suyash1 https://lavishgents.com/collections/all-neckties/products/the-montgomery

On the add to cart button, you see a light streak go across the button. I’d like to turn that off. If I can turn off the button changing from blue to white when you hover I’d do that as well. But the light streak is the big problem.

8

@kagey1 - please add this css to the end of theme.scss and check, this will hide light and will keep button blue on hover

.vtl-aa-animated-atc-button .insider{display:none; visibility:hidden;}

.ProductForm__AddToCart:hover{background-color: #0e82b6; color: #fff;}
9

@suyash1 Brilliant! Thank you so much, this has been a big pain for me to find. Even the developer who installed the theme couldn’t figure it out…

1 Like
10

@kagey1 - welcome, if you have any more updates then you can contact me on email given below.