Modifying the background of the cart in DAWN

Store Design
, ,

Topic summary

A user is customizing the Dawn theme’s drawer cart and wants to make the cart panel opaque while keeping the remaining screen area transparent. The current setup causes text overlap issues when the cart is transparent.

Problem Details:

  • The cart drawer needs an opaque background
  • The rest of the screen (approximately 75%) should remain clear/visible
  • Text readability is compromised with the current transparent setup

Solutions Provided:

Two community members offered CSS code solutions:

  1. First approach: Add CSS to theme.liquid file targeting .drawer.active .drawer__inner with white background
  2. Second approach: Add CSS to base.css file targeting .drawer__inner-empty with white background

Both solutions include step-by-step instructions and visual examples showing the expected white background result.

Status: The user initially had password protection enabled but removed it to allow helpers to view the site. Multiple responders are ready to assist once they can access the store.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hi

I am designing a web page using the dawn theme, I want to use the draw cart option so it allows the rest of the screen to be shown while open, I cant seem to find a way to make the cart itself opaque while leaving the remaining 75% of the screen clear - its either or.

The main issue with leaving the cart transparent is the text overlaps what is shown behind,

I have tried some online source code which I have copied in as well as spoken to customer support - I understand very basic principles of code but not enough to write something from scratch

Any and all help is appreciated

2

Hey @bestofbritishmgrover

Your store is password protected, can you also share your frontend password as well?

Best,
Moeed

3

Hi Moeed

I completely forgot about the password I have just popped it off for the moment

Thank you for taking some time to have a look as well :slight_smile:

Regards

1 Like
4

Hey @bestofbritishmgrover

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 </ body> tag
<style>
.drawer.active .drawer__inner {
    background: white !important;
}
</style>

RESULT:

image
image1909×912 124 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

5

Hey,

In order to add the background to the Cart Drawer you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css paste the following code.

.drawer__inner-empty {
  background: white !important;
 }

Results:

image
image1919×943 96.7 KB

6

Hello @bestofbritishmgrover ,

I hope you are well!

I have checked and confirmed that the store is Password protected. Can you please provide the password of the store so that I can provide you the CSS which will fix the cart with opaque.