Change Overlay Color for Cart Drawer

Store Design
,

Topic summary

A user working with the Shopify Crave theme wants to change the cart drawer overlay color from pinkish/red to 50% gray opacity, and also speed up the overlay fade-out animation when closing the cart.

Solutions Provided:

Multiple community members offered CSS-based solutions with slight variations:

  • Method 1: Add CSS code to theme.liquid file before the </body> tag
  • Method 2: Use the theme’s Custom CSS section (Theme settings > Custom CSS)
  • Method 3: Edit the base.css file directly

All solutions target the cart drawer overlay element using CSS selectors like cart-drawer.drawer or html .drawer, applying background or background-color properties with rgba values to achieve the desired gray opacity (typically rgba(0, 0, 0, 0.5) or rgba(0, 0, 0, 0.6)).

Resolution:

The issue was successfully resolved—the original poster confirmed one of the solutions worked perfectly. The animation speed question was not directly addressed in the responses.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am using the Crave theme and I was wondering if there is a way to change the website overlay color when the cart drawer opens? I don’t want to change any of the other theme colors, just want a 50% gray opacity instead of the pinkish/red it is now.

Also, is there any way to adjust how quickly the overlay goes away when the cart is closed? Right now, it sort of lingers for a little while.

Screenshot 2024-12-29 at 11.44.02 AM.jpg
Screenshot 2024-12-29 at 11.44.02 AM.jpg3230×2158 307 KB

Screenshot 2024-12-29 at 11.44.10 AM.jpg
Screenshot 2024-12-29 at 11.44.10 AM.jpg3239×2167 289 KB

1 Like
2

Can you please give us the store URL? Then we will able to help you

1 Like
3

www.moosh-moosh.com

4

Hi @argnarb

TRy this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
5

Hi @argnarb ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

cart-drawer.drawer {
    background: rgba(0, 0, 0, 0.5) !important;
}

Here is the result:

DaisyVo_0-1735522259522.png
DaisyVo_0-1735522259522.png967×443 179 KB

Please let me know if it works!

Best,

Daisy

1 Like
6

Hi @argnarb

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

html .drawer {
background-color: #9e9e9e80;
}

Screenshot 2024-12-30 at 09.53.55.png
Screenshot 2024-12-30 at 09.53.55.png3310×1498 431 KB

1 Like
7

Hi @argnarb ,

Go to Online Store > Themes > Actions > Edit Code > base.css
Add below code in base.css file

cart-drawer.drawer.active {
    background: rgba(0, 0, 0, .6);
}
1 Like
8

This worked perfectly, thank you.