How can I alter the cart background color on my website?

[antoinelacour]

Hello!

See above, I would like change this faded background colour (shown when the cart is opened) from green, perhaps to white #FFFFFF but I may change that myself once I can see how it looks.

The site is www.plantedjournal.shop

Any help would be greatly appreciated!

[sahilsharma9515]

Hi @antoinelacour Please add the code in your theme.css/base.css/style.css/index.css file which is available in your theme.

div#CartDrawer-Overlay {
    background-color: #FFFFFF !important;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
6. You can add the above code at the bottom of the file.

Result:

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

[antoinelacour]

Hi @sahilsharma9515 sorry I should have specified that I would also like the white color to be faded, like the green is (the same level of opacity, not a solid colour). Is this possible?

[sahilsharma9515]

Hi @antoinelacour thanks for being specific, will this work for you?

If yes then remove the previous code and add the below code where you have added the previous code.

cart-drawer.drawer.is-empty.animate.active {
    background-color: unset !important;
}

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

[antoinelacour]

Thank you @sahilsharma9515 Unfortunately this didn’t work for me – there is now no background colour showing. Regarding your screenshot, could we make it more white (less opaque). I think the green opacity is around 50% ?

[Made4uo-Ribe]

Hi @antoinelacour

Check 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:

div#CartDrawer-Overlay {
    background: #ffff !important;
    opacity: .5;
}

• And save.

• Result:

• 

• You need to add solid color then used opacity to look faded.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[sahilsharma9515]

Hi @antoinelacour Ok got you, Please add this code and the issue will be solved.

cart-drawer.drawer.is-empty.animate.active {
    background-color: rgba(255,255,255,0.5) !important;
}

Result:

For changing opacity of white change the value 0f 0.5.

if you need light opacity change 0.5 to 0.4 or 0.3. and for darker opacity increase it to 0.6 or 0.7

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil