Problem with cart drawer

Technical Q&A

Topic summary

Mobile cart drawer (sliding side cart) doesn’t scroll far enough to show the free‑shipping/cart info; the info is hidden behind the cart’s fixed summary area in the Ajax cart (dynamic cart panel).

What’s identified:

  • A CSS cause: the cart summary section is positioned fixed and overlaps the info section when multiple products are present.
  • A stray apostrophe in theme.css prevented a proposed CSS block from applying.

Proposed fixes and trade‑offs:

  • Set the cart drawer container to position: relative on small screens to enable scrolling, but this can reveal page content beneath the drawer.
  • Add overflow-y: scroll and a fixed height to the cart form area to allow internal scrolling (initially failed due to the syntax error).
  • Structural options: (1) make the entire cart drawer scrollable, or (2) move/include the cart info within the fixed summary section so it remains visible.
  • UX suggestions: limit text length, align buttons horizontally, and use collapsible or tooltip patterns for long content.

Status: No final confirmation that a fix is live. Next steps are to remove the CSS syntax error and choose between full‑drawer scrolling or restructuring the fixed section. Screenshots illustrate the overlap but aren’t required to follow the issue.

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

Hi there!
I am done with my website but still have some problems regarding the cart drawer.
When I open it I see the products summary but it does not scroll down till the end where there are shipping infos about the free shipping terms.
How can I manage to make it scroll correctly?

Than you in advance

www.sosober.it
mohwhi

2 Likes
2

@sosober it is happening due to css setting, if you add the given css to the end of your theme.css file, then user would be able to scroll to view info, but it would also show info below this cart layer like screenshot given below

@media screen and (max-width:749px){
#slideout-ajax-cart {position: relative !important;}
}

image
image1366Ă—768 131 KB

3

Thank you!
I think I did not explain myself well.

As you can see from the screenshot the problem is above where there are the products added to the cart and the free shipping infos.

Hope you can help me!!

Screenshot 2025-11-16 alle 21.47.34
Screenshot 2025-11-16 alle 21.47.341920Ă—1088 153 KB

4

@sosober please add this css to the very end of your theme.css file and check

`@media screen and (max-width:749px)
{
.ajax-cart__drawer-wrapper .ajax-cart__cart-form{ overflow-y: scroll !important;
height: 200px !important;}
}`
5

it is happening due to css setting, if you add the given css to the end of your theme.css file, then user would be able to scroll to view info.

6

Unfortunately it’s not working.

As you can see there are some informations (cart shipping countdown) hidden by the Ajax cart final details.

Can you please check and try to help me?
Thank you!!

Screenshot 2025-11-17 alle 10.05.29
Screenshot 2025-11-17 alle 10.05.291260Ă—1714 171 KB

7

@sosober hi, the issue is, you copy pasted code correctly, but by mistake on previous line there is unwanted apostrophe sign , please remove this apostrophe ` and save. check screenshot below, line 4292

image
image1366Ă—768 108 KB

8

@sosober You have 3 divs in card drawer, ajax-cart__cart-items, ajax-cart__info-wrapper and ajax-cart__summary-wrapper.

ajax-cart__summary-wrapper is styled as postion: fixed and it is overlapping ajax-cart__info-wrapper. Thats the reason you are unable to view it when multiple products added to the cart.

There are 2 ways you could fix this issue.

  1. Add scrolling to the entire cart drawer instead on just cart items.
  2. Include cart info also in the fixed details section.

It will be better you should limit some info, align buttons parallely and use collapse/tooltip blocks to show long texts.