Earlier this year, Shopify unveiled a new checkout architecture. As we approach mid-year, it's clear that this new system will replace existing solutions, making it an excellent time to discuss migration.
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.
Merchants can now utilize new branding tools to tailor their checkout experience. Think of cases as such:
Those features are easily configurable in the drag-and-drop editor. On top of that, with the developer's help, merchants can also:
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
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:
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
Enhancing checkout analytics is one of the most common uses for checkout.liquid. Historically merchants had limited options:
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.
Custom pixels help you to collect customer events on even more pages of your online store, such as the checkout and post-purchase pages. If there isn't an app pixel available that meets your requirements, then you can use custom pixels on your store to track customer events without having to modify your theme code.
Shopify official documentation
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 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:
Shopify Functions are rapidly developing, and while writing this article, some components are not yet fully published:
Already existing tools allow unprecedented control over the checkout experience, and we can only expect further developments.
Shopify also introduces a new, more streamlined layout for checkout:
The checkout you know and trust is getting a major overhaul. This year, we’re rolling out an all-new, one-page checkout. Inspired by Shop Pay’s proven conversion, it’s faster, higher-converting, and exactly what your customers expect.
Shopify Editions | Winter ’23
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:
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 email@example.com to discuss any challenges you face.
We're hiring Front-end Developers
© 2023 Commerce-UI