change the colors of the notification pop up cart and direction

[batyaJandMore]

hello,

i want to change the colors of the pop up notification and change the pop up direction to open up on the left side of the screen.

i want the colors to be simple background white ,all text including the cross button black.

the buttons view cart and checkout can be black or white backgrounds.

thanks in advance

using dawn theme

https://fyy6xmk760oaiiau-65779892391.shopifypreview.com

[BSSCommerce-B2B]

@batyaJandMore ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above

Result

If it helps you, please like and mark it as the solution.

Best Regards

[Dan-From-Ryviu]

Hi @batyaJandMore

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

cart-notification #cart-notification {
background: #fff;
}
cart-notification #cart-notification * { color: #000; }
cart-notification #cart-notification .cart-notification-button { color: #fff; }
cart-notification #cart-notification .button--full-width { background: #000; color: #fff; }

[Moeed]

Hey @batyaJandMore

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

[topnewyork]

Hi @batyaJandMore ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

This above code will the popup direction as well as the colors

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[oscprofessional]

Hi @batyaJandMore

Go to Online Store > Themes > Actions > Edit Code > theme.liquid > add below code before

@media screen and (min-width: 990px) {
    .cart-notification-wrapper:is(.page-width)>.cart-notification {
        left: 4rem !important;
        right: auto !important;
        background: #fff;
    }
    .cart-notification__header *, #cart-notification-product *, .cart-notification__links .link.button-label {
    color: #000;
}
}

[niraj_patel]

Hello @batyaJandMore

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

div.cart-notification { background: #fff !important; } .cart-notification .cart-notification__heading, .cart-notification-product__name, .modal__close-button.link { color: #000 !important; } .cart-notification button.button.button--primary.button--full-width { background: #000 !important; color: #fff !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.