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

Store Design
1

Hi.

I have Prestige theme on my webshop. I would like to have the Add to Cart button green and therefore I changed the button color to green in the theme edit, but now discovered, that all buttons are green. Is it possible to only change the color of the Add to Cart button?

Hope someone can help me with a simple code or trick.

Best,
Mie

1 Like
2

@MieMartine

Kindly, Share your Store url, So that i can help you.

3

@MieMartine ,

Share the URL & which button you want to green ?

4

Hi!
You mean this: https://www.alemonstory.dk/ or https://alemonstory-dk.myshopify.com/ ? :slightly_smiling_face:

5

@MieMartine

which button you want to be in green ?

6

@MieMartine

.Button--primary:before{
    background-color: #9bba86 !Important;
}

Add this code in the bottom of theme.css file.

7

I would like the TILFØJ TIL KURV button to be this green: #9bba86 (it is black right now).

addtocart2.PNG
addtocart2.PNG1230×839 123 KB

8

Will this make the TILFØJ TIL KURV button green #9bba86. I have replied with a picture, so you can see which button that must be green :slightly_smiling_face:

9

@MieMartine ,

.Button--primary:before, .shopify-payment-button__button--unbranded:before, .spr-summary-actions-newreview:before, .spr-button-primary:not(input):before {
    background: #9bba86;
}

Add this code in the bottom of theme.css file.

10

@MieMartine ,

you can take color code as per you need.

11

Oh noo I accidently think I deleted some of the last codes and now the button is black and when I press the button on my website the mouse becomes a round red thing :disappointed_face:

code.PNG
code.PNG581×234 8.12 KB

12

@MieMartine ,

.Button--primary:before, .shopify-payment-button__button--unbranded:before, .spr-summary-actions-newreview:before, .spr-button-primary:not(input):before {
    background: #9bba86;
}
13

Can you see if I am missing some regular code? I am worried that I accidently deleted some of the codes in theme.css bottom when I put in your code :disappointed_face:

14

Thank you so much for helping. I am worried that I accidently deleted some of the code in the theme.css bottom, when I was trying out your codes. Can you see if it looks ok? I put in a code for the color but suddenly the color is not showing :disappointed_face:

code.PNG
code.PNG581×234 8.12 KB

15

It does not work. Do you know why?

code3.PNG
code3.PNG1198×198 11.7 KB

16

@MieMartine ,

Mark it as an !important

17

Still does not work - the button is still black. I am afraid that I deleted something important?

code4.PNG
code4.PNG1181×120 8.49 KB

18

@MieMartine ,

oscprofessional_0-1655119433051.png
oscprofessional_0-1655119433051.png1568×779 153 KB

19

Yes found the missing code in a copy of the theme! So it works. Thank you so much for helping! Is it possible to remove the black line around the green button?

20

@MieMartine ,

button.ProductForm__AddToCart.Button.Button--primary.Button--full {
    border: 0;
}

use this