How to add an upsell to the Shopify cart page, without code
The cart page is where the customer reviews the order before paying. It is the last moment to add something while the order is still open, and unlike offers inside checkout, it is available to every store, whatever the plan.
Why the cart page
- The customer has already decided to buy. The only question left is what goes in the order.
- Offers inside Shopify’s checkout pages require Shopify Plus. The cart page comes before checkout, so any store can use it.
- An item added here can help the customer reach a free-shipping threshold, which the post-purchase page can no longer do.
What a good cart offer looks like
- One product, clearly related to what is in the cart.
- A visible price, with the discount shown if there is one.
- An obvious way to say no and continue to checkout.
- The look of your store, not a generic popup.
When to show it
Two approaches are common. A block inside the cart page is always visible, and easy to scroll past. A short window when the customer clicks Checkout is seen by everyone who gets that far, which makes it effective, and it has to be quick to dismiss so it never feels like a toll gate.
Setting it up with an app
Most cart upsell apps, FlatUpsell included, use a Shopify app embed: a part of the app you switch on in the theme editor, with no theme code to edit.
- Install the app and create an offer: the product that triggers it, the product to offer, and the discount if any.
- In Shopify, go to Online Store, then Themes, then Customize, and turn on the app’s embed in the App embeds panel.
- Add the trigger product to a cart on your store, open the cart page and click Checkout to see the offer.
- Check it on a phone. That is where most customers will see it.
Discounts on the cart page
If the offer includes a discount, it has to be applied at checkout, or the customer will see the full price when paying and lose trust. Good apps create the discount and apply it automatically, so the customer never has to type a code.
Common problems
- The offer doesn’t appear: check that the app embed is on in the theme you are actually using, and that the cart really contains the trigger product.
- Your theme opens a cart drawer instead of a cart page: check where your checkout button lives and whether your app covers that drawer.
- The offer looks out of place: use an app that picks up your theme’s font, colors and corner radius.
- The offer slows the page: an offer that loads after the page, only when it is needed, keeps the cart fast.
Don’t overdo it
The cart page is the last step before payment, and every extra second there has a cost. One offer, one product, one click to dismiss. If your cart offer doesn’t earn its place after a few weeks, move the product to the post-purchase page instead, where it cannot get in the way.
With FlatUpsell
FlatUpsell shows its cart offer when the customer clicks Checkout. It picks up your theme’s font, color and corner radius, applies the discount automatically at checkout, and records views, acceptances and revenue for the dashboard. It is built on Shopify’s public cart API, so there is no permission to request and it works on every plan.