Why is my cart popup covering up the checkout button?
A tall cart notification can push the checkout and view-cart buttons off screen, especially on mobile — here's how to fix the layout and the accessibility gaps that usually cause it.
What's going on
A merchant testing their store noticed that after adding a product, the "added to cart" popup (sometimes called a cart notification or mini-cart) grew tall enough that the checkout button was pushed below the visible screen area, especially on mobile. Customers had to scroll inside a small popup, or in some cases couldn't find the button at all, which is exactly the kind of friction that causes cart abandonment right at the moment someone was ready to buy.
This is a layout problem more than a content problem: the popup's height keeps growing as more elements get added to it (line item details, variant options, gift-note fields, "you may also like" recommendations, a free-shipping progress bar), but nothing was set up to cap the popup's height, let its body scroll independently, or keep the action buttons pinned in a fixed footer. On top of that, a detailed report on this also flagged accessibility gaps: keyboard focus wasn't reliably moving into the popup when it opened, making the hidden button even harder to find for anyone not using a mouse.
Why it happens
Cart notifications and drawers in most Shopify themes are built to grow with their content instead of being capped to a fixed, scrollable height. Every block you enable — upsells, a shipping progress bar, order notes, extra product metadata — adds more vertical space, and if the checkout button lives at the bottom of that same growing block rather than in a pinned footer, it simply gets pushed further down until it's off screen.
Mobile makes this worse because the available viewport is already smaller, and browser chrome (address bar, keyboard) eats into it further, so a popup that looks fine on a desktop preview can fail on a real phone.
The accessibility angle compounds it: if the popup doesn't move keyboard focus to itself and trap Tab navigation inside, a customer using a keyboard or screen reader may not even realize there's a button further down to find, turning a layout bug into a full checkout blocker for some visitors.
4 ways to fix it
Trim the notification to only what customers need to decide their next step
In the theme editor, open the cart/product page section that controls the "Show cart notification" or "Cart drawer" setting and check what content blocks are turned on. Many themes let you show or hide elements like related products, free shipping bars, upsell blocks, or extra product metafields inside the popup. Turning off anything that isn't essential (recommended products, long variant option lists, discount code fields) shortens the popup enough that the checkout and view-cart buttons stay on screen without scrolling on most devices.
Fix the popup's CSS so its own content scrolls instead of pushing the buttons off screen
If you or your theme developer can edit CSS (Online Store > Themes > Edit code), the usual fix is to give the popup a max-height tied to the viewport (for example max-height: 90vh or a calc() that subtracts your header height), put overflow-y: auto on the inner content area, and make the footer with the checkout button position: sticky (or a flex child with flex-shrink: 0) so it never scrolls out of view. This keeps the popup usable no matter how many line items or upsells get added later, and it directly resolves the reported issue of the checkout button being pushed below the visible area.
Test and fix keyboard focus and screen-reader behavior at the same time
While you're touching this component, verify that opening the cart popup moves keyboard focus into it, that Tab cycles only within the popup while it's open (a focus trap), that Escape and an accessible close button both dismiss it, and that focus returns to the "add to cart" button afterward. Screen reader users should hear an announcement that an item was added, not just see a visual popup. This matters for its own sake and because a properly trapped, properly labeled dialog is much less likely to render with hidden or unreachable action buttons in the first place.
Check mobile viewports specifically, including with the keyboard or browser chrome open
A popup that looks fine on a desktop preview can still clip the checkout button on a real phone once you account for the mobile browser's address bar and any on-screen keyboard. Test on actual devices (or Chrome DevTools device mode) with a cart containing several items and any add-ons (gift wrap notes, upsells) enabled, since those are what usually push the button out of view. If you're not comfortable editing theme code yourself, this is a good scoped task to hand to a Shopify theme developer, or, since this is fundamentally a cart-popup layout and behavior problem, a purpose-built cart/upsell popup app can also solve it if your theme's built-in notification is too limited to fix well.
Bottom line
Most merchants can resolve this without any new app: it's usually a CSS sizing/scroll problem plus a couple of accessibility gaps in the theme's own cart notification, both fixable in the theme editor or theme code. Reach for a dedicated cart/popup app only if your current theme's popup is too rigid to restyle, or if you want built-in accessibility testing as part of a broader popup/cart upsell tool — in which case look at that category of app rather than treating this write-up as a pitch for one.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.