A product offer is an additional sales opportunity that's displayed to customers before or after they complete checkout. This guide introduces pre-purchase product offers, and post-purchase product offers, and describes the available resources that you can use to build product offers in Shopify checkout.
How it worksAnchor link to section titled "How it works"
You can build functionality in your app that enables merchants to provide the following experiences:
Pre-purchase product offersAnchor link to section titled "Pre-purchase product offers"
You can use a checkout UI extension to build a pre-purchase product offer. The following example shows a pre-purchase product offer that renders at the
Checkout::Dynamic::Render extension point:
Post-purchase product offersAnchor link to section titled "Post-purchase product offers"
The post-purchase page appears after the order is confirmed, but before the order status page. You can use a post-purchase extension to add custom content such as the following:
|Upsell offers||Prompt a customer to add more products to their initial order after they've completed payment.|
|Survey requests||Ask a customer to complete a survey after they've completed checkout.|
|Feedback requests||Ask a customer to complete a feedback form after they've completed checkout.|
|Donation requests||Ask a customer to submit a donation after they've completed checkout.|
|Discount code offers||Offer a customer additional discounts on products using a specific code.|
|Loyalty sign-ups||Ask a customer to join a rewards or points program.|
|Important notifications||Offer additional information that's valuable to customers.|
The following example shows a basic example of a post-purchase checkout extension:
Getting startedAnchor link to section titled "Getting started"
Follow these tutorials to get started with building pre-purchase and post-purchase experiences.
Developer tools and resourcesAnchor link to section titled "Developer tools and resources"
Explore the following developer tools and resources to get familiar with building pre-purchase and post-purchase experiences.
Pre-purchaseAnchor link to section titled "Pre-purchase"
Checkout UI extensions API reference
Consult the API reference for checkout UI extension points and their respective types.
Components for checkout UI extensions
Learn about the components that are available in checkout UI extensions.
Checkout extension configuration
Learn about the properties that you can configure in your checkout UI extension.
Post-purchaseAnchor link to section titled "Post-purchase"
Post-purchase extension points API
Consult the API reference for post-purchase extension points and their respective types.
Components for post-purchase extensions
Learn about the components that are available in post-purchase extensions.
Post-purchase extensions configuration
Learn about the properties that you can configure in your post-purchase checkout extension.
Learn how JWTs need to be structured in order to be used in post-purchase checkout extensions.
- Build a pre-purchase upsell offer that prompts a customer to add a product to their order.
- Get started building a post-purchase checkout extension.