Adapting to Shopify's New Checkout Extensibility: A Guide for Shopify Plus Merchants
As of August 14, 2023, Shopify has sunsetted support for Shopify Scripts and the checkout.liquid file—tools previously used by Shopify Plus merchants to customize the checkout process. These features have now been replaced by more advanced solutions: Shopify Functions and the comprehensive Shopify Checkout Extensibility toolkit.
For Shopify Plus merchants, updating your checkout to this new system is essential to ensure a smooth and seamless transaction experience for your customers. This guide will walk you through everything you need to know to make the transition smoothly.
What is Checkout Liquid, and Why is Shopify Moving Away from It?
Checkout.liquid was a file written in the Liquid language that controlled the checkout page's appearance and functionality. While it was editable for Shopify Plus merchants, allowing for custom modifications, it came with risks—errors in this critical part of the purchase flow could lead to issues like checkout failures or even temporary store downtime.
With the introduction of the One Page Checkout, Shopify recognized the need for a more flexible and robust system that could support a wider range of customizations without compromising stability. The new tools not only expand what can be customized but also make it easier for non-developers to implement changes, while still offering greater possibilities for developers.
Introducing Checkout Extensions
In the past, Shopify restricted the extent to which merchants could customize the checkout process. While basic changes like adding a logo or altering colors were possible, more complex modifications were limited. This was often seen as a downside of using a SaaS (Software as a Service) platform, as it could hinder merchants' ability to fully tailor the checkout experience to their specific needs.
However, Shopify's approach was based on ensuring a smooth, error-free shopping experience that maximized conversion rates. Shopify's checkout process has consistently outperformed other e-commerce platforms in terms of conversion rates. But as e-commerce continues to evolve, so do the demands for greater personalization, unique checkout experiences, and even entirely new business models, such as subscription services. Shopify is now addressing these needs with Checkout UI Extensions, which balance customization with stability and security.
Checkout Extensions: Expanding Your Customization Toolkit
Checkout Extensions encompass a suite of tools designed to give merchants and developers the ability to tailor the checkout process more precisely to their needs. These tools are sure to be appreciated by both merchants seeking more control and developers looking for expanded customization options.
User-Friendly Modifications
Checkout Editor
The Checkout Editor is a visual tool available to stores that have adopted Checkout Extensibility. It allows merchants to easily modify their checkout pages without needing developer assistance. Accessible through Settings > Checkout or Sales Channels > Online Store > Themes > Customize, this editor lets you create and test multiple versions of your checkout page.
Checkout Apps from the Shopify App Store:
Within the Checkout Editor, you can browse and install additional apps that enhance your checkout's functionality. These apps often focus on improving key e-commerce metrics like Conversion Rate Optimization (CRO), Average Order Value (AOV), Lifetime Value (LTV), and Return on Ad Spend (ROAS). Once installed, the app's modules or widgets can be easily arranged using a drag-and-drop interface.
Shopify Pixels Manager
Shopify Pixels are JavaScript snippets that run on your online store during checkout, helping you gather valuable data on customer behavior for marketing and analytics purposes. These pixels can be managed through the Customer Events section in the admin panel, offering you control over what data is shared and with whom. You can also explore pre-built pixels available in the Shopify App Store or develop custom ones to suit your specific needs.
Advanced Tools for Developers
For developers, the new Shopify Functions API and other tools provide significantly more flexibility than before.
Branding API
Branding API allows for deeper customization of the checkout experience, enabling changes to forms, typography, and visual elements like rounded corners and the favicon. These customizations ensure that the checkout, customer account pages, and installed extensions maintain a consistent visual style, enhancing the overall user experience.
Checkout UI Extensions
Checkout UI Extensions empower developers to create unique visual modules or "blocks" that can be used to build a customized checkout process. These extensions allow you to modify all or specific steps of the checkout process, such as product information, shipping, payment options, and order summaries. Examples of what you can create include upsell sections, subscription modules, additional data fields, and personalized notifications.
These Checkout UI Extensions are built as Shopify Apps using React, providing a seamless integration experience. Hosted directly by Shopify, these apps can be quickly deployed and customized, offering developers and merchants a flexible way to enhance the checkout process. This ensures that your store's checkout can be tailored to meet specific business needs while maintaining a smooth user experience.
Web Pixel App Extension
Web Pixel Extensions function similarly to UI Extensions, allowing developers to create custom code snippets that track user behavior during checkout. Before creating a custom pixel, it's a good idea to check for existing solutions in the app store that might meet your needs. Keep in mind that every additional script can affect your store's performance, so it's important to balance functionality with speed.
Shopify Functions
With the Functions API, Shopify Plus merchants can now implement entirely new business logic within their store. This includes creating custom discount types, hiding payment methods based on specific parameters, renaming shipping options, bundling products into new SKUs, and more. The flexibility provided by Shopify Functions brings the customizability of open-source systems to the reliability of a SaaS platform.
Post-Purchase Extensions:
Currently in beta, Post-Purchase Extensions allow you to add interactions after the checkout is completed but before the thank-you page is shown. Potential uses include upselling additional products, collecting feedback, offering discount codes for future purchases, and enrolling customers in loyalty programs.
What Happens After August 13, 2024?
Starting August 14, 2023, Shopify stopped supporting Shopify Scripts and checkout.liquid. On August 13, 2024, the old version of the checkout will be completely phased out and will no longer function. This means that Shopify Plus merchants who relied on these tools must transition to the new checkout system. If you're in this group, it's crucial to start preparing now by replicating any custom functionality in the new checkout framework.
How to Transition to Checkout Extensibility
By reading this guide, you've taken the first step toward transitioning to the new system—understanding the tools available to build your new checkout. The next step is to review your existing checkout.liquid setup, identify the customizations you've implemented, and determine whether they add real value to your business. Map out how these functionalities can be replicated using the new tools and features. Be sure to conduct both a visual and code-based review of your current setup to ensure a smooth transition.
It's important to note that not all previous functionalities may translate directly to the new system. Consulting with an experienced partner who has handled similar migrations can be invaluable in ensuring a successful transition.
Define the scope of work, confirm it with all necessary stakeholders, and then build and test your new checkout setup. Create a trial version to test in a safe environment before rolling it out to your live store. After deployment, closely monitor key metrics like CRO and AOV to ensure your customers can complete their purchases without any issues.
Transitioning your checkout is a critical and potentially stressful process, but it’s also an opportunity to improve your store’s performance. If you need assistance or have any questions, we’re here to help make your transition as smooth as possible.
