Re: issues with changing the colour of buy it now/add to cart button

Solved

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

saidabs23
Excursionist
18 0 6

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.

 

14761-79008-69244-4412-30767.png

Accepted Solution (1)
Asad24
Shopify Partner
180 36 33

This is an accepted solution.

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;

}

Asad24_0-1698834903165.png

 

banned

View solution in original post

Replies 10 (10)

Moeed
Shopify Partner
6719 1814 2198

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 </body> tag

<style>
button#AddToCart {
    background: black !important;
    color: white !important;
}
.shopify-payment-button__button:not(.shopify-payment-button__button--branded) {
    background: black !important;
    color: white !important;
}
</style>

RESULT:

Moeed_0-1698824624567.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


saidabs23
Excursionist
18 0 6

Hi, 

 

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

 

Screenshot 2023-11-01 at 12.54.40.png

Made4uo-Ribe
Shopify Partner
9846 2341 2936

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:
  • Made4uoRibe_0-1698827649871.png
  • 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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
saidabs23
Excursionist
18 0 6

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

Asad24
Shopify Partner
180 36 33

This is an accepted solution.

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;

}

Asad24_0-1698834903165.png

 

banned
saidabs23
Excursionist
18 0 6

Thanks @Asad24 this worked!

saidabs23
Excursionist
18 0 6

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

 

Screenshot 2023-11-01 at 15.30.02.png

Asad24
Shopify Partner
180 36 33

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

<style>

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

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

color: white !important;

}


</style>

banned
saidabs23
Excursionist
18 0 6

Done that but i'm getting this error 

Screenshot 2023-11-01 at 16.01.11.png

Made4uo-Ribe
Shopify Partner
9846 2341 2936

You can paste it on the product.css.

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.