How can I change the background color of my add to cart pop-up?

[coolerdrinks]

Hi there,

When an item is added to cart in my store, the popup has a transparent background. How can I make it white? Please see example image below.

Additionally, you cannot see the text in the bottom black button in the popup. How can that also be remedied?

Thanks,

Jordan

[PageFly-Victor]

Hi @coolerdrinks ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-cart-notification.css->paste below code at the bottom of the file:

div#cart-notification {
    background: white !important;
}

Note: you can change background color to match your store

Hope my answer will help you.

Best regards,

Victor | PageFly

[coolerdrinks]

Thank you so much @PageFly-Victor !

It worked - however I am still having an issue with the black button. Also, I think the white button needs more of an outline. Any suggestion there? Screenshot below.

[PageFly-Victor]

You can try this code below:

button.button.button--primary.button--full-width {
    color: white !important;
}

a#cart-notification-button {
    border: 2px solid black;
}
a#cart-notification-button:before {
    display: none;
}

[coolerdrinks]

Would I add this into theme.liquid? I tried adding it before but it did not work.

Greatly appreciate your help!

[PageFly-Victor]

@coolerdrinks , You can add this to component-cart-notification.css or if you want add this to theme.liquid, you can wrap this on tag like this

[coolerdrinks]

It worked! Thank you so much!

I’ve been having the same issue with the search bar - when I click the magnifying glass it pops open, but the background is transparent and it looks like this:

Any advice on how to remedy this?

Thanks so much!

[PageFly-Victor]

You can add this code below to component-search.css:

.search__input.field__input {
    background: white !important;
}

[coolerdrinks]

Wow thank you so much for all your help!

[AbulHasib]

Hi there, you can try out our app, “Bevy Design” to solve this issue.
Bevy Design comes with a drag-and-drop builder, which you can use to create this same pop-up without any code and place it anywhere on the page.
The app’s “Add to Cart” trigger can display chosen products from your inventory for upsell purposes. You can also make your pop-up visually appealing by using our pre-built templates. And you can achieve this without disrupting the layout of your website. If you want to learn more, please visit our website: https://bevycommerce.com/design/

If you need to book a meeting with me to go over what our app has to offer, Please let me know.