Checkout Extensibility: New era of shopping experiences

Digital commerce is undergoing a significant transformation, pushed by advancements in technology and evolving consumer expectations. At the forefront of this change is Checkout Extensibility, a new concept introduced by Shopify to offer flexibility and power in customizing the checkout experience. This guide explores the essence of Checkout Extensibility, breaks down its components, and outlines a step-by-step migration strategy.

Introduction to Checkout Extensibility

Staying updated with the latest technologies has become a necessity. Checkout Extensibility marks a huge step in this direction for Shopify merchants. It’s designed to replace traditional checkout customization methods, namely checkout.liquid page template and Shopify Scripts, which are set to be deprecated by August 13, 2024. This shift necessitates a move towards a more dynamic, resilient, and feature-rich checkout customization framework.

The update brings a whole stack of benefits, primarily not being locked to one version of the checkout making you incompatible with new features being rolled out. And updating the checkout.liquid was and is a tedious process of comparing versions and implementing the changes manually.

The new Checkout Extensibility brings us the concept of Checkout as a platform. A new level of primitives for changes and customizations, following the three main concepts Shopify has for the checkout which are Conversion, Compliance, and Composability.

The five pillars of Checkout Extensibility

The essence of Checkout Extensibility lies in five core components, each serving a distinct purpose in improving the checkout experience:

1. Checkout UI extensions. Facilitate the integration of custom user interface elements, enabling brands to maintain a consistent look and feel throughout the shopping journey. This is where you will add all the custom options, like delivery time slots, sections explaining shipping and returns, or whatever else fits your use case.

2. Branding API.  Offers support for changing the branding of the checkout. Here you will make sure to change the look and feel of the checkout to fit the rest of your Shopify store.

This is done using the GraphQL Admin API. You can apply styling to checkout, checkout queue, checkout UI extensions, and customer account pages.

3. Shopify functions. Change the functionality of the regular checkout without breaking the core functionality like with checkout.liquid template. The new feature allows you to create your changes in web assembly using any of the supported languages, such as Rust, Javascript, TypeScript, or others.

This allows for the application of real-time discounts, coupons, and dynamic pricing strategies, directly influencing the checkout process.

4. Post-purchase extensions. This functionality allows you to change how the post-purchase flow works and create your own custom elements. You could, for example, offer cross-sell or upsell products leveraging the moment of completed sale to boost the AOV (average order value).

5. Web pixel app extensions. You can add different tracking pixels and add event tracking as well. This allows you to implement in-depth tracking and analysis of user behavior during checkout

Who can use Checkout Extensibility

Some of the components of checkout extensibility are available only to Shopify Plus merchants. Let’s break this down so you have an overview of what is possible on which plan.

	Checkout UI Extensions	Branding API	Shopify Functions	Post Purchase Extensions	Web pixel app extensions
Minimum plan	Shopify Plus	Shopify Plus	All plans above Shopify Starter	All plans above Shopify Starter	All plans above Shopify Starter

Migrating to Extensible Checkout

The migration to Checkout Extensibility is a process all merchants using the checkout.liquid need to perform. Following a step-by-step approach ensures that all existing customizations are accurately mapped and implemented within the new framework.

1. Assessment. Begin with a thorough assessment of current checkout customizations. This involves a visual inspection of the checkout process and a detailed code review. Identifying all elements that add functionality or branding to the checkout will guide the migration strategy.

• Pay special attention to comments in code, any code includes or linked javascript files. 
• Also any of the inline css or linked css files should be noted down for migration.
• To be sure here, it is best to compare the original code from checkout.liquid to your current version and look for differences.
• Check for any Shopify Scripts you might have that are active.

2. Evaluation and feature mapping. With an understanding of the existing customizations, the next step is to map these features to the corresponding technologies within Checkout Extensibility. This mapping ensures that each customization is recreated or enhanced using the appropriate component.

• Before mapping out all of the functionality, evaluate if some of it is not needed or outdated. Or if it can be done differently. Use this upgrade to do a thorough checkup of the checkout system.
• Check for existing apps in the marketplace to see if they can do the customization you require.
• If none of the apps don’t fit your needs, remap the needed functionality:
  • Custom UI or adding some content. Maps to UI Extensions
  • Change the look of the checkout. Maps to Branding API
  • Customize the business logic of the checkout. Maps to Shopify Functions
  • Change or customize the post-purchase process. Maps to Post-Purchase Extensions
  • Track buyer behavior or add events. Maps to Web pixel app extensions
• One more thing to think about is your data. If you created some data in an external system, and you need it in the future, you need to plan out the migration to the new system.

3. Implementation. The final step involves leveraging the identified Checkout Extensibility technologies and the actual development work. This phase transforms the planned customizations into reality, by installing the appropriate apps and utilizing Shopify’s new, robust framework. This should be thoroughly tested and rolled out when the site load is lower, which means Friday evening when the whole team goes home (please note the sarcasm 🤓)

A Practical Example: Migrating a delivery date picker

To illustrate the application of Checkout Extensibility, let’s consider the case where you had a delivery date picker in your Shopify store implemented using checkout.liquid template page.

Having a delivery date picker is a common feature for online stores offering physical products. It can also be used for other use cases such as renting digital items, specifying return dates etc.

In this example, we will skip the in-depth analysis of changes made to the checkout.liquid page and Shopify scripts and stick to a specific example. This would normally be Step 1 (Assessment) and we consider it done where we identified we should have the date picker transferred to the new system.

Step 2 (Evaluation and feature mapping):

The first thing we would do is try to find an already existing app to solve the functionality we need. One of the solutions we can find on the Shopify marketplace page is the Delivery Date app which would solve our requirements.

Hypothetically, if we didn’t find the appropriate app, a custom implementation would be necessary. Mapping the feature in the previously given framework, we see that this example showcases the use of Checkout UI Extensions, one of the core components of Checkout Extensibility.

Step 3 (Implementation)

Since we found the app that fits our requirements, a simple installation and configuration would be the only thing we need.

In case we needed to write it fully custom, we would do one of the following:

1. If you are a developer, then use the Checkout UI documentation and create a private app for our needs
2. Hire a Shopify expert agency to help and do the work for us

Benefits of embracing Checkout Extensibility

By migrating to the new system, you are investing long-term in best practices and further updates. You also invest in best-in-class conversion rates and conform to what users already know and trust. In Shopify, as we speak, more than 1,000 people work every day to make the checkout process better and safer.

The additional value you get is that the new checkout system fully integrates with Shop Pay with its huge network of known buyers which can be recognized so they can finish a purchase in only one click.

The migration to Checkout Extensibility offers numerous benefits, making it an essential move for merchants aiming to future-proof their online stores:

• Enhanced customization. Checkout Extensibility provides a robust framework for implementing a wide range of customizations.
• Improved performance. Checkout Extensibility improves checkout speed and reliability by leveraging modern technologies and optimized code, contributing to higher conversion rates.
• Seamless upgrades. Built with future Shopify updates in mind, Checkout Extensibility ensures that customizations are preserved and remain compatible with new platform features.
• Better integration. Checkout Extensibility’s nature ensures full compatibility with Shopify’s ecosystem, including payment gateways and marketing tools.

Conclusion

The introduction of Checkout Extensibility signifies a major advancement for the Shopify platform. It gives merchants greater flexibility and control over the checkout experience while guaranteeing PCI compliance and best practices for accessibility (following the WCAG standards) and checkout conversion rate.

As the August 2024 deadline approaches, now is the time to begin planning and implementing the Shopify checkout migration to this new framework. By embracing Checkout Extensibility, merchants can ensure compliance with Shopify’s upcoming changes and unlock new possibilities for customization, performance enhancement, and overall store optimization.

The journey towards Checkout Extensibility is an opportunity to innovate, improve, and, ultimately, offer customers a superior shopping experience. Start your migration process today and position your store at the forefront of ecommerce excellence!