Add to cart pop-up in dawn theme transparent

Store Design
, ,

Topic summary

Add-to-cart pop-up (cart notification) in the Dawn theme appears transparent, making text and the checkout button hard to read; requester wants a solid background color. Store URL shared: michaelgrp.com.

  • Clarification: Asked whether the pop-up comes from an app. Requester confirmed it does not (theme-native behavior).
  • Proposed fix: Add custom CSS in theme.liquid before to style the cart notification:
    • div#cart-notification { background: #fff !important; }
    • Button/link colors and borders set to black. A screenshot of the code placement was included.
  • Outcome: Requester reported the CSS did not work.

Notes:

  • The CSS targets #cart-notification and related button selectors; effectiveness may depend on the exact markup or CSS specificity in the current Dawn version. The provided snippet shows a likely typo in “border” (split as “bor der”).
  • An unrelated post linked to a different design topic (adding text/timer) and did not advance this issue.

Status: Unresolved/ongoing. Next steps implied: further selector/specificity checks or alternate styling approach; no confirmed solution yet.

Summarized with AI on December 16. AI used: gpt-5.
1

Hello all! I’m having some trouble with the add to cart pop-up, it appears transparent, you can still see the words and checkout button but there’s no color so its hard to read and I cannot figure out how to add a background color to it. any help would be greatly appreciated :slightly_smiling_face:

store url is michaelgrp.com

2

Hi @mgrp

Are you using an application for this add to cart pop-up? If so, I highly suggest that you reach out to the app developer so, they can further check the settings of your app or any error that might be causing this issue.

3

Hello @mgrp

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__links a.button { color: #000 !important; border: 1px solid #000 !important; } form#cart-notification-form button { border: 1px solid #000 !important; }

Tech_Coding_0-1729351059135.png
Tech_Coding_0-1729351059135.png422×412 22.7 KB

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

1 Like
4

Please help me sir! Thank you.

https://community.shopify.com/topic/2814716

5

Hi there! unfortunately that didn’t work for me

6

I am not, no