Showing upsells in checkout
Updated Sep 10, 20263 min read
Upsells in checkout require Shopify Plus. On a Plus store, add the hype-upsell app block to the Checkout page in the checkout and accounts editor; on any other plan the Checkout surface is greyed out in the Hype form with a Shopify Plus badge, and the Checkout surfaces status list shows the same badge instead of a state.
This is Shopify's restriction, not Hype's: app blocks on the information, shipping, and payment pages of checkout are Shopify Plus only, while blocks on the thank you and order status pages are available on the Basic plan or higher (Shopify: Customizing your checkout and customer accounts with apps).
Add the block
- From your Shopify admin, go to Settings → Checkout.
- Next to the checkout profile you use, click Customize.
- Make sure the page selector is on Checkout.
- Click Add app block in the section where you want the offer.
- Choose hype-upsell.
- Position the block, then click Save.
From Hype, the Set up button on the Checkout row of the Checkout surfaces card — or Open checkout editor on the banner inside a checkout upsell — deep-links to the published profile's Checkout page.
The same app block serves both the checkout and thank-you pages. Placing it on one page does not place it on the other; each page needs its own block.
In the editor you see a placeholder
Inside the editor the block reads "Your checkout upsell offer appears here for eligible customers. Visible to you in preview only." The editor has no live cart to build an offer from, and the block never adds anything to a cart in preview. Test with a real checkout.
What the customer sees
Your Offer heading, the line "The discount is applied as soon as you add it.", then one row per offered product with a thumbnail, the original price struck through, the discounted price, and a discount badge. Two rows show at a time, with arrows for the rest. Products with more than one allowed variant get a dropdown per option. Accepting swaps that row's button for a green Added; your decline label is a link under the rows.
How the discount is applied
Unlike the other two surfaces, checkout works on a cart that is still live:
- Accepting adds the chosen variant to the cart, tagged so Hype can recognize it.
- An automatic discount, created and maintained by Hype, prices that line.
- The customer pays once, for the whole cart, at the end of checkout.
The automatic discount is a single Shopify discount shared by every checkout upsell in your store, titled Hype Upsell Discount (Do not delete). Do not delete or edit it in Discounts — it is rewritten by Hype every time you save, enable, disable or delete a checkout upsell, and deleting it stops your checkout upsells from discounting. It is set to combine with your order, product and shipping discounts, so a shopper who already has a discount in their cart keeps it.
Disabling or deleting a checkout upsell removes only that upsell's entry from the shared discount. The discount itself stays for the other checkout upsells.
Limits
- Shopify allows the discount configuration to reference at most 100 collections in total across your store's checkout upsells. If your collection triggers exceed that, the save is refused with a message telling you the count. Reduce the number of selected collections.
- The discount never raises a price: a Set product price higher than the product's own price is skipped, and an Amount off larger than the line total is capped at the line total.
Related
Was this article helpful?
Related articles
Still need help?
Start a chat and we'll pick it up right here.