Issues with changing the colour of buy it now/add to cart button

[saidabs23]

Hi i’m using the Vision Theme store URL https://bubbloot.net/

The issue is when I go to Theme setting - colour and try to change the button colours. I’m having issues with changing them separately seems they are linked. For example, at the moment they have a white background and black font. If i change the background from white to black for one of the buttons, it effects the font colour of the other which changes colour to black and now can’t be seen. I don’t know what the issue is, would be grateful for some help.

[Moeed]

Hey @saidabs23

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Made4uo-Ribe]

Hi @saidabs23

You can try this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

button#AddToCart {
    background: black !important;
    color: white !important;
}
button.shopify-payment-button__button.shopify-payment-button__button--unbranded.BUz42FHpSPncCPJ4Pr_f.jjzYeefyWpPZLH9pIgyw.RWJ0IfBjxIhflh4AIrUw {
    background: red !important;
    color: white !important;
}

• And Save.

• Result:

• 

• Note: You can chane the background and color font in any color you like.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[saidabs23]

Hi,

I have done that now but both buttons are black, how can I make them separate colours, ie one white one black.

[saidabs23]

I don’t have any of these in assets - base.css, style.css or theme.css.

[Asad24]

Go to your Online Store → Customize → Settings → Custom Css
and paste this code in the custom css section

button#AddToCart {
background: red !important;
color: white !important;

}

.shopify-payment-button__button:not(.shopify-payment-button__button–branded) {
background: #0002ff !important;

color: white !important;

}

[saidabs23]

Thanks @Asad24 this worked!

[saidabs23]

Hi just realized although that worked, the code is showing at the bottom of the page. How do i fix that?

[Asad24]

to fix this you need to enclose the code inside style tag

button#AddToCart { background: red !important; color: white !important; } .shopify-payment-button__button:not(.shopify-payment-button__button--branded) { background: #0002ff !important; color: white !important; }

[saidabs23]

Done that but i’m getting this error

[Made4uo-Ribe]

You can paste it on the product.css.