For years, Shopify has helped merchants of all sizes deliver the most reliable, highest-converting checkout on the planet. Fast, intuitive, and simple, Shopify Checkout has set the standard for what a checkout should be, while Shop Pay, our accelerated checkout, delivers a buying experience that's four times faster—and a conversion rate that's 11% higher—than the competition.
The only problem? Customizing Shopify Checkout was a slow and painful process, making it difficult for brands and Shopify Partners to adapt Shopify Checkout to meet unique business needs—until now.
The old way to customize Shopify Checkout
Optimized for over 16 years, Shopify Checkout is built for speed and conversion right out of the box. It also includes built-in features for adding express checkouts, local payment methods, tipping options, and more. But as brands grow, they may want to make more advanced customizations to their checkout—whether they're trying to increase average order value or comply with local business regulations.
In the past, Shopify Plus brands could make advanced customizations to the look and functionality of their checkout by requesting access to their checkout.liquid
theme file and directly editing the code. This required working with a developer to build bespoke customizations, or a cumbersome process for installing partner customizations. Checkout.liquid
didn't provide direct APIs for making changes to Shopify Checkout, often resulting in sub-par buyer experiences and poor performance. Developers also needed to perform periodic upgrades to customized checkouts in order to access new features without breaking any customizations.
This method of customizing Shopify Checkout was both time-consuming and expensive—so our team invested in a faster, upgrade-safe way for brands to customize their checkout.
The new way to customize Shopify Checkout
We wanted to make it faster and easier for Shopify Plus brands to customize their checkout—while offering even more opportunity for developers to build creative solutions for Shopify Checkout. So we built a way for brands to customize their checkout using powerful apps and branding tools instead of editing code.
Checkout extensibility makes it easier for Shopify Plus merchants to customize their checkout in a way that’s app-based, upgrade-safe, higher-converting, and integrated with Shop Pay. It includes a suite of powerful platform features that give brands the ability to make code-free customizations to their checkout using apps. And it also gives them the flexibility to build the exact experience they want by developing custom apps for bespoke customizations using a collection of components and APIs.
This is where developers come in. For the first time, Shopify is unlocking the ability for developers to deploy checkout customizations through a custom app or public app on the Shopify App Store.
With checkout UI extensions, you can add elements to Shopify Checkout like product offers, custom fields, custom content, loyalty programs, and more. These extensions show up in guest checkout and Shop Pay, creating a unified experience for buyers wherever they choose to check out. Moreover, you don’t have to worry about duplicating branding settings in your app because extensions automatically inherit the branded appearance of the store’s checkout.
Checkout UI extensions automatically adapt to the various checkout flows, creating a unified experience for buyers wherever they choose to check out.
Shopify Functions give you the flexibility to extend or replace native Shopify server-side business logic so you can customize the discounts applied to orders, products, or shipping. For example, you could build a Function that provides tiered discount options, such as spend $100 get $20 off. And soon, you'll be able to build Shopify Functions that include cart validations.
You can also build apps for Shopify Checkout that track customer events using the web pixel app extension and apps that add a post-purchase page to checkout using post-purchase extensions.
And finally, brands can make advanced customizations to the appearance of their checkout using the Branding API. While they can use the checkout editor to make basic customizations, like customizing the colors and fonts in their checkout, the branding API opens the door to a world of possibilities. For example, brands can add their favicon or completely customize the corner radius on any buttons in their checkout.
Checkout extensibility is built on the latest platform technology, allowing for a faster checkout experience that results in up to 1% higher conversion on average. And the UI components and APIs that power checkout extensibility run in a sandboxed environment, giving brands additional security—unlike the old way of customizing Shopify Checkout.
Out with the old, in with the new
Today, checkout extensibility is available for in-checkout pages, which include the Information, Shipping, and Payment pages of checkout. It empowers merchants and developers to build creative, upgrade-safe customizations for Shopify Checkout, replacing the need for checkout.liquid
.
As a result, checkout.liquid
is deprecated and will no longer work for in-checkout pages on August 13, 2024. Any brands that customize their in-checkout pages with checkout.liquid
will need to upgrade to checkout extensibility.
This opens an exciting opportunity for developers to help brands by building apps that extend Shopify Checkout or upgrading brands to checkout extensibility.
Brands can continue customizing their post-checkout pages, which includes their Thank You Page and Order Status Page, with checkout.liquid
for now. However, they’ll soon be able to customize these pages using checkout extensibility. This functionality is currently in developer preview.
Have any feedback on checkout extensibility? Share it on Github.
Read more
- How to Build a Shopify App: The Complete Guide
- Building the World’s Best Commerce Apps with Built for Shopify
- Updated] API Deprecations and Versions at Shopify: What You Need to Know
- 9 Best CRM Software For Designers in 2022
- Client Collaboration: 8 Tips to Deliver Successful Projects
- 15 Chrome Extensions That Will Make You a More Productive Web Designer
- Introducing Online Store 2.0: What it Means For Developers
- Everything You Need to Know About Development Stores
- Inside the Shopify Partner Studio (And How You Can Apply for Round 2)
- Selling Shopify: How to Educate Your Clients About Shopify