New Shopify Checkout: Upgrading to Checkout Extensibility

Recently, Shopify announced that on August 13th, 2024, it will shut down the ability to customize checkout using the checkout.liquid layout.

What are the implications for store owners? The key point to understand is that any alterations made to your checkout process will stop functioning after this date. And it's not just limited to custom modifications; any apps that interact with the checkout process will also become non-functional unless proactive actions are taken.

With such a significant change, there are bound to be questions; What is Shopify's plan to replace checkout.liquid? Is this the right time to switch to new solutions? How big of an effort does it require?

This blog post will explore the actual impact of this transformation and give you some hints on how to proceed further.

If you are a Shopify Plus merchant, there is a substantial chance you customize your checkout through the checkout.liquid layout. Typically, retailers rely on it to integrate analytics, add additional components like the upsell module, change the checkout look and feel, and develop any custom integrations with third-party services. Furthermore, the ability to extend checkout through checkout.liquid is so deeply rooted in the Shopify ecosystem that it's a requirement for many reputable apps to work correctly.

While the checkout.liquid layout has been effective to a point, it is not without its trade-offs. Employing the checkout.liquid layout shifts the responsibility of maintenance and bug fixes onto the merchant. Additionally, although it provided some level of customization, it lacked a robust and reliable method for implementing these changes. As a result, developers often found themselves creating workaround solutions. This improvised approach, however, most often led to bugs that could disrupt checkout functionality.

Shopify has thoroughly revised its approach to checkout customization. Instead of preparing just a refurbished way of editing the checkout, it announced a suite of new solutions that cover the typical scenarios addressed by checkout.liquid and beyond.

Checkout Branding

Merchants can now utilize new branding tools to tailor their checkout experience. Think of cases such as:

• Adding a logo to your checkout header.
• Changing the background of your checkout form.
• Changing the background of your order summary.
• Customizing the colors of your checkout.
• Customizing the font of your checkout.

Those features are easily configurable in the drag-and-drop editor. On top of that, with the developer's help, merchants can also:

• Apply custom fonts.
• Change sizes of particular elements, like headings, form inputs, etc.
• Change the style of specific components, such as adding rounded corners, for example.

Together, these tools allow for blending the checkout with the overall shop aesthetic to create a more seamless shopping experience.

↑ Example layouts that could be achieved using the new checkout branding.

Checkout Extensions

It is now possible to customize checkout by inserting components at defined points in the checkout flow.

↑ Checkout extensions could be placed at defined points called "Extensions points"

Those components could vary from plain and simple to complex modules integrated with third-party services. Here are a couple of examples:

• Contact us module.
• FAQ module.
• Displaying trust badges.
• Additional form field in the billing address section.
• Upsell module.
• Widget integrated with the insurance company providing estimated cost for order items.

Either custom-made or installed from the official marketplace, checkout extensions offers a robust system that allows for adapting the checkout to merchants' needs. Moreover, checkout extensions can adapt to style changes defined through checkout branding.

↑ Checkout extensions could also use Checkout Branding styles

Hint: A good place to start exploring available extensions is the official Shopify guide to checkout customization.

Pixels and Customer Events

Enhancing checkout analytics is one of the most common uses for checkout.liquid. Historically, merchants had limited options:

• Add a script to the order confirmation page via the settings panel and lose all more events in the checkout flow, like add payment info.
• Use one of the native apps without the ability to control how the analytics are sent.
• Use checkout.liquid to add a custom code that handles the analytics reporting.

All of those solutions have their drawbacks, and up until the introduction of Pixels, there was no real go-to solution for handling analytics. Pixels allow merchants to react to various events along the user journey, such as add to cart, checkout begin, add payment info, and finally, purchase event, in a manageable way.

With the upcoming Server Pixels (partially released to chosen partners), which will allow collecting analytics more reliably, store owners will have access to a full-featured way of gathering data and integrating it with third-party services.

Shopify Functions

Shopify Functions are a major addition to the ecosystem; its many potential use cases go beyond the scope of this post. In a nutshell, Shopify Functions are tools that allow merchants to fiddle with how Shopify handles, for example, the logic of discounts, fulfillment, or payments.

Functions allow merchants to control how Shopify behaves far better than checkout.liquid. For one, Shopify Functions are intended to replace Shopify Scripts, for which Shopify ends support on the same date as for custom checkouts: August 13th, 2024.

The easiest way to understand Shopify Functions is to look at examples of how they're used today. As stated in the official Shopify documentation:

• Delivery customization: Rename, reorder, and sort the delivery options available to buyers during checkout.
• Order discount: Create a new type of discount that's applied to all merchandise in the cart.
• Product discount: Create a new type of discount that's applied to a particular product or product variant in the cart.
• Payment customization: Rename, reorder, and sort the payment methods available to buyers during checkout.

Shopify Functions are rapidly developing, and while writing this article, some components are not yet fully published:

• Cart and checkout validation: Provide your own validation of a cart and checkout.
• Fulfillment constraints: Provide your own logic for how Shopify should fulfill and allocate an order.
• Order routing location rule: Provide your own ranking of location for each item during order routing.
• Shipping discount: Create a new type of discount that's applied to one or more of the shipping rates at checkout.

Already existing tools allow unprecedented control over the checkout experience, and we can only expect further developments.

One-Page Checkout

Shopify also introduced a new, more streamlined layout for checkout:

We can expect that Pixels, checkout extensions, checkout branding, and functions will seamlessly integrate not only with this new layout but also with any other enhancements that may be introduced in the future.

↑ Showcase of new one-page checkout

By now, it's evident that Shopify has completely overhauled the checkout process and the entire ecosystem supporting it. After transitioning from checkout.liquid, merchants will have much greater control over the whole checkout experience from the visual design to the underlying logic.

A key takeaway for merchants is that they can now enjoy enhanced customization without needing to opt out from Shopify's managed checkout. A central selling point of Shopify has always been its highly effective, stable, and secure checkout process. However, in the past, this advantage was diminished whenever merchants took control of their checkout because this meant opting out of Shopify's automatic updates, bug fixes, and security improvements. The checkout update allows merchants to experience the best of both worlds: a highly customizable checkout experience and the reliability provided by Shopify's system maintenance and updates.

Transitioning to the new checkout system may initially seem like a major effort for many vendors. However, it's important to consider the prolonged transition period Shopify provides. This allows for a gradual shift, which, when planned and executed strategically in advance, can mitigate a heavy immediate investment.

Establishing manageable milestones is crucial for the success of any significant transition. Those milestones should ideally be rolled out and tested independently. Considering the common uses of checkout.liquid, I suggest the following steps:

• Analytics migration: Moving analytics to Pixels can be done in isolation and doesn't need the new checkout to be live yet, making it a perfect starting point. Another reason to begin with migrating analytics is that configuration and testing these usually takes a considerable amount of time. Also, some issues can only be noticed when dealing with real-world analytics data.
• Scripts and custom checkout logic migration: This step requires Shopify Functions, which works only when a new checkout is live and the checkout.liquid file is no longer in use. I would recommend setting up a test store to develop those. Shopify Functions are essentially apps that can be easily transferred between various stores.
• Checkout extensions: Similar to Shopify Functions, checkout extensions will only work in a new checkout. However, more straightforward extensions could be easily tested in the Checkout Preview upfront before publishing the new checkout.
• Branding: Basic and advanced checkout branding will typically be the easiest step of the transition and could be tested in preview mode.

The official Shopify Checkout upgrade guide is an excellent starting point when preparing for migration.

Hint: When it comes to enhancing the checkout UI or logic, it's always wise to explore the marketplace for pre-existing applications. Check out this link to a growing list of apps that use the new checkout extensibility features instead of relying on the checkout.liquid layout.

Shopify's transformation of its checkout experience presents both challenges and opportunities for retailers. Merchants can now tailor their checkout flow more precisely to their needs while still maintaining the stability and security of Shopify's managed checkout system. Yes, transitioning from the familiar checkout.liquid may initially seem daunting, but the advantages of adopting these changes far outweigh the potential discomfort. The key lies in understanding the new capabilities and planning your transition strategically. It's the perfect time for merchants to embrace these tools and adapt for a more streamlined, personalized, and efficient checkout experience.

While August 13th, 2024, is a significant date, it's not a deadline to fear but rather a milestone to plan towards. We encourage you to use this guide as a starting point, leverage the resources available, and don't hesitate to contact me at michal@commerce-ui.com to discuss any challenges you face.