In previous articles we discussed Shopify’s shift into the “extensibility-first” era.
Basically Shopify is moving away from rigid systems and opening up more "surfaces" where we as developers can hook in.
Today, we’re diving into one of the most impactful surfaces: Shopify Checkout UI Extensions.
While the core checkout pages remain exclusive to Shopify Plus merchants, the Thank You and Order Status pages are open for all plans.
In this article, we’ll break down exactly what these extensions are, the multiple placement points where they live, and how to get started.
What Are Shopify Checkout UI Extensions?
In the simplest terms, Shopify Checkout UI Extensions are modular components that allow you to add custom UI and functionality into the checkout journey.
The Bigger Picture: Checkout App Extensions
It’s easy to get lost in the terminology, especially when you are reading the Dev Docs, so let’s zoom out.
Checkout UI Extensions are actually one part of a larger toolkit called Checkout App Extensions.
Examples under that umbrella include:
- Shopify Functions: Changes how checkout works in the backend such as custom discounts.
- Branding API: Changes the overall styling across the checkout such as fonts or colors.
- Checkout UI Extensions: Used to add additional content such as banners or upsells.
Key Takeaway: If you want to add content to the checkout, you use Checkout UI Extensions.
The Benefits of Checkout UI Extensions
- For Merchants: Customization is now "drag-and-drop" via the Checkout Editor. (They no longer need to fear that the checkout.liquid file; or theme updates break their payment flow.)
- For Developers: We get a modern DX (Developer Experience). With the Shopify CLI, detailed documentation, better error handling, and prebuilt components.
Example Use Cases for Checkout UI Extensions
Below are examples of what’s possible when building with Checkout UI Extensions:
- Informational Banners: Alert customers about shipping delays or holiday deadlines based on their location.
- Custom Data Collection: Add a "Gift Message" text area or a "How did you hear about us?" dropdown.
- Pre-Purchase Upsells: A "You might also like" section in the Order Summary to boost Average Order Value (AOV).
Example of an info-banner, that feels native to Shopify's other checkout components:
Where can you add Shopify Checkout UI Extensions?
Shopify Checkout UI Extensions can be placed on three levels.
We group them into page-level, area-level, and specific placement points.
When adding an extension, first decide which checkout page it belongs to, then choose the appropriate area on that page, and finally select the exact extension target within that area.#
Lets break this down step by step:
Page Level Checkout Ui Extensions
Checkout UI exentions can only be placed on certain pages
Namely:
- Checkout Page
- Thank You Page
- Order Status Page
Checkout Page
- This is the page where customers add their information, shipping details, payment option and checkout.
- Checkout UI Extensions inside this page are only available to Shopify Plus merchants
Example: Show a product offer before a customer completes checkout
Thank You Page
- This is the page where customers are shown the thank you message and order completion after completing checkout
- Checkout UI Extensions inside this page are available to All Shopify Plans
Example: Survey requests; ask a customer to complete a survey after they've completed checkout.
Order Status page
- This is the page where customers can track their order’s current status.
- Checkout UI Extensions inside this page are available to All Shopify Plan merchants.
Example: Recommend further products.
Area Level Checkout UI Extensions
On a single page (checkout page for example), extensions can live in different areas.
For instance we have the information area; shipping area, or order summary.
For a full list of areas you can add extensions to, refer to Shopify’s Dev Docs - Targets Overview for Checkout UI Extensions.
As for Order status page, refer to Shopify’s Dev Docs - Targets Overview for Order Status.
Extension Targets and Specific Placement Points
On the third level, we have the placement points within an area.
For example the Shipping area offers multipe target points for your extentsions.
For a full list of specific points you can add your extensions to, refer to Shopify’s Dev Docs - Targets for Checkout UI Extensions.
As for Order Status Page, refer to Shopify’s Dev Docs - Targets for Order Status
Static and Block Extension Types
When building with Checkout UI Extensions or any extension rather, you’ll come across these two types
Static extensions will display immediately before or after most core checkout features (eg. contact information, shipping methods, and order summary line items).
They work best when the functionality is closely related to the core checkout feature.
Block extensions will display between core features
They work best when the functionality works independently of any core checkout feature. An example would be adding a field to capture notes from the customer.
In short: Static extensions are locked together with a core checkout feature (shown before or after) while Block extensions are not and can be freely placed where the merchant desires..
How can I migrate checkout.liquid to the new Checkout Extensions?
Checkout.liquid has long been unsupported by Shopify and stores using it are mandated to move to using Checkout extensions.
For a detailed guide, please follow Shopify’s guide to migrating from checkout.liquid
You can also checkout the migration video down below.
Useful Resources for Building Shopify Checkout UI Extensions
- Understand the broader picture of apps in checkout
Technologies for customizing Shopify checkout
- Understand the broader picture of APIs used to customize checkout
- Learn about Checkout App Extensions (the high level idea of extending checkout)
- Contains the technical information for Checkout UI Extensions
- List of different use cases and tutorials for Checkout UI Extensions
Checkout UI Extensions on Thank you and Order Status Page
- Learn the overview of building Checkout UI Extensions on the Thank You and Order Status pages
Available APIs when building with Checkout UI Extensions
- Contains the full list of APIs you can use with Checkout UI Extensions
- Learn how to test your Checkout UI Extensions
- Learn how to handle errors when building with Checkout UI Extensions
- User Experience Guidelines for Checkout Apps
Final Thoughts:
If you want to see a practical examples of using Checkout UI Extensions, watch the full videos down below.
And if you need help in your developer journey, keep an eye on our bootcamp.