Checkout Upsells on Shopify Plus That Work

A checkout upsell is the last chance to add one more thing to an order before the shopper pays. It is also the most restricted place on Shopify to put one. Whether you can do it at all depends on your plan, and what you can show there is set by Shopify's checkout extension rules. This guide states the plan requirement first, then walks through what an extension can and cannot do, how to choose the single product to offer, and what the copy should say.

The Plus requirement, first

Shopify's developer documentation for checkout UI extensions says: "Checkout UI extensions for the information, shipping, and payment steps are available only to stores on a Shopify Plus plan." The documentation for pre-purchase product offers, the type of offer this post is about, repeats the same restriction for the information, shipping and payment steps. In Shopify's words, a pre-purchase product offer is an additional sales opportunity that's displayed to customers before they complete checkout.

So a checkout upsell inside those steps is a Shopify Plus feature. If your store is on another plan, the options in the checkout flow are narrower, and our guide to the upsell, cross-sell and downsell placements lists what Shopify documents for each plan. This post assumes you are on Plus, or planning to be. The app's Checkout upsell template also requires Shopify Plus; see the pricing page for plan requirements.

What a checkout extension can render

Checkout UI extensions are made of three parts, according to the documentation: targets that decide where your UI appears, target APIs that give access to checkout data and functionality, and web components that render the buttons and text.

Two details matter for an upsell:

• Block targets are placed by the merchant. A block target, such as purchase.checkout.block.render, is a flexible placement that merchants position using the checkout and accounts editor. The pre-purchase UX guidelines use that target for a product offer and say it lets the merchant choose where the offer displays. The documentation also says merchants can add up to three extensions to the same block target location.
• Static targets sit at fixed locations. They render at set places such as before the actions in each step, after the contact fields or after the cart line items. They only render when the checkout feature they are tied to renders. The documentation's own example is that shipping methods aren't shown when a buyer picks store pickup, so extensions tied to the shipping method aren't rendered either.

An extension appears in checkout only after the merchant adds it in the checkout editor: Shopify's testing guide says checkout UI extensions don't display in checkout until the merchant uses the checkout editor to add the extension. The tutorial for a pre-purchase offer describes the build: query the Storefront API from the extension to get product data, create the interface, and use the extension API to read and write cart information.

What it cannot do

Read the limits before you design the offer:

• A static target is not placed by the merchant. If you need the offer in one spot on every device, use a block target and place it deliberately.
• It can be rate limited. The documentation says rate limits may apply to extensions that make too many changes during a checkout. After an extension is rate limited, it can't make further changes during the buyer's session, so batch changes and apply only the ones the extension needs.
• Placement decides who sees it. The pre-purchase guidelines recommend the ORDER_SUMMARY4 target for an offer, while also calling a product offer secondary content that should be placed outside the order summary. They add that on mobile the order summary area is collapsed by default, so an offer placed there won't display until the customer expands it. Read both lines before you choose a spot.

The guidelines also give a design rule: only show two product offers at a time, because adding more than two can overwhelm customers and make it difficult to choose. They recommend secondary buttons for the add action, since primary buttons are reserved for actions that progress checkout, such as paying or moving to the next step. This post goes further than Shopify: as our own planning advice, not a Shopify rule, show one offer.

Pick the one product

A checkout upsell has no room for browsing, so the product you choose does all the work. Use three filters, in this order. They are our rules of thumb.

1. Lower price than the cart. An add-on at a fraction of the cart value reads as a small extra. Set a ceiling from your data, such as a quarter of the median cart.
2. Related to what is in the cart. A refill with a bottle, a case with a device. An unrelated product looks like an ad.
3. In stock, with depth. An offer that sells out during the day creates broken pages, and a product with one unit left creates support tickets.

Here is the filter run on a cart of 64 dollars, with a price ceiling of 16 dollars. All numbers are assumptions.

Only the travel size passes. If two products pass, take the one with the better margin. The margin math for the discount level is in Upsell Pricing: How Much Discount Is Enough, so it is not repeated here.

Write the offer

Keep the copy to one line and one button.

• Heading: the benefit, not "Special offer": "Add a travel size for your bag".
• Line: the product, the price and the reason. "Travel size, 9 dollars. Fits the bag you're buying."
• Button: "Add to order". The guidelines say the added state doesn't need a success banner: the item appearing in the order summary is the confirmation.
• No false urgency. Do not add a timer or a "last chance" label unless it is true. If the offer has a real end, such as a stock cap, say what it is.
• Former prices. If you show a crossed-out price, the FTC's guide on former price comparisons (16 CFR 233.1) says a former price must be the actual, bona fide price at which the article was offered to the public on a regular basis for a reasonably substantial period of time. The guide's example of a false bargain is a price inflated for a few days only so that it can be cut back. This is not legal advice.

If you offer the add-on at a discount, make the discount visible and real. If you offer it at full price, say nothing about a discount.

What Shopify documents about the Thank you page

Shopify's documentation also lists targets for the Thank you page: an announcement, a block that merchants place with the checkout editor, and static targets for the header, customer information, order summary and footer. The use cases it lists for the block target include post-purchase offers. This post does not cover that page. It is a different step with different rules, and nothing here applies to it.

Build it, then measure it

Build the offer with the Checkout upsell template, described as "Offer one more product inside checkout." It requires a Shopify Plus store. Choose the product from your filter, set a stock check and run it for a fixed window. Compare the share of orders that include the add-on with the share of orders that include it on your product page, and subtract the discount. For the broader choice of where to offer what, see frequently bought together on Shopify for the product page version.