Checkout app extensions
Checkout app extensions make it easy for developers to extend their app code into checkout, and customize many aspects of the checkout experience. There are two types of checkout app extensions available: UI extensions and Scripts.
These app extensions make customizations easy to distribute, fast for merchants to install, and upgrade-safe, enabling merchants to continue getting platform benefits as Shopify releases new features.
Today, using checkout app extensions, you can do the following:
- Add new personalized content such as messages or interactive offers to the post-purchase page.
- Personalize the set of checkout options, such as shipping methods or payment methods.
Soon, you'll also be able to do the following:
- Add new UI to checkout, such as custom content, messages or interactive elements.
- Capture additional information from the buyer in checkout.
- Validate information input by buyers.
- Create custom discounts.
UI extensions allow you to add new user interface (UI) and functionality to checkout, and are built into apps using extension points, APIs, and UI components provided by Shopify.
Checkout UI extensions code is hosted on Shopify’s CDN for fast delivery. Your extension code is run securely inside of a Web Worker sandbox in the browser.
UI extensions are designed to provide enough flexibility to support a wide variety of customization use cases, while maintaining guardrails to ensure the trust and performance checkout has always been known for.
Post-purchase UI extension point
The first UI extension point to be released to developers is the post-purchase extension, available in public beta. These extensions allow developers and Plus merchants to surface an offer (such as an upsell) or show content to a buyer on a post-purchase page. This page is shown to the buyer right after they have completed their checkout and confirmed an order, but before they arrive at the thank you page.
Other checkout UI extensions
As development continues on checkout extensions, Shopify will release additional UI extension points for checkout, additional APIs, and new checkout components to expand the set of supported use cases.
Scripts let you add custom server-side logic to checkout, and securely change the behavior of payment methods, shipping rates, and checkout line items. You can use scripts to do the following:
- Hide shipping rates for B2B customers
- Add handling times to shipping rates
- Prioritize preferred payment methods
- Hide manual payment methods for non-eligible customers
How scripts work
You create a script and deploy it to a custom app. Merchants then install the app on their store so that the script runs when a customer interacts with Shopify checkout.
The following diagram shows the lifecycle of a script:
- App developers create scripts using Shopify CLI, test and configure scripts, and deploy scripts to a custom app. App developers monitor scripts by reviewing run times and errors in their Partner Dashboard.
- Merchants install custom apps on their store, enable the script on their store, and confirm that the script is working as expected.
- Customers interact with Shopify checkout which allows Shopify to find and execute the script.
Benefits of Shopify Scripts include the following:
- Co-located scripts run in Shopify: Scripts are co-located and run directly in Shopify, so they scale with Shopify checkout.
- Better performance: Complex scripts can run in less than 10 ms. Shopify Scripts is built on WebAssembly architecture to speed up the development process, improve reliability, and make your scripts run faster.
- Declarative rather than procedural APIs: Scripts APIs are declarative APIs, whereas the previous Shopify Editor scripts were procedural. This means that you tell the Shopify Scripts APIs what you want to do, and Shopify figures out how best to do it. For example, rather than letting you modify the checkout or the cart directly, Shopify exposes a list of well-defined, supported features that you can interact with and that will work predictably. Scripts APIs are also strongly typed, so more errors appear at compile time rather than at run time.
- Learn about the post-purchase checkout extensions that you can use to allow merchants to create and manage the post-purchase experience within the Shopify checkout.
- Change how payment methods display to customers at Shopify checkout.
- Change how shipping methods display to customers at Shopify checkout.