Everything to know about migrating from Checkout.liquid to Checkout Extensibility on Shopify
November 06, 2023•Adnan S.
As many Shopify merchants are aware, Shopify’s checkout.liquid is deprecating in favor of Checkout Extensibility and merchants should start their preparation to migrate over. In this guide, we’ll cover everything you need to know as a merchant to smoothly transition over and continue to offer incredible commerce experiences.
What is checkout.liquid?
Checkout.liquid is a specialized layout theme file that renders the checkout of a Shopify store, including the Information, Payment, Shipping, Thank You, and Order Status pages. Using this file, merchants can customize the appearance and functionality of the checkout, where customers enter their shipping and payment details, review orders, and complete purchases.
Only Shopify Plus merchants have the ability to access and modify the checkout.liquid file. And doing so requires knowledge of Shopify's Liquid templating language.
Merchants can request access to checkout.liquid file by contacting Shopify support. Once done, they can add the file to a preferred theme using the code editor.
Why is It deprecating?
Checkout.liquid is being deprecated and will be removed on August 13, 2024, for in-checkout pages. Instead, Shopify is investing in Checkout Extensibility as the sole way to customize the checkout moving forward.
Merchants who use checkout.liquid to customize the checkout must upgrade to Checkout Extensibility before this date. Otherwise, their checkout will automatically switch back to the standard Shopify checkout without customizations.
However, checkout.liquid will continue to work for the Thank You and Order Status pages until Shopify expands the Checkout Extensibility support for them (expected November 2023).
Some of the reasons behind this deprecation are listed below:
Merchants can’t modify the checkout.liquid layout independently, as it requires coding knowledge.
Checkout.liquid layout is not automatically updated. When Shopify releases a checkout update, the modified checkout.liquid code imposes the risk of compatibility issues as it’s frozen at a specific time.
The code needs frequent maintenance. Whenever there is an update to the checkout, merchants have to catch up with changing elements.
The last big problem for checkout.liquid happened in August 2022. A conflict with Google Tag Manager in the theme code caused a 12-hour worldwide checkout disruption for Shopify. The incident highlighted the drawbacks of checkout.liquid and emphasized the need for a more stable solution.
There isn’t any way to monitor the performance of checkout.liquid customizations and make improvements. But with Checkout Extensibility, it is possible.
What is Checkout Extensibility?
Shopify’s latest Checkout Extensibility is the direct upgrade of checkout.liquid. It allows merchants to customize their checkout in a way that is app-based and safe to upgrade.
The Checkout Extensibility includes the following:
Robust platform features for no-code checkout customization:
Checkout Editor: It is a drag-and-drop editor for customizing the appearance of the checkout, such as adjusting fonts and colors, adding logos, etc.
Native Apps from the Shopify App Store: Shopify apps built with native UI components and APIs can be installed on checkout to add more functionalities.
Shopify Pixel Manager: This is a new section introduced in Shopify admin where merchants can add and manage pixels to track checkout events.
Developer tools for making advanced customizations via bespoke apps:
Checkout UI Extension: Build apps with custom functionality that merchants can install at defined points in the checkout flow.
Graph QL Branding API: Make advanced customizations to the checkout appearance, such as modifying the corner radius of buttons.
Shopify Functions: Modify the server-side business logic to build custom functionality, such as offering a tiered discount: spend $100 to get $10 off.
Web Pixel App Extension: Allows apps to access customer events at checkout through Pixels API.
Post-purchase UI Extension (Beta Version): Add a post-purchase page in checkout and create features for that page, such as upsell or cross-sell offers, survey and feedback requests, etc. Currently, this checkout extension can be used in the development store without restrictions. To use it in live stores, merchants have to request access.
Why Checkout Extensibility is great & the future?
Following are some reasons why Checkout Extensibility is considered great and promising for the future:
With Checkout Extensibility, merchants don’t have to worry about updates breaking the checkout anymore. They get instant access to new features when they’re released.
Supports Shopify Functions, which allow creating custom logic to deploy on Shopify’s backend without fiddling with the theme file and risking errors.
Checkout Extensibility is built with advanced technology, which ensures 2X faster checkout interactions and above 1% increase in conversions.
It allows Shop Pay integration, which ensures 4X faster checkout speed and more than 70% increase in conversion rate.
Web Pixel App Extension allows tracking customer behavior that can be utilized to tailor checkout for more conversions.
Checkout Extensibility is built with Shopify's UI components and APIs operating in a secure Sandbox environment, which provides extra protection and security.
Shopify Partners or developers building specialized apps to extend the checkout functionalities can also sell and distribute them on the Shopify App Store.
Speeds up development with pre-made UI components such as text blocks, checkboxes, choice lists, grid layouts, etc. Also, all these elements inherit a merchant’s brand settings, creating a unified checkout experience.
Merchants can translate the checkout into multiple languages for international customers. Shopify provides a set of JavaScript APIs for accessing translations and localized formatting utilities for Checkout UI Extension.
By upgrading to Checkout Extensibility, merchants get access to the following checkout features:
Shop Promise: Display an estimated delivery date specific to when the customer places an order and where that order will be delivered.
Shop Pay Installments: Allow customers to pay for their orders in installments at checkout.
Tooltip for Estimated Tax: Display an estimated tax calculation to customers when they are at the checkout.
Estimated Delivery Dates: Display specific delivery dates, such as Tuesday, December 12 - Wednesday, December 13, instead of an estimated transit time at checkout.
Pre-orders: Sell out-of-stock and upcoming products by setting them up as pre-orders.
Discount Combinations: Allow customers to combine different discounts (max 5 per order) and use them at checkout.
Shipping Discounts (Coming soon - Q4 2023): Create a new type of discount that is applied to one or more shipping rates at checkout.
Subscription Shipping Rate Names: Customize shipping rate names to reflect what makes the most sense for products and services.
SMS & Email Marketing Opt-in: Collect customers’ phone numbers and emails by adding options to subscribe at checkout.
Flexible Shipping Addresses: Allow B2B customers to enter a new one-time address at checkout.
Shipping to Pickup Points: Provide the option to ship orders to a pickup point (post offices, relay points, or pickup lockers) instead of directly to a customer's address.
One-page Checkout: Turn the default three-page checkout layout into a one-page checkout.
Upsell and Cross-sell: Access specific customer-level data from the checkout page and offer upsell or cross-sell products depending on the items customers have added to their checkout.
Post-purchase UI extension: Show valuable insights to customers once they complete checkout, such as product assembly or care instructions.
What to do to migrate from checkout.liquid to Checkout Extensibility
For upgrading to Checkout Extensibility from checkout.liquid merchants have to perform the following steps:
Step 1: Review the existing checkout.liquid customizations for understanding what to replicate in Checkout Extensibility. This needs to be done both visually and code-wise.
Visual review can be done by assessing your current checkout pages and identifying custom elements such as banners, trust badges, custom messages, extra input fields, fonts, colors, etc.
After the visual review, conduct a code review to identify customization that might be less visible:
On Shopify admin, go to Online Store > Themes.
Locate the currently published theme, and then click the ... button for it.
Click Edit code to review the existing checkout.liquid customizations.
Shopify recommends to look for the following in the checkout.liquid file:
Comments in any language, such as HTML comments, JavaScript, or Liquid.
Liquid references or include statements. The same applies to JavaScript include, especially if the domain looks third-partyish.
CSS of any kind, style tags, and inline CSS.
To make it easier, you can compare the original checkout.liquid file with your customized version by adding them side by side to a Text Comparison tool to see the differences.
Step 2: Create a draft checkout for migration.
On Shopify admin, go to Settings > Checkout and accounts.
In the Checkout customization section, click Create draft checkout.
Customize the checkout by adding apps or editing your branding based on the assessment in Step 1.
Set up Pixels or additional first-party features. (Optional)
Review your changes using the Preview option.
Once you’re ready to use the draft checkout, click Publish. This will replace your live checkout.liquid customizations.
Edge cases / pitfalls / bumps in the road during migration
When upgrading to Checkout Extensibility from checkout.liquid, merchants might encounter the following challenges:
Merchants might miss out on some of their customization capabilities present in checkout.liquid. Achieving those with custom app solutions will add to the bill.
Merchants offering Advanced Cash on Delivery can’t replicate the functionality in Checkout Extensibility as it’s not supported.
Checkout Extensibility doesn’t support In Flight API Mutations.
Merchants can’t map customizations in Checkout Extensibility that rely on accessing the parent DOM or other page elements. Some functionalities affected by this limitation include:
A / B Testing that involves direct DOM manipulation
Performance Monitoring
Visitor Tracking
Heatmaps
To create Checkout UI Extensions, one must use the Shopify CLI, which is the only way to generate these extensions.
Although the Checkout UI Extensions allow modification of checkout appearance to some extent, they inherit a merchant’s brand settings and don’t allow overriding the CSS.
Merchants can configure the extension to access external resources via APIs to use in the store. However, it's important to understand that Shopify evaluates and approves apps with such requests individually. So, there is no guarantee that Shopify will approve the solution.
A common issue many users face is that a deployed extension doesn’t show up in checkout after installation. Merchants have to manually add the Checkout UI Extension to their checkout from the Shopify admin and checkout editor for them to appear.
Checkout UI Extensions have limited access to global web APIs.
Checkout Extensibility doesn’t allow adding external JavaScript files anywhere on the checkout.
Localization is only supported for Checkout UI Extensions and not for Post-purchase Extensions.
Scope of effort for small, medium, and large merchants for migration
Small Merchants
Small merchants have a limited product line and fewer customizations in their checkout. Their scope of effort might include:
Reviewing and identifying existing customizations and features in checkout.liquid.
Evaluating which customizations are still necessary and must be ported to Checkout Extensibility.
Testing and ensuring a seamless transition.
Training staff or partners on the new extensibility options.
Medium Merchants
Medium-sized merchants have a more extensive product catalog and some additional customizations. Their scope of effort could involve:
A detailed review of existing checkout.liquid customizations and integrations.
Prioritizing customizations based on business needs.
Checking if the current customization improves AOV or conversion rate. And looking for ways to improve these numbers using public apps or storefront customization.
Potential redesign or adjustment of the checkout process.
Thorough testing and quality assurance.
Staff training and documentation updates.
Large Merchants
Large merchants usually have complex and highly customized checkouts and a significant number of products. Their migration might encompass:
Comprehensive analysis of existing checkout.liquid customizations, including third-party integrations.
Extensive planning for customizations that will be moved to Checkout Extensibility.
Dividing workstreams into different categories, such as platform features, checkout branding, checkout extension apps, web pixels, and Shopify Functions.
Identifying development resources and Shopify Partners to assist with migration.
Project outline for migration, including timelines, sprint plans, workstream deployments, and priorities.
Phased migration approach for each workstream to minimize disruption.
Rigorous testing, including load testing for performance.
Training a larger team and documenting the new checkout process.
Need help migrating from checkout.liquid to Checkout Extensibility?
In any case, if help is needed to migrate over from checkout.liquid to Checkout Extensibility, feel free to reach out to us at Lazer by emailing us at founders@lazertechnologies.com.