What the customer sees
Updated Sep 10, 20263 min read
The offer looks slightly different on each surface, because each one runs at a different moment in Shopify's checkout. All three show your heading, the offered product with its price and discount badge, an accept button and a decline link.
Post-purchase page
Shown after payment, before the order confirmation page, as a full page of its own.
- Your Offer heading — or "A special offer for you" if you left it empty — in a callout at the top.
- A line written automatically underneath, naming the product and its discount: "It's not too late to add [product] — 15% off. Ships with the rest of your order, no extra checkout." When the offer has several products it reads "[product] and 2 more".
- One card per offered product: image, product name, dropdowns for each option when the product has more than one allowed variant, the original price struck through, the discounted price, and the discount badge.
- Subtotal, Shipping, Taxes and Total for that addition, so the customer sees exactly what accepting will cost before clicking. These fill in a moment after the page loads; until then they show a dash.
- Your accept button on each card, and your decline label as a link at the bottom.
Accepting collapses that card to "✓ Added to your order". If there are other products left, the page stays open for them and the bottom link becomes Continue to order confirmation. If a product is unavailable the button reads Sold out.
If the charge fails, the card shows "Couldn't add this to your order. Your original order is unaffected." and the button becomes Try again. After a second failure the card stops offering and reads "This item can't be added right now — your original order is unaffected."
Thank-you page
Shown as a block on the order confirmation page, wherever you positioned it in the checkout editor.
- Your Offer heading.
- The line "Ships together with the rest of your order."
- Up to two product rows at a time, each with a thumbnail, the product name, the original price struck through, the discounted price, a discount badge, and variant dropdowns where the product has more than one allowed variant. If the offer has more than two products, arrows page through them.
- The accept button on each row shows your label with the discounted price under it.
- Your decline label as a link under the offer. Clicking it hides the offer for that page view.
Accepting takes the customer to Shopify's hosted page to pay the difference. See How accepted upsells are charged.
Checkout
Shown as a block inside checkout, on Shopify Plus stores only.
Identical to the thank-you card, except the line under the heading reads "The discount is applied as soon as you add it." and accepting adds the product to the cart on the spot: the row's button is replaced by a green Added, and the cart summary updates with the discounted line.
What the customer never sees
- Your upsell name. The Upsell name field is internal.
- A quantity picker. Accepting always adds one unit.
- More than one offer per surface. Only the newest matching Active upsell for that surface is shown.
- An empty block. When no upsell matches, the block renders nothing at all rather than blank space — and on the post-purchase page, Shopify skips the page entirely and goes straight to the order confirmation.
In the checkout editor
Inside Shopify's checkout editor the thank-you and checkout blocks show a placeholder banner reading "Your checkout upsell offer appears here for eligible customers. Visible to you in preview only." (or the thank-you wording). The editor has no real order or cart, so no offer can be built there. Use the Preview panel in Hype for a mock of the real layout, and a real test order to see the finished thing.
Related
Was this article helpful?
Related articles
Still need help?
Start a chat and we'll pick it up right here.