Cart Drawer & Upsell
A slide-out cart that rewards bigger orders, recommends upsells, and gets shoppers to checkout faster.
Welcome to the Foxr Cart Drawer & Upsell docs.
The app replaces your theme's cart with a cart drawer that slides in from the side of the page. Shoppers see what's in their cart, how close they are to free shipping or a free gift, products that go well with their order, and a checkout button that's always in reach.
How it works
Everything about the drawer is set in one place: the cart editor. You open it from the Carts page, change the settings tab by tab, watch the live preview update, then click Save.
Open the editor. In the app menu, click Carts, then click the pencil next to your live cart. See Open the cart editor.
Pick a tab. The Cart Editor Settings list on the left has one tab per part of the drawer: Design, Cart Items, Rewards, Upsells, and so on. See Tour the cart editor.
Change the settings. The preview on the right updates as you type.
Save. Click Save in the bar at the top of the Shopify admin. On the live cart, changes reach your store as soon as the save finishes. See Save, discard, and publish.
Nothing showing on your store?
The drawer only appears when the Foxr Cart Drawer app embed is on in your theme. If it's off, the editor shows a Foxr Cart Drawer is inactive banner with an Activate button. Click it, then click Save in the theme editor.
What's in the app menu
| Menu item | What it's for |
|---|---|
| Home | Cart views, completed checkouts, and upsell revenue, plus a setup checklist. |
| Carts | Every cart design you've made. One is Live, the rest are Drafts. Open the editor, publish a draft, or start an A/B test. |
| Analytics | How the drawer is performing. |
| Floating Cart Button | A cart button that floats on the page. |
| Sticky Add to Cart | An add-to-cart bar that stays on screen on product pages. |
| Settings | App-wide settings, such as custom template editors. |
Cart editor tabs
Tour the cart editor
What every part of the editor screen does.
Design
Colours, buttons, and the header of the drawer.
Cart Items
How each product line looks and what it shows.
Rewards
A progress bar to free shipping, discounts, and free gifts.
Upsells
Recommend products that go with the cart.
Upsells with Discount
Offer products at a lower price inside the cart.
Volume Discount
Buy more, save more offers under each item.
Add Ons
Shipping protection, gift wrap, warranties.
Announcements
A message bar with an optional countdown.
Discount Codes
Let shoppers enter a code in the cart.
Summary
Subtotal, checkout button, and terms.
Settings
Width, slide direction, and how discounts combine.
Words you'll see a lot
| Term | Meaning |
|---|---|
| Cart drawer | The slide-out cart shoppers see on your store. |
| Cart | One saved design of the drawer, with all its settings. You can keep up to 25. |
| Live cart | The cart your shoppers see right now. There's always exactly one. |
| Draft | A saved cart shoppers don't see until you publish it. |
| Tab | One section of the cart editor, like Rewards or Upsells. |
| Module | A feature you turn on or off inside a tab. The eye icon next to a tab shows whether it's on. |
| Widget | An extra block you add under Add a Module, such as a guarantee strip or promo banner. |
| Preview | The cart on the right of the editor. It shows your unsaved changes. |