How to Customize Checkout and Thank You Pages using Shopify Checkout Extensibility

If you're using Shopify for your storefronts, it is time to consider innovation for your checkout. Even if you enjoy the current Shopify checkout functionality, you need to get prepared for the significant changes. Starting on August 13, 2024, Shopify will stop supporting currently available checkout.liquid and additional scripts for information, shipping, and payment pages. Plus, from August 28, 2025, these will also be turned off for thank you and order status pages.

What's instead? Instead, Shopify provides Checkout Extensibility functionality for Shopify Plus users and some new customization options for other plans to extend the range of development opportunities and boost conversions.

What does Shopify Checkout Extensibility stand for, how to migrate your customization and customize checkout and thank you pages in a new reality? This article gets you covered.

Why customize Shopify Checkout and Thank You pages

A checkout page is a place where customers can choose payment methods, shipping options, and see billing details. When using Shopify, merchants can decide in favor of default checkout features or customized checkout pages aligned with their special requirements like extra shipping options. The same works for thank you pages, where you can just leave a short message like "thank you for your purchase" or leverage it for upsell/cross-sell. This step of the buyer's journey is especially important given the fact that checkout abandonment for online stores in recent years has been 60-80%. In order to reduce this rate companies strive to optimize their checkout in the best way possible.

Some other reasons to customize your checkout and thank you pages:

• boost customer engagement
• increase conversion rates at every checkout
• improve user experience with advanced shipping and payment options
• get more insights about customer experiences
• drive more sales.

Let's see if Shopify's new checkout functionality gives the opportunity to achieve these goals.

How to customize Shopify checkout pages with Basic and higher plans

Regarding the full set of Checkout Extensibility features, they’re only included in the Shopify Plus plan. However, some new checkout customization options are available for Shopify Basic and higher plans by using custom and public Shopify apps. Such apps help add, hide, or rename payment methods and delivery options, and more. For example, you can install a payment method customization app from the Shopify App Store and configure desired payment custom options in your admin panel. Similarly, you are free to use any public app built with Shopify Functions. Besides checkout customization apps, there are also available post-purchase app extensions for upsell and cross-sell and web pixel apps for tracking customer behavior.

How to customize checkout pages in Shopify even further, adding more custom features?

If you need more profound customization, reach out to a trusted Shopify partner like DigitalSuits to develop a custom solution tailored to your specific needs. Along with deep expertise in developing public and custom Shopify apps, DigitalSuits developers excel at third-party app integrations. This expertise forms a solid foundation for extending your Shopify project functionality to any desired scope.

If your project has already extended the limit of the features available for basic Shopify plans, consider switching to Shopify Plus, as it opens way more customization opportunities like the complete range of Checkout Extensibility functions.

See how Shopify Plus checkout extensibility package differs from that for other Shopify plans.

Next, we make a detailed review of Checkout Extensibility features and capabilities.

What is Shopify Checkout Extensibility?

Shopify Summer ‘22 Edition announced over 100+ updates to improve user experience and boost merchant success based on cutting-edge solutions. One of these updates was the improved checkout functionality – Checkout Extensibility. By announcing Checkout Extensibility, Shopify team offered a new way to handle checkout operations by using apps and branding tools. In the years that followed, they continued upgrading checkout features and added new functionality including Shopify's collection of 14 new components and APIs for even more bespoke checkout experiences.

Note that Checkout Extensibility is an umbrella term for five different technologies:

• Checkout UI extensions
• Branding API
• Shopify Functions
• Post-purchase checkout extensions
• Web pixel extensions

We'll explore them further but let's clarify first how this new approach is different from the previous one based on checkout.liquid.

What is checkout.liquid?

Checkout.liquid is a code-based file located in the layout directory of your Shopify theme.

The same as for Checkout Extensibility, checkout.liquid is only available for Shopify Plus users. Others can customize their checkout pages through Theme editor.

The default checkout.liquid file requires updating to add customization. However, as the Shopify team claims, there are some difficulties with maintaining and testing customization with this method. Plus, it is incompatible with Shop Pay, has security vulnerabilities and requires complicated updates to access new features. This scope of issues along with Shopify team’s desire for constant checkout improvement have led to development of Checkout Extensibility.

In contrast to checkout.liquid, Checkout Extensibility allows for implementing customization using tools other than Liquid. And that's not the only feature of the latter that sets it apart from the previous checkout solution.

Advantages of Checkout Extensibility

Checkout Extensibility is a preferred way of Shopify checkout customization for several reasons.

• App-based: Shopify Store provides more than 90 public apps for customizing your checkout which allows you to scale your projects without overloads and save time by incorporating no-code solutions.

• Enhanced security: New Shopify UI components and APIs run in isolated environments, improving security indicators. Consistent buyer experience: You have the same features applicable for Checkout, Thank you, and Order status pages for upgrading your entire checkout flow from beginning to end.

• Increased speed: With the Checkout Extensibility latest technology set, checkout interactions are processed twice faster.

• Upgrade-safe option: You get access to new checkout features as soon as they become available. So you don’t ever need to upgrade checkout as it was required with checkout.liquid.

• Fully integrated with Shop Pay: The unique Shopify payment system, Shop Pay, shows 50% better conversion for Shopify-based stores compared to guest checkouts. And new Shopify checkout features are completely integrated with Shop Pay to ensure smooth implementation of custom solutions.

• Shopify infrastructure: You don’t need to set up your own infrastructure to run Checkout Extensibility features, such as Shopify Functions and Checkout UI Extensions, since they’re mostly hosted on Shopify.

• Higher converting: Shopify claims that their checkout converts up to 36% better than other ones. And a couple of hundred developers are investing in improving Shopify checkout, so the new checkout functionality is expected to bring astonishing results.

Checkout Extensibility features

Finally, we’re ready to discuss five technologies that stand behind Shopify's new checkout functionality for Shopify Plus. They are a powerful addition to Shopify's public apps, which are available to Shopify Basic and higher plans.

Shopify Checkout UI extensions

Checkout UI extensions are intended for developers to create or extend Shopify apps for customizing the checkout. For example, these apps could add custom fields for collecting additional customer information, suggested products to add to customer order, or merchant configurable banners.

The process of app creation starts from the CLI command to scaffold a new Shopify checkout extension. Then, you can choose the most appropriate tool for your workflow, such as React, Vanilla JS, or TypeScript, and choose a location to insert your custom content. To build an app, at your disposal are extension APIs and UI Component Library.

Branding API

The Branding API feature is for changing styles of your checkout. How does it work? You can apply styling to the entire checkout page, its UI extensions, checkout queue, and customer account pages by using GraphQL Admin API. After applying new styles, you can preview changes in the checkout editor that works on a drag-and-drop basis. Checkout editor is only available for Shopify Plus users.

Shopify Functions

With Shopify Functions, you can customize the backend logic to build custom solutions, such as custom product bundles and advanced shipping features with fields for multiple locations. It’s an addition to apps and extensions that allows constructing and implementing your own logic behind the scenes of your storefront.

To start with Shopify Functions, you have to pick a programming language, such as JavaScript. Also, you need a package manager, such as NPM, and a Shopify Partner account. These and some other tools are essential for developing a function that could be further integrated with an application.

Post-purchase checkout extensions

This kind of extension allows you to add cross-sell and upsell features after a customer order is confirmed, just like it’s shown on the screenshot below.

If you have doubts whether it’s worth implementing, note that upselling increases revenue by 10-30%. To improve conversions on this step you can also personalize customer experience based on purchase history and cart contents. Still, being highly customizable, these extensions have to comply with Shopify UX guidelines and standards to ensure high performance across all stores.

Web pixel extensions

Web pixel app extensions provide developers with means for tracking and managing behavioral data, such as purchase history and user actions on a certain page. This is done through web pixels that are JavaScript code snippets for collecting behavioral data. Web pixels are loaded to sandbox environments with APIs for subscribing to user events. This method of collecting data eliminates the need for adding tracking codes, it’s secure and avoids performance and privacy alerts.

How to upgrade to Shopify Checkout Extensibility?

Firstly, note that Checkout Extensibility isn't compatible with checkout.liquid, additional scripts, or apps using script tags. It’s necessary to create your new checkout, remove checkout.liquid, and migrate customizations until August 2024. At the moment, you can revert to checkout.liquid if something goes wrong. Plus, note that until August 28, 2025 you must also replace your old Thank You page and Order page using Checkout Extensibility features.

What are the steps of migrating your customizations to Checkout Extensibility?

After you have learned the essentials of Checkout Extensibility and how to apply its features, you may go further with the following workflow.

1. Assessment to identify current customization: Start with testing and visually reviewing your current checkout and thank you pages, comparing them with the default drafts to see if there are any customization on your pages to spot the differences. Next, request a report that identifies customization in your Shopify admin. To do it, go to Settings → Checkout → Upgrade to Checkout Extensibility, then click View personalized report. You will get a CSV file that includes information about your customization categories, such as Branding or Validations; customization name and description; source file like checkout.liquid; code lines responsible for customization; and guidance for migrating to Checkout Extensibility. You also need to check for installed apps that customize the Thank you and Order status pages in Settings → Apps.

2. Evaluation: Decide how many features you want to migrate to define the scope of work to do. You might wish to combine upgrading your previous customization with extending your current functionality with new features available with Checkout Extensibility.

3. Feature mapping: Define which features you will be using, such as apps or custom solutions. If you need custom UI and content on the checkout page, plan to use Custom UI extensions. If there is a need to change the checkout look, consider the Branding API. For changing backend business logic, use Shopify Functions. For offering something on a post-purchase phase, such as suggested products, make use of Post-purchase Shopify checkout extensions. To track buyer or user behavior, migrate your feature to Web pixel extension.

4. Implementation: At this stage, choose how to implement your customization. If you’re ready to do it yourself, decide on which tools to use. Then, in your Shopify admin, choose Settings → Checkout → Checkout customization and click Create draft checkout. After you are ready with customization for your new checkout, click Publish. If you need professional help to speed up the process, hire a development team with hands-on experience in Shopify checkout customization.

Common issues when upgrading to Checkout Extensibility

1. It’s plain that migrating to checkout extensibility requires knowing other than Liquid tools, such as React, Javascript, and GraphQL. Also, it is essential to incorporate Shopify Polaris as a UI framework for Shopify apps and UI components library to build checkout extensions. So, if you have no prior experience with such tools, you need to look for a specialist who is familiar with them.

2. The exploration of checkout extensibility features for upgrading your customization may lead you to the discovery that available sources like Google and Shopify support forums don't have all the answers to your questions. Some topics are covered poorly, while others are not covered at all. The reason is that it is a new technology and the internet isn’t currently full of information on the subject.

3. To upgrade or build complex customization, it’s crucial to know the full scope of Checkout Extensibility features. This allows optimizing your development process both by spending less time and applying the most suitable solutions.

4. Shopify checkout extensions have limited APIs, so at the development stage there is no access to certain fields. This leads to seeking alternative ways of extending or upgrading functionality. In other words, current checkout extensibility capabilities are not always sufficient for implementing complex business ideas. So, it becomes essential for a developer to think outside the box and combine multiple solutions to transmit data and extend functionality.

5. If you decide to publish your app you may encounter difficulties with aligning to Shopify requirements and data compliance. To simplify this process, consider reaching out to the DigitalSuits specialists. We have a proven track record of publishing Shopify apps.

Cases of implementation Checkout Extensibility features

To illustrate the results of applying Checkout Extensibility features, we have some successful cases in DigitalSuits’s portfolio.

• Galeria Avanti: We developed a pickup points extension-only app for a clothing brand to let its customers pick up their purchased products from third-party locations. With Shopify new checkout features, we also added checkout & cart validations and thank you & order details customizations.

• Batch: Our team implemented volumetric discounts based on predefined item attributes to customize selling options, encourage customers to add more items to a cart, and grow sales for particular product groups.

• Yepoda: For Yepoda, a Korean cosmetics brand, we migrated their previous checkout functions to Checkout Extensibility. Namely, we transferred payment customization and implemented checkout UI extensions to show payment methods within a certain condition, such as based on shipping preferences and discounts.

• Cheeky: We added upsell functionality to the checkout for the Cheeky store to let its users choose additional products right in the checkout page. The suggested items are dynamic and complement the items in the cart.

• Luma Nutrition: For Luma Nutrition, we migrated the functionality that was written with checkout.liquid. We implemented a banner image in the checkout page, countdown timer, and list of sections (pictures + title + text) using Checkout Extensibility. We are also planning to transfer the Script Editor functionality to Shopify Functions.

Checkout Extensibility solutions applied in these cases allowed clients to add features that changed business logic and buyer journey experience. As a result they gave customers more shipping and payment opportunities which eventually led to increased sales.

See the list of our cases with all the results here. And the list of what could be done with Checkout Extensibility is almost unlimited.

To sum up

If you haven’t yet built a workflow for upgrading your Shopify store’s customization, hurry up, as time is running out. Within just four to five months, current Shopify Plus checkout functionality will be turned off. So, benefit from the range of Checkout Extensibility features for upgrade right away. If you need a team of professional Shopify developers to enable smooth and fast checkout migration or create custom checkout solutions from scratch, get in touch with us. We’re here to help you at any stage of your development process.