Cart drawer
The cart drawer is where the purchase actually happens. It slides in from the right, updates in place — no page reload, no redirect — and carries the cross-sell that most stores put on a separate page.
Cart drawer with line items and upsell row
Settings
The Upsell Product block
Add one per cross-sell. Each block takes a product, a heading, and a short description.The best upsells are complementary, not superior. A case, a cable, a spare
earpad, a longer cable — things the shopper was going to need anyway. Upselling
your own more expensive product inside the cart reads as a bait-and-switch and
hurts trust.
How it behaves
Live updates
Adding to the cart, changing a quantity, or removing a line item all happen via Shopify’s Ajax Cart API. The drawer re-renders in place, and the header cart count updates at the same time. There is no page reload and no scroll jump.The free shipping bar
A progress bar fills as the cart total approaches your free shipping threshold. When the threshold is met, the bar completes and the message changes to the confirmation copy.Screen-reader announcements
Every cart change is announced politely to screen readers through a live region in the header. A shopper using a screen reader hears “3 items in cart” after an add, and “Cart is empty” after a removal — without the focus moving.This is why the cart button carries
data-announcement-one, data-announcement-other
and data-announcement-empty attributes. They are translated strings, not
hard-coded English, so the announcement is localised with the rest of the theme.The checkout pulse
The checkout button has a soft, slow glow that animates continuously to draw the eye to the final step. It respectsprefers-reduced-motion and it stops as soon as the
shopper interacts with the button.
Mobile behaviour
The drawer becomes a full-screen panel. The same line items, quantity steppers and upsells are present, and the checkout button is pinned to the bottom so it is always reachable with a thumb.Cart page
The full-page cart for markets that want one.
Cart & checkout
The complete cart and checkout story.