Post-purchase app upsell overview
Post-purchase app extensions give developers and Plus merchants the ability to add post-purchase upsell directly into the Shopify checkout. A post-purchase page displays an offer to a buyer after their order is confirmed, but before the thank you page.
- You've created a partner account and a development store.
- You've installed the Shopify App CLI
- You follow the UX guidelines and limitations and considerations
- You request access in order to use the extension on a live store
The following diagram illustrates a high-level customer flow for an app that uses a post-purchase app extension:
The customer navigates to the payment information page.
The page loads the Checkout::PostPurchase::ShouldRender extension point.
(Optional) App extension makes a network call to your app server to obtain any data needed for the post-purchase page. The extension can store data in the browser's local storage, speeding up time to first render.
App extension returns the result of
renderto the payment information page. For
true, all the required conditions must be met (for example, the customer's credit card must be vaulted before the post-purchase offer is displayed).
The customer completes checkout.
If render returned
true, then the post-purchase page loads the Checkout::PostPurchase::Render extension point. Any stored data is directly available to the
renderextension point. You app needs to call done to redirect the customer to the thank you page.
App Bridge Checkout
The post-purchase app extension renders in the checkout using App Bridge Checkout. App Bridge Checkout is a technology created by Shopify that allows apps to integrate directly into the Shopify checkout. It includes a set of consistent UI components, and development tools for authoring them.
You create an app extension by writing in Vanilla JS or React, and deciding whether to use TypeScript. Shopify securely hosts and renders your user interface seamlessly in the client. When the post-purchase app extension appears to the customer in checkout, it includes both app-provided and Shopify-provided interface elements, as shown in the diagram below:
Apps can also create a purchase funnel experience. A purchase funnel is a model that illustrates the customer journey toward purchasing one or more products. The purchase funnel allows merchants to control what post-purchase offers are shown when a customer purchases a certain product.
For example, a merchant could create a purchase funnel that includes the following products:
- Main product: The product that the customer is initially purchasing. When the customer completes checkout, this product triggers the post-purchase page to display.
- Post-purchase offer (Product A): The product that is offered to the customer on the post-purchase page. If the customer accepts the offer, then the thank you page displays both the main product and product A.
- Post-purchase offer (Product B): Another product that is offered to the customer on the post-purchase page. If the customer declines the first offer (Product A), then they can be presented with an another offer (Product B) before being redirected to the thank you page.
- Get started building a post purchase app extension: Learn how to develop a post-purchase app extension that's displayed within the Shopify checkout.
- Post-purchase extensions API reference: Learn how to build your post-purchase app extension, including which extension points are available, their input and output types, and structure.