How to change Express check out button color and Add to Cart's check out button color?

Store Design
1

Dear Shopify,

We need to change the Express check-out button color and Add to Cart’s check-out button color. We cannot find anywhere to configure these button colors (We know how to change the normal check out button color)

There are two places these check-out buttons need to be changed, one on product page (when express check-out is available for the user eg: apple pay), one on ‘add to cart notification popup’ after a user adds an item to the cart and the other one is on check out page (when express payment is available). Please refer to the three screenshots.

Hope to solve this issue asap. Thank you very much.

Best regards

2

Hi @UTdisguise ,

Go to Assets > base.css and paste this at the bottom of the file:

.shopify-payment-button__button {
    background-color: #fff !important;
    color: #000 !important;
}
.cart-notification__links #cart .button {
    background-color: #fff !important;
    color: #000 !important;
}

Hope it helps!

3

Dear LitCommerce,

Thanks for the fast reply. However, I tried your solution and pasted the code to the bottom of the base.css. It still not working. The check-out button in the notification popup is still black, and the express check-out button looks weird and still black.

Looking forward to hearing from you soon.
Thanks.

4

Here is the screenshot of the cart notification

5

Hi @UTdisguise ,

Please send your site and if your site is password protected, please send me the password. I will check it.

6

Hi LitCommerce,

I changed the color by myself. Now the issue solved. But We do have another question. Could express check out button shown with normal check out button together. Currently, shopify only allow showing express check out but hides the normal check out button by default.

our website is https://www.utdisguisemastermask.com/

Thanks

7

Hi @UTdisguise ,

Can you explain more about it, because I checked and show it show only 1 button and everything works fine.

  • With change color: If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
8

Yeah, the color issue is solved. The question we are asking is: can express check-out buttom and normal check-out buttom both show on the screen?

Currently, the default shopify setting is: if the express check-out is available, it will show a clickable link “normal check-out” under the express check-out button. We want it to be the button instead of a link.

Thanks

9

Hi @UTdisguise ,

This is set by default by Shopify. So if you want to add ‘normal checkout’ button you need to add custom code for it.

It will be complicated request and you need to hire expert for it, refer group: https://community.shopify.com/category/shopify-job-board

Hope it helps!