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 precise 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 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 as such:

• 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 (headings, form inputs, etc.)
• Change the style of specific components (adding rounded corners, for example)

Together, these tools allow to blend the checkout with the overall shop aesthetic, creating a more seamless shopping experience.

↑ Example layouts that could be achieved using 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 adapting 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 script to order confirmation page via 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 the 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 (i.e., 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, with its many potential use cases going 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, Functions are intended to replace Shopify Scripts (for which Shopify ends, support 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 given 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 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 introduces 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 not just the checkout process but also 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, as 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 ideally should 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 could 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 new checkout is live and 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 new checkout. However, more straightforward extensions could be easily tested in the Checkout Preview upfront before publishing 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, all while 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.