Craft Theme cart pop-up button color change

Shopify Discussion
1

Hello,

I am trying to edit the color scheme for the view cart and checkout buttons, as well as the text within the buttons.

Website is circlebackvintage.com. I assume this has to be done through a custom css, but I am not sure what to add. Thanks in advance!

Screenshot 2023-07-24 at 3.58.43 PM.png
Screenshot 2023-07-24 at 3.58.43 PM.png1590×1376 180 KB

2

Hello @cfahms

Thank you for reaching out to the Shopify community.

Here are the steps to change the background and text color of the checkout and cart buttons

  1. Navigate to the theme editor Online Store → Themes → Edit Code.

  2. Search for the asset named as base.css, open the file and add the below code:

Code for Checkout Button

#cart-notification-form button {
    background: #fbb3bb;
    color: #000;
    font-weight: 700;
}

Code for Cart Button

.cart-notification__links #cart-notification-button {
    background: #000;
    color: #fff;
    font-weight: 700;
}

Save the changes and please have a check once. Let me know if this was helpful.

Thanks.

3

Thank you for the reply. That seemed to do the trick for the most part. I added the code, and was able to choose my colors. Only issue is the view cart button was given a thick black border, and the checkout has a much lighter color. Can you tell me what to add to get the black border around the checkout button. I tried simply adding to the code, border: black; but that did not seem to work.

One last question. Is there a way to change the color of the “Buy with ShopPay” button?

Thanks again.

Screenshot 2023-07-25 at 7.22.41 AM.png
Screenshot 2023-07-25 at 7.22.41 AM.png1584×1382 179 KB

4

Hello @cfahms

In this case please use the below code instead of the previous ones to maintain the same border and box-shadow for the cart and checkout buttons

#cart-notification-form button {
    border: 2px solid #000;
}
#cart-notification-form button:before, #cart-notification-form button:after {
    box-shadow: none;
}
.cart-notification__links #cart-notification-button {
    background: #fbb3bb !important;
    color: black !important;
    font-weight: 700 !important;
    border: 2px solid #000;
}
.cart-notification__links #cart-notification-button:before, .cart-notification__links #cart-notification-button:after {
    box-shadow: none;
}

To change the background of Buy with ShopPay button:

div.shopify-payment-button__button .shopify-cleanslate div[role="button"] {
    background: #000 !important;
    border: none !important;
    background-color: #000 !important;
    box-shadow: none !important;
}
div.shopify-payment-button__button .shopify-cleanslate div[role="button"]:hover {
    background: #000 !important;
    border: none !important;
}

Save the changes and please have a check once. Let me know if this was helpful.

Thanks.

5

Hey @cfahms

Just checking in here if the above solution worked for you. If yes, please mark it as an accepted solution or let me know in case you are still facing issues :slightly_smiling_face:

Thanks.

6

Sorry for the delayed confirmation. It did indeed work. Thanks again!