What is a Cart Drawer?

A cart drawer is a panel that slides in over the current page and shows the contents of the shopping cart without navigating to a separate cart page. It is opened by the cart icon in the header and usually also after an item is added. The panel lists line items, quantities and the order total, often together with progress indicators such as a free shipping threshold, and it carries a primary action that leads to checkout. It has become the default cart pattern on mobile first storefronts.

Definition

A cart drawer is a presentation pattern, not a separate cart system. The underlying cart state remains the same whether it is rendered in a drawer, on a dedicated cart page or in a dropdown mini cart. Variants differ in trigger behaviour, in whether the panel opens automatically after an add to cart action, and in how much secondary content it carries, such as discount code fields, recommendations or shipping estimates. Accessibility requirements are strict: the panel is a modal surface, so focus has to move into it, the escape key has to close it, and the background must not scroll. Overloading the drawer with offers is the most common failure mode, because it delays the path to checkout.

Why it matters

In a decoupled storefront the cart lives behind a commerce API and is addressed through a cart identifier held in the browser session. The drawer subscribes to a shared client side cart state, so any component that changes the cart, whether a product tile, a quantity stepper or a bundle module, triggers one update and one re-render. The surrounding page can be statically rendered and cached at the edge, while the cart itself is fetched separately at runtime, which keeps customer specific data out of the cached document. Optimistic updates keep the panel responsive while the API call completes, and the server response stays the source of truth for price, stock and promotions.

Use cases

On a product detail page the drawer opens after an add to cart action and confirms what was added without leaving the page, which supports sessions with several items. On a listing page the same pattern allows products to be added in sequence. Inside the panel a progress bar towards a shipping threshold, a compact upgrade suggestion or a discount code field can be placed, as long as the checkout button remains the most prominent element. On small screens the drawer usually occupies the full viewport height, with the total and the primary action fixed at the bottom edge.

Related

Explore Cart Abandonment · Checkout Optimization.