How to reposition the Cart Drawer so it does not obstruct the Product Details?

Technical Q&A
, ,
1

I am hoping someone could help me with the required CSS to reposition the cart Drawer that appears when you add a product into the cart, as it currently positions below the menu and on top of the product details, and because it’s white on white background it looks broken - see here: https://prnt.sc/8cxXYs3VroDh. It would be great if it positions over the Cart icons group top right where the user can then close it. Mobile works perfectly, so this is Desktop only. I am using the STUDIO theme (based on Dawn): https://themes.shopify.com/themes/studio/styles/default/preview

Screenshot 2024-09-03 223252.png
Screenshot 2024-09-03 223252.png1720×917 191 KB

2

Hi @artgazette ,

Thanks for reaching out to the community. We are MooseDesk, a comprehensive Live Chat, FAQ & Helpdesk App designed to elevate your customer support experience.

To change the position of the drawer, you need to modify its position property. Follow these steps:

Step 1: Go to Edit code

MooseDesk_0-1725442065539.png
MooseDesk_0-1725442065539.png668×636 15.9 KB

Step 2: Select the assets folder → choose base.css

MooseDesk_1-1725442081771.png
MooseDesk_1-1725442081771.png612×328 11.3 KB

Step 3: Add the following code snippet to the base.css file

@media screen and (min-width: 750px) {
  .cart-notification {
    z-index: 99 !important;
    top: 0px;
    position: fixed !important;
  }
}

Note: You can customize the top property as desired. The @media screen… condition here ensures that the CSS code is only executed on desktop screens.

I hope this answer addresses your question effectively. If you found it helpful, we’d appreciate a ‘LIKE’ for MooseDesk. If your issue is resolved, please mark this as 'SOLUTION’.

In the meantime, our MooseDesk Team is always here to help with customer support solutions. We’re passionate about improving your customer experiences through our Live Chat, FAQ, and Helpdesk App.

With MooseDesk, you can engage with customers through omnichannel support, manage inquiries with a robust ticket system, and provide quick responses.

MooseDesk_2-1725442104162.png
MooseDesk_2-1725442104162.png1600×900 185 KB

  • Or you can let customers resolve questions faster with in-built FAQ, Order tracking module, and more.

MooseDesk_3-1725442104167.png
MooseDesk_3-1725442104167.png815×1600 174 KB

Once again, keep up the fantastic work, and I wish you the best of luck in the future!

3

Thank you!

4

Hi @artgazette ,

It’s great to hear that our suggestion has been helpful to you.

Wishing you best of luck in your future :heart_eyes: