Post-purchase app upsell overview

An example post-purchase app extension rendered in Shopify checkout

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.

Requirements

Customer flow

The following diagram illustrates a high-level customer flow for an app that uses a post-purchase app extension:

Post-purchase flow diagram

  1. The customer navigates to the payment information page.

  2. The page loads the Checkout::PostPurchase::ShouldRender extension point.

  3. (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.

  4. App extension returns the result of render to the payment information page. For render to be 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).

  5. The customer completes checkout.

  6. If render returned true, then the post-purchase page loads the Checkout::PostPurchase::Render extension point. Any stored data is directly available to the render extension 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:

Post-purchase app extension framework diagram

Purchase funnels

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.

An example post-purchase app extension rendered in Shopify checkout

Next steps