Checkout & conversion12 min readUpdated October 14, 2026

Cart Drawer Upsells: What to Offer Before Checkout and How to Build Them

What to put in a cart drawer upsell, how to build it on Shopify from the official APIs, how to keep it fast, measure it, and stay clear of dark patterns.

Nick Bonnassies, CMO at Tagada · checked against 12 sources

Article summary

TL;DR

A cart drawer upsell is an offer shown in the slide-out cart that opens after add to cart, before checkout. The offers that fit there are a complementary item, a free-shipping progress bar, a quantity tier, a bundle or a subscription option, added in one tap without leaving the page and without hiding the checkout button.

Show one to three offers tied to what's already in the cart, below the line items and above a checkout button that stays visible.
A free-shipping bar must use the same threshold as your real shipping rule, in the shopper's currency, after the discounts your rule counts.
On Shopify, the Product Recommendations API returns related or complementary products, and the Cart API can re-render the drawer in the same request.
A pre-checked paid add-on is not consent in the EU: the shopper can claim the payment back. The FTC calls auto-adding items to the cart sneak-into-basket.
Measure attach rate, average order value and conversion against a holdout group. A higher AOV with fewer orders is a loss.

Want to go further? Ask

On this page

A cart drawer upsell is the offer that appears in the slide-out cart, after "Add to cart" and before checkout. This guide covers what to put there, how to build it on Shopify from the official documentation, how to keep it fast, how to measure it, and where a helpful suggestion turns into a dark pattern. By industry: increase AOV for supplement brands, increase AOV for skincare brands, increase AOV for online pharmacies, increase AOV for telehealth companies, increase AOV for fitness brands and increase AOV for info product businesses.

What is a cart drawer upsell?

A cart drawer is a side panel that slides over the page when a shopper adds a product. It shows the cart without sending them to a separate cart page. A cart drawer upsell is any offer placed in that panel: a matching product, a progress bar toward free shipping, a quantity discount, a bundle or a subscription option.

Strictly, an upsell is a bigger or better version of what the shopper chose, and a cross-sell is a different item that goes with it. In a drawer, cross-sells usually make more sense: the shopper has just picked the main product, so offering to swap it reopens a decision they've already made.

Shopify themes built on Online Store 2.0, such as Dawn, let you choose the cart type in the theme settings: Drawer, Page or Popup notification. Shopify notes that the drawer and the pop-up keep customers on the product page, while the page option takes them to the cart.1

Cart drawer

Add to cartPanel slides over the page
same pageCart + offersAdd in one tap, or check out

Room for one to three offers, the shopper stays on the page

Cart page

Add to cartRedirect to /cart
new pageFull cart pageEdit, review, then checkout

More room for a complex order, but the shopper leaves the product

The drawer comes before payment. It's different from a one-click upsell, which is offered after the order is paid and charges the card a second time without the shopper typing it again. The two work together; the table near the end of this guide shows where each placement fits.

What to show in the cart drawer

The drawer is small and the shopper is about to pay. Each offer has to relate to what's already in the cart and be easy to accept or ignore. How the related items get picked, by rules or by a recommendation engine, is covered separately.

Offer	Fits when	What has to be true
Complementary item	The product needs or pairs with something: refills, a case, a second flavor	It's in stock, not already in the cart, and priced well below the main item
Free-shipping progress bar	You charge shipping below a set order value	The threshold shown is the one your shipping rules actually apply
Quantity tier	Customers reorder or use several units	The unit price really drops at the tier, and the saving is shown in money
Bundle	A set of products sells better together	The bundle price is lower than the items bought separately
Subscription option	The product is consumed and reordered	The terms (price, frequency, how to cancel) are next to the toggle
Free gift at a threshold	You have a low-cost item worth having	The gift is actually free and the threshold is real

The sections below take each one in turn.

Complementary items

Shopify's Search & Discovery app splits recommendations in two. Complementary products are "often bought in addition to a selected product"; related products are "similar to a selected product".2 For a drawer, complementary is the one you want.

You can pick up to 10 complementary and 10 related products per product by hand. Without manual picks, Shopify generates related recommendations from purchase history, then from the product description (English storefronts only), then from related collections.2 Shopify also filters out products that would make a bad suggestion: sold out, unlisted, gift cards, priced at $0.00, or already in the visitor's cart. Complementary products must have inventory above zero.2

Hand-pick complementary products for your top sellers. Automatic suggestions need sales history, and "similar" is the wrong answer in a cart: a shopper who has just chosen a serum doesn't need a second serum.

Free-shipping progress bar

Extra costs are the first reason shoppers give for abandoning: 40% of US shoppers who abandoned for a reason other than "just browsing" cited them in Baymard Institute's survey (page updated September 22, 2025).6 A progress bar turns the shipping fee into a goal: "$13 away from free shipping".

The bar is only honest if its number is the real one. Check these before you switch it on:

Cart drawer · 2 itemsWhat the shopper sees after adding a product

Subtotal: $62.00
Free shipping: $13.00 to go · threshold $75.00 (US)
Pair it with: Refill pack · $14.00 · Add
Buy 3, save 10%: Shown in dollars: save $6.20
Checkout: Button visible without scrolling

Illustrative mock-up.

Same threshold as the shipping rule. On Shopify, free shipping comes either from a shipping rate condition or from a free shipping discount, which can require a minimum purchase amount or a minimum quantity of items and can be limited to certain countries or markets.5 The bar must read the same number.
Same currency and market. A $75 threshold shown to a Canadian shopper in CAD is a different promise. Show the threshold that applies to their market, or hide the bar.
Same treatment of discounts. Check in your own settings whether the threshold counts the subtotal before or after discount codes, and make the bar compute the same way. A shopper who "unlocks" free shipping in the drawer and sees a shipping fee at checkout has every reason to leave.
A clear success state. Once the cart passes the threshold, say so plainly and stop pushing.

Quantity tiers

"Buy 2, save 10%" works in the drawer because the shopper changes a quantity they already chose, not a product. Show the saving in money, next to the quantity selector, and apply it automatically. Setting the tiers themselves, and checking they still leave margin, is covered in tiered pricing strategy.

Bundles

A bundle offer in the drawer swaps a single item for a set, or adds the missing pieces of one. Keep it to bundles that contain the product already in the cart, and show the price against the items bought separately. How to price a bundle without giving away margin is in bundle pricing strategy.

Subscription option

For products that run out, the drawer can offer "subscribe and save" on the line item. Shopify's Cart API sets this with a selling_plan parameter on the line.4 The toggle must carry its terms: price per delivery, frequency, and how to cancel. Visa requires the terms of a recurring agreement to be shown at the moment the customer consents, separately from your general terms.12 The full rules for trials and renewals are in negative option billing.

Where to place offers, and how many

The drawer's job is still to get the shopper to checkout. Every offer competes with that button.

Cart first, offers second
Line items and the subtotal sit at the top. Suggestions go below them, above the checkout button or in a row between the two.
Checkout always visible
On a common phone screen, the checkout button stays on screen without scrolling. If an offer pushes it down, the offer goes.
Add without leaving
One tap adds the item and updates the cart in place. If a variant is needed, show a small selector inline, not a link to the product page.
One to three, often one on mobile
App vendors' guides converge on a short list. None of their figures come from a public study, so treat the count as something to test.

Two more rules keep the drawer clean. Hide an offer once it's in the cart (Shopify's recommendations already exclude products in the cart).2 And don't repeat the same pitch at checkout: if the shopper skipped it in the drawer, an order bump on the checkout page should offer something else.

How to add upsells to a Shopify cart drawer

There are three ways to do it, from no code to full control.

1. Theme settings and Search & Discovery, no code. Set the cart type to Drawer in the theme settings,1 and pick complementary products in the Search & Discovery app.2 The limit: Shopify documents the complementary products block in the product information section of the product page, not in the cart. Out of the box, you get the drawer and the recommendations, but not the recommendations in the drawer.

2. Theme code with Shopify's Ajax APIs. This is how to put recommendations in the drawer without an app. The pieces all come from Shopify's developer documentation:3 4

Fetch suggestions. GET /recommendations/products.json?product_id=…&intent=complementary&limit=3. intent accepts related (the default) or complementary; limit runs from 1 to 10 (default 10). A second endpoint returns the suggestions as rendered HTML from a theme section.
Add in one tap. POST /cart/add.js with the variant id and quantity. If the quantity exceeds stock, Shopify adds only what's available, so read the response.
Re-render the drawer in the same call. Add a sections parameter to the cart request: Shopify returns the HTML of up to five sections, rendered after the change. No second request needed.
Change quantities or add a selling plan. POST /cart/change.js changes one existing line at a time; a quantity of 0 removes it. selling_plan on that line turns it into a subscription.
Read the cart. GET /cart.js gives the subtotal your free-shipping bar needs.

Endpoints from Shopify's Ajax API reference. Use locale-aware URLs, as Shopify recommends.

Recommendation links returned by the API carry tracking parameters (pr_choice, pr_prod_strat, pr_rec_pid, pr_ref_pid, pr_seq) that Shopify uses to build conversion funnels in its reports.3 Keep them when you build your own markup.

3. An app. Slide cart apps bundle the drawer, the offers, the progress bar and reporting. They save development time; the trade-off is another script on every page and a second cart to keep in sync with the theme. Check what the app loads on mobile before installing it, and whether it works with your subscription app if you sell subscriptions.

Outside Shopify, the logic is the same on any platform or headless store: recommendations from the cart contents, an add that updates the cart without a page load, and totals read from the server, never computed only in the browser.

Keep the drawer from slowing the store

A drawer opens right after a tap, so its speed shows up in Google's Core Web Vitals, measured at the 75th percentile of real page loads, split by mobile and desktop.9

200 ms

Good Interaction to Next Paint: from the tap on Add to cart to the next frame on screen

0.1

Good Cumulative Layout Shift score; above 0.25 is poor

500 ms

Window after a tap or click in which layout shifts are not counted in CLS

Sources: web.dev pages on INP, CLS and Web Vitals.7 8 9

INP counts the delay before the click handler runs, the time it runs, and the time until the frame is painted.7 For a drawer, that means:

Open the panel first, fill it after. Paint the drawer with the cart as soon as the tap lands, then fetch suggestions. A drawer that waits for three network calls before appearing looks broken.
Reserve the space. Shifts within 500 ms of a tap carry the hadRecentInput flag and don't count in CLS,8 but suggestions that arrive a second later and push the checkout button down do. Give the offer block a fixed height or a placeholder.
Animate with transform. web.dev notes that gradual, animated movement feels expected where abrupt jumps don't.8 Slide the panel in with a CSS transform, not by changing its width.
Watch app weight. A drawer app loads on every page, not only when the cart opens. Compare INP and LCP (good at 2.5 seconds or less9) before and after installing it.

More speed fixes for the payment steps that follow are in ecommerce checkout optimization.

Helpful upsell or dark pattern?

The same drawer can help a shopper finish an order or trick them into paying more. Two texts draw the line. In the EU, Article 22 of the Consumer Rights Directive requires the consumer's express consent for any payment on top of the main purchase; if consent was inferred from a default option the consumer had to reject, they're entitled to a refund.10 In the US, the FTC's 2022 staff report on dark patterns lists the tricks it sees in online shops, including several that fit in a cart drawer.11

A paid add-on (protection plan, priority shipping) with its box already tickedEU: no express consent, the payment must be refunded. FTC: sneak-into-basket via a pre-checked boxLeave the box empty. The shopper ticks it
An item added to the cart automatically when the drawer opensFTC: sneak-into-basket, adding items without the shopper's permissionShow it as a suggestion with an Add button
'Offer ends in 09:59' that resets on every visitFTC: baseless countdown timerOnly show a deadline that exists
'Only 2 left' when stock is fineFTC: false low stock messageShow stock only from real inventory
A 'was' price the product never sold atFTC: false discount claimsCompare with the real regular price, or the items bought separately
A free-shipping goal that doesn't match the shipping charged at checkoutA false promise, and a surprise cost at the last stepRead the threshold from your shipping rule
A free gift added automatically once the cart passes a thresholdNo extra payment, so it's not an Article 22 issueFine, if the shopper can remove it
One suggestion with its price, an Add button and a visible checkoutA suggestion the shopper can take or leaveThe pattern to keep

The FTC report also lists drip pricing: showing part of the price and adding mandatory charges late in the buying process.11 A drawer that hides shipping until checkout does the same thing. The full set of legal rules for the checkout page is in ecommerce checkout optimization.

Not legal advice

These are the texts as published: Directive 2011/83/EU, Article 22, and the FTC staff report of September 2022. National laws and state rules add detail. Have your offers reviewed for the countries you sell to.

How to measure a cart drawer upsell

An offer that gets added a lot can still lose money, if it distracts shoppers from checking out. Measure the whole path, not only the add-on.

Metric	Formula	What it tells you
Attach rate	Orders containing the offer ÷ orders where the offer was shown	Whether the offer is relevant
Drawer checkout rate	Checkout clicks from the drawer ÷ drawer opens	Whether the offer gets in the way
Conversion rate	Orders ÷ sessions	Whether you lost buyers
Average order value	Revenue ÷ orders	Whether baskets grew
Revenue per visitor	Revenue ÷ visitors	The decision metric: conversion and AOV combined

Average order value on its own is misleading: if a pushy drawer loses the shoppers with the smallest carts, AOV rises while revenue falls. Conversion rate on its own misses the gain from bigger baskets. Revenue per visitor captures both.

Keep a holdout. Show the offer to half of visitors and nothing to the other half, at random. Before-and-after comparisons mix in seasonality and ad changes.
Split by device. A drawer that works on desktop can hide the checkout button on a phone. Read mobile and desktop separately.
Count orders, not clicks. An add-on counts once the order is paid. Record the offer on the order line, so refunds and returns of add-ons show up too.
Run long enough. At least a full week, so weekdays and weekends both count, and until the sample is large enough for the difference you expect.
Change one thing at a time. Offer, position, count or wording. Two changes at once tell you nothing.

Run the test on your own traffic. No published benchmark predicts your result.

How to size and read an A/B test is in what is A/B testing. For the wider list of levers beyond the cart, see increase ecommerce conversion rates.

Where the drawer fits among upsell placements

The drawer is one of four moments to make an offer. Each one suits a different kind of offer.

Placement	When	Best offer	Payment
Product page	Before add to cart	Variant upgrade, bundle, "frequently bought together"	Part of the first order
Cart drawer	Right after add to cart	Complementary item, free-shipping goal, quantity tier	Part of the first order
Checkout (order bump)	On the payment page	One low-priced add-on, unticked checkbox	Part of the first order
Post-purchase	After payment, before the thank-you page	A one-click offer on the card just used	A second charge

Don't stack the same product across all four. A shopper who declined the refill pack in the drawer shouldn't meet it again as an order bump and then again after payment. How the post-purchase step works, including the second charge, is in 1-click upsell. If shoppers leave the cart without buying at all, the remedies are in how to reduce cart abandonment.

Where Tagada fits

How Tagada helps

Checkout with one-click upsells and order bumps

Tagada's checkout includes one-click upsells, order bumps, A/B tests, Apple Pay and Google Pay. It runs standalone, on Shopify, on WooCommerce or headless. Purchases are tracked server-side to Meta, Google and TikTok. Payments route across TagadaPay and processors such as Stripe, NMI and Airwallex, with a cascade to another processor when one is down or times out. Pricing is on the pricing page. Tagada follows Visa and Mastercard rules and the laws that apply to payments.

Start free

Whatever tool runs your drawer, the rules don't change: one relevant offer, a checkout button in sight, numbers that match your real prices and shipping, and a holdout to prove it works.

Updated on October 14, 2026

Nick Bonnassies

CMO at Tagada

CMO at Tagada. Before Tagada, Nick built direct-to-consumer brands that generated over $115M in sales, raised over $25M in crowdfunding and sold two of them. He also works as a fractional CMO on marketing operations and AI systems.

Frequently asked questions

What is a cart drawer upsell?

It's an offer shown inside the slide-out cart that opens when a shopper adds a product. The shopper sees what's in the cart, plus one to three suggestions: a matching item, a free-shipping goal, a bigger quantity at a lower unit price, a bundle or a subscription. They add it in one tap, without leaving the page, then go to checkout.

Does Shopify have built-in cart drawer upsells?

Partly. Online Store 2.0 themes such as Dawn offer a drawer cart type, and the free Search & Discovery app lets you pick complementary products. Shopify documents the complementary products block on the product page, not in the cart. Showing recommendations in the drawer takes a few theme edits with the Product Recommendations and Cart APIs, or an app.

Do cart drawer upsells slow down a store?

They can. The drawer opens right after a tap, so its speed counts in Interaction to Next Paint, which Google rates good at 200 ms or less. Show the cart first, fetch suggestions in parallel, reserve their space so nothing jumps, and keep app scripts light. Measure on real phones at the 75th percentile, not on a fast desktop.

Is a cart drawer better than a cart page?

There's no general answer. A drawer keeps shoppers on the page they were browsing; a cart page gives more room to review a complex order. Published comparisons come from app vendors and often disagree between mobile and desktop. Test both on your own traffic, split by device, and judge on completed orders, not on drawer clicks.

How many products should I show in a cart drawer?

Few enough that the checkout button stays on screen on a common phone without scrolling. In practice that's one to three suggestions, often one on mobile. Vendor guides agree on keeping it short, but none of their numbers come from a public study, so test the count against a holdout and watch checkout clicks, not just add-ons.

Can I pre-select an add-on in the cart?

Not a paid one, if you sell to EU consumers. Article 22 of the Consumer Rights Directive requires express consent for any extra payment, and a payment taken through a pre-checked default must be refunded. In the US, the FTC lists auto-adding items or using pre-checked boxes as a dark pattern. Let the shopper tick the box.

Sources

Checked October 14, 2026

Tagada

Checkout with one-click upsells and order bumps

Funnels, one-click upsells, subscription billing and payment routing, on one customer record.

Start free See pricing

01Create your free account
02Connect your store or build a checkout
03Launch funnels, upsells and subscriptions