Cart drawer

A slide-out panel that shows the cart without leaving the page.

What it’s for. Letting people add a card, see it land in their cart, and keep shopping. It slides in from the side with the line items, a subtotal, and a checkout button, then closes again so nobody loses their place mid-browse.

When to use it. It’s always on. The drawer slides in when someone adds to cart, and when they click the cart icon in the header. It sits alongside the full /cart page, not in place of it. There’s a “View cart” link in the footer for anyone who wants the full page.

Ways to use it

  • Free-shipping nudge — set a threshold like 75 and the bar shows “Add $12 more for free shipping,” updating live as the cart changes. Good for lifting order size.
  • Cross-sell singles — turn on “You might also like” to surface related products under the cart, each with a one-tap Add.

Tips

  • The progress bar only shows if you set a threshold above 0. Leave it at 0 to hide it.
  • Quantity changes and removes update the drawer in place, no page reload.
  • Recommendations follow the first item in the cart. Edit the heading and product count in the Cart recommendations section.
  • “Complementary” recommendations need Search & Discovery set up; “Related” works automatically.
  • Whether the drawer is on, which side it opens from, and whether it opens on add are theme settings, not section settings.

Settings

Free shipping progress

SettingTypeWhat it does
Show free-shipping progress barOn / offDefault: true
Free shipping thresholdNumberIn your store currency, e.g. 75 for $75. Leave at 0 to hide the bar.

Recommendations

SettingTypeWhat it does
Show “You might also like”On / offDefault: true
Recommendation typeDropdownEdit the heading and product count in the “Cart recommendations” section. (Related (automatic), Complementary (needs Search & Discovery setup))
Products to requestSliderDefault: 4

Was this page helpful?

Spotted something wrong, or want to suggest an improvement? Email support → — your message goes straight to engineering.