Customize Shopify Checkout With Checkout UI Extensions (2023)

Shopify Checkout has always been built for speed and optimized for conversion. Now, we’re making it more customizable than ever with new checkout UI extension capabilities and surface areas. These updates, announced at the Shopify Winter ’23 Edition, make it easier for Shopify Plus merchants to customize their checkout in a way that’s app-based, upgrade-safe, higher-converting, and integrated with Shop Pay. 

And now, checkout extensibility apps that customize the Shopify Checkout can be sold in the Shopify App Store directly to Shopify Plus merchants, opening up new opportunities for app developers. 

In this article, we take a closer look at these new capabilities, and how you can work with them.

Catch up on the latest developer announcements from the Shopify Winter ’23 Edition

The Shopify Winter ’23 Edition was full of big announcements for developers who work with Shopify. Visit our roundup on the Shopify Partner Blog to get caught up on all the news.

Read article

Existing checkout UI extension capabilities

Previously, checkout UI extensions could support a number of customizations, including:

  • Informational use cases, like custom banners, messages, warnings, or disclaimers. For example, adding a banner saying that a brand doesn’t ship to PO boxes.
  • Inputs, like adding additional fields to collect buyer information or customize orders. For example, allowing buyers to add a gift message.
  • Product offers like upsells, free samples, and donations directly in the checkout.

Starting now, these capabilities are joined by four new checkout UI extension APIs.

Checkout UI extensions: An example of possible customizations
An example of the existing customizations available with checkout UI extensions. See the upsell offer for space socks, the additional field for buyers to add a gift message, and the custom banner with the shipping notification.

New UI extension points and APIs

At the Shopify Winter ’23 Edition, we announced four new checkout UI extension APIs and a developer preview for UI extensions on the order status page. To better understand the value of each of these releases, we’ll walk through each new API and surface area and explain what it does and what use cases can now be solved. 

Discount Code and Gift Card APIs

The new Discount Code and Gift Card APIs support the reading and writing of both discount codes and gift cards directly in the checkout. 

Practically, this means that brands will be able to allow buyers to redeem their gift cards or discount codes directly in the checkout, and receive confirmation that it was applied to the purchase. 

Checkout UI extensions: An example of a gift card being applied at checkout
An example of a gift card being applied at checkout.

Session Token API

Today, Checkout UI extensions can make network calls if they request the necessary permissions. However, there has been no way to sign or verify the authenticity of those network requests. With the new Session Token API, Shopify provides a signed token that can be verified on an app server. 

One popular app category that will benefit from the Session Token API is loyalty apps. Loyalty reward programs can’t just let any user access the balance details of any buyer. Now, they can use the signed token from the Session Token API to verify the buyer’s identity. The same is true for any other app that needs or wants security around their services.

Checkout UI extensions: Loyalty points being applied at checkout
Loyalty points being redeemed in checkout, thanks to the Session Token API.

Querying the Storefront API 

You can now use the Storefront API to power the logic of your checkout UI extension. This means you’ll be able to pull relevant results for things like product tags and collections, recommended products, or currency conversions. Shopify will manage the access tokens, so all you need to do is provide the query. This direct API is available to all app types, including, for the first time, non-sales channel public apps.

Checkout UI extensions: Customization with the Storefront API
Querying the Storefront API to pull product tags allows you to build custom checkout messaging—for example, displaying a message about eco-friendly products.

Editor Preview API 

We also recently released a new property for the Checkout UI Extensions API, extension.editor. This property allows you to know whether an extension is running inside the checkout editor or on a real checkout, and allows you to provide a better in-editor user experience for merchants. Practically speaking, this API will ensure that your UI extension preview works correctly in the checkout editor, so merchants can configure it appropriately. 

Checkout UI extensions: Extension editor
Use the Editor Preview API to make sure a preview is always generated in the checkout editor even when conditions are not met. 

Order status page (Developer preview) 

Although we’ve made great progress with app-powered UI extensions directly in the checkout, one area that wasn’t yet customizable with UI extensions was the order status page. We heard your feedback and at the Shopify Winter ’23 Edition, we announced a developer preview for app-powered UI extensions on the order status page. This new surface area will make it much easier for the thousands of merchants leveraging tools like post-purchase surveys to deploy and configure their unique customizations. 

As a result of this announcement, you can now build extensions that: 

  • Generate engagement with social groups, re-targeting, or referral links 
  • Help better understand buyers with post-purchase or post-fulfillment surveys or reviews
  • Fulfill digital products with download extensions 

These extensions follow the same workflow as our existing checkout UI extensions, only they offer additional APIs to access data post-checkout and can render in a different spot. Order status page UI extensions will also inherit branding, just like with checkout UI extensions. Best of all, merchants will be able download apps from the Shopify App Store and configure them directly in the no-code checkout editor. 

Checkout UI extensions: An example of a digital download on the checkout page
An example of a digital download on the order status page.

Sell your checkout extension app in the Shopify App Store

Checkout extensibility apps that customize the Shopify Checkout can now be sold in the Shopify App Store directly to Shopify Plus merchants. Gone are the days of needing to work one-on-one with a merchant to develop custom checkout code in the checkout.liquid theme file. Instead, Shopify Plus brands can simply download your app and configure it directly in the checkout editor without ever having to touch a line of code. This new model creates the ideal win-win scenario, as merchants can ramp up their checkout much faster with apps, and developers can sell their unique checkout customizations to a much larger audience. 

Dig deeper into the developer products announced at Shopify Editions

Join our upcoming Shopify Editions-focused AMA sessions on our Discord channel. Learn from industry experts, including Shopify CEO Tobi Lütke, ask questions, and connect with other like-minded individuals.

You can RSVP to whichever AMA sessions interest you on our Discord channel in the ‘Events’ category at the top left of the channel list. Join our Discord channel at the link below.

Join now

Build custom checkout experiences

We’re fully committed to providing the building blocks you need to build incredible checkout apps and experiences. Our new checkout UI extensions are just the first piece of the puzzle. We also plan on rapidly adding new APIs and capabilities to extend the Shopify Checkout throughout the year. 

Keep in mind that although we’re focusing on Shopify Plus brands and checkout UI extensions here, Shopify Checkout can also be customized with Shopify Functions, web pixel app extensions, post-purchase extensions, and checkout branding. You can learn all about the checkout extensibility options in our developer documentation

To get started building checkout UI extensions, visit our developer documentation. We’ve got everything you need to start building including overviews on extensible surface areas, API references, tutorials, and more.