Goal: Darken the page behind the cart drawer in the Broadcast 3.0.0.0 theme to better separate it from the white page background.
Context: The theme uses CSS variables. The cart drawer background (–bg) maps to the page background (–color-bg), so both appear the same unless the mapping is overridden.
Proposed approaches:
Notes: There’s disagreement whether Custom CSS accepts/saves rules using content: “”; one user reports success, another reports save issues. Screenshots illustrate Custom CSS placement. Status: No confirmation from the original poster; solution likely workable via theme.css edit if Custom CSS fails.
Running Broadcast 3.0.0.0 theme here. When my cart drawer is open, the background of that is white and the background of my site is white. I can’t for the life of me figure out how to make the background overlay a darker color to delineate between that and the cart drawer. The site is immunocologie.com, you can click on an item on the home page and see the cart drawer open.
Is there simple code I can use to implement this?
@mountaintopvirtual I think you are not able to find a solution as there is no layout on any page when drawer opens. It just opens up
Not really sure I understand. Are you saying there’s zero way to do what I’m asking? To have a delineation between the cart drawer and the rest of the page when the cart drawer opens via a background color overlay?
When I inspect your storefront’s CSS, the background colors you’re trying to change are controlled by CSS variables defined in your theme’s root styles. This is common in modern Shopify themes—including Broadcast.
Your general page background is being set by the variable:
--color-bg
The cart drawer is using:
--bg;
…but in your theme, --bg is simply mapped back to:
--color-bg;
So these two elements will always share the same color unless you break that connection in the theme’s code.
Go to:
Online Store → Edit Code → (search bar)
Search for:
--color-bg
--bg
You’ll typically find these in base.css, theme.css, or a similar global stylesheet. That’s where the theme defines all its root color variables.
Changing these values directly will update colors everywhere those variables are referenced.
You can also use Custom CSS (in the theme editor, under “Custom CSS”) to override the values:
:root {
--color-bg: #ffffff; /* your desired background color */
}
.cart-drawer {
--bg: #f5f5f5; /* unique cart drawer background */
}
This method is cleaner if you just need a quick design adjustment and don’t want to modify the underlying theme structure.
Since these variables are used in multiple places, changing them globally may adjust colors in areas you didn’t intend. If that happens, you may want to assign a new variable for the cart drawer only.
If you have any questions or need any support, feel free to reach out to me 
@mountaintopvirtual yes, because there is no layer
But you can put shadow or border around cart to differentiate it from the rest of the page
If this is the goal the the code is below:
The code can go at the bottom of the assets/theme.css:
body:has(#cart-dropdown.is-open):after {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.3);
z-index: 9998;
}
@mountaintopvirtual please check the solution offered by @tim_1 , it should work for you
You can add this code to Custom CSS in theme settings.
body:has(.cart-dropdown.is-open)::before {
content: '';
background: #494949;
position: absolute;
width: 100vw;
height: 100vh;
opacity: .8;
display: block;
z-index: 9999;
}
Best regards,
Dan from Ryviu: Product Reviews App
Last time I checked rule like this was unacceptable in “Custom CSS”
You can add this code to Custom CSS in theme settings.
body:has(.cart-dropdown.is-open)::before {
content: "";
background: #494949;
position: absolute;
width: 100vw;
height: 100vh;
opacity: .8;
display: block;
z-index: 9999;
}
Best regards,
Dan from Ryviu: Product Reviews App
It will automatically convert to "" after adding to Custom CSS
No I mean – have your really tried code which has content: "" /* anything */ in “Custom CSS” and it worked?
Because for me it looks like it accepts it, and you can even hit “Save” but as soon as you have the content: it does not actually save anymore.
I’d be glad if it does for you…
Yes, already tried to add it to Custom CSS of theme settings.
This worked absolutely perfectly. I can’t thank you enough for that!
If I’m able to here, I can’t figure out how to update the text in the cart drawer on the item title. I don’t want it to be in all capital letters. I’ve tried text-transform and changing the font-family, but nothing seems to update the fact it’s in all capital letters.
I’d also love to have the “Shop” button that’s on my checkout page, to be also on my cart drawer page(in addition to the checkout button).