Customizing Shopify checkout
Merchants use Shopify checkout to accept orders and receive payments wherever they sell online. You can augment Shopify checkout with new functionality by building an app.
How it works
Anchor link to section titled "How it works"After a customer adds products to a cart, they use Shopify checkout to enter their customer, shipping, and payment information before placing the order.
Developers can create apps that extend Shopify checkout to include functionality that isn't provided natively. For example, you can create an app that offers a customer free shipping or other discounts depending on what's in their cart.
Merchants install these apps on their store in the Shopify admin. In the Shopify admin, merchants can use the checkout editor to place a checkout UI extension in the checkout experience.
Customization options
Anchor link to section titled "Customization options"You can customize Shopify checkout using multiple technologies. All customization options are easy to install and upgrade-safe, which enables merchants to continue getting platform benefits when Shopify releases new products such as Shop Pay, or features such as One-page checkout.
For a detailed breakdown of the available technologies for customizing checkout, and ways that you can extend checkout, refer to the options for customizing Shopify checkout.
Getting started
Anchor link to section titled "Getting started"Learn how to customize and extend checkout by following one of our use case tutorials:
To upgrade a checkout.liquid
customization to Checkout Extensibility, take one or more of the following actions:
Use a public app that's built using extensions.
We're adding new checkout apps to the Shopify App Store on a regular basis. If there currently isn't a suitable public app for your customization, then consider simplifying your checkout temporarily and adding new apps to your store as they become available.
Build a custom app using extensions, or hire a service partner to build one for you.
In some cases, after you've upgraded you can revert to checkout.liquid
until its sunset dates.
If you're upgrading a store to Checkout Extensibility, we recommend planning your in-checkout, Thank you page, and Order status page upgrades together, when possible, for the following benefits:
- Avoid maintaining multiple tech stacks, like UI extensions and
checkout.liquid
. - Apply styling once to the entire experience.
- Manage one sunset date for
checkout.liquid
rather than one date for pre-purchase pages and another for Thank you and Order status pages.
If this isn't possible, then we recommend prioritizing the upgrade for in-checkout pages first and upgrading after-purchase pages after that.
Product roadmap
Anchor link to section titled "Product roadmap"Some checkout customization features are in development and will be released later this year. The following are the features on our roadmap and our estimated launch dates:
Checkout UI extensions
Anchor link to section titled "Checkout UI extensions"Checkout UI extensions are available to all Shopify Plus merchants. Some individual stores might not yet have access if they rely on features that are incompatible with Checkout Extensibility.
Milestone | Target |
---|---|
Checkout UI extensions available on all eligible Plus stores | January 2023 (shipped) |
General availability of extensions on the Thank you and Order status page (Plus plan only) | November 2023 (shipped) |
General availability of extensions on the Thank you and Order status page (all plans above Starter) | April 2024 |
We'll continue adding API capabilities to help you access the right functionality in extensions. We'll also continue adding UI components that offer performant patterns on our design best practices. We release new components and APIs into the unstable API version first, and promote to the next stable release based on Shopify's API version release schedule.
Feature | Target launch date |
---|---|
Support for reading and writing discount codes | January 2023 (shipped) |
New UI components: Tooltip, Pressable | January 2023 (shipped) |
Support for reading and writing gift cards | February 2023 (shipped) |
New UI components: Popover, Modal | February 2023 (shipped) |
Heading styles, button styles and corner radius controls through the Branding API | February 2023 (shipped) |
Session token API to enable authenticated network calls | February 2023 (shipped) |
New API that allows checkout UI extensions to directly query the Storefront API | February 2023 (shipped) |
New UI components: Disclosure, DatePicker | April 2023 (shipped) |
Merchant-uploaded custom fonts through the GraphQL Admin API | April 2023 (shipped) |
Support for adding checkout field validation errors from UI extensions | April 2023 (shipped) |
New API for SellingPlan on line items (read/write) | May 2023 (shipped) |
New API for reading presented and selected payment options | May 2023 (shipped) |
New API for reading presented and selected delivery options | June 2023 (shipped) |
New UI components: DateField | June 2023 (shipped) |
Developer preview of the Order status page in the checkout editor | June 2023 (shipped) |
New extension targets for extending delivery options | June 2023 (shipped) |
New API for cart metafields (read/write) | July 2023 (shipped) |
New API for writing updates to the shipping address | July 2023 (shipped) |
New API to read the customer billing address | August 2023 (shipped) |
New API for reading price breakdown on checkout total | August 2023 (shipped) |
New API to read a unique and stable session token for the current buyer checkout session | September 2023 (shipped) |
New API for customized SMS consent capture | September 2023 (shipped) |
New extension targets for extending payment options | September 2023 (shipped) |
New UI component: Map |
September 2023 (shipped) |
Advanced color styling through the GraphQL Admin API | September 2023 (shipped) |
New extension targets for header and footer customization | November 2023 (shipped) |
New API to read and write cookie tracking consent | January 2024 |
Advanced section styling, such as borders and spacing, through the Branding API | January 2024 |
New UI components for search and selection, such as Combo Box and Carousel | March 2024 |
Automated analysis and migration guidance for existing checkout.liquid customizations | Q1 2024 |
Support for hiding or locking address input fields | Q1 2024 |
Support for integrating with a 3rd-party pickup point network | Q1 2024 |
New API to customize breadcrumbs and cart links | Q1 2024 |
New API for app-reserved namespace metafields (read/write) | Q1 2024 |
Support for adding and updating additional fees | Q1 2024 |
Support for customizing how products are displayed in the order summary | Q1 2024 |
Pre-filling the checkout state from inputs provided via the Cart API | Q1 2024 |
Support for integrating 3rd-party chat applications into checkout | Q2 2024 |
Input query API for customizing the data available to UI extensions | Q2 2024 |
Support for conditional (responsive) component rendering on mobile checkouts | Q2 2024 |
Shopify Functions
Anchor link to section titled "Shopify Functions"We'll continue to add new Shopify Function APIs to further customize checkout business logic.
Milestone | Target |
---|---|
General availability of Product Discount API and Order Discount API | December 2022 (shipped) |
General availability of Payment Customization API and Delivery Customization API | February 2023 (shipped) |
General availability of Cart Transform Function API | July 2023 (shipped) |
General availability of Order Routing Location Rule API | July 2023 (shipped) |
General availability of Fulfillment Constraints API | July 2023 (shipped) |
General availability of Cart and Checkout Validation API for custom apps | July 2023 (shipped) |
Developer preview of Function API to customize delivery options for local pickup | September 2023 (shipped) |
Developer preview of Cart Transform Function API: per component pricing and update operation | October 2023 (shipped) |
General availability of Cart and Checkout Validation API for public apps | December 2023 |
General availability of Shipping Discount API | Q4 2023 |
General availability of Function API to customize delivery options for local pickup | Q1 2024 |
General availability of Cart Transform Function API: per component pricing and update operation | Q1 2024 |
Web pixel app extensions
Anchor link to section titled "Web pixel app extensions"We'll continue to add new custom pixel and app pixel events and features.
Milestone | Target |
---|---|
Add attributes to Checkout object |
March 2023 (shipped) |
Add firstName and lastName to Customer object |
March 2023 (shipped) |
Add productVariants to searchResult object |
March 2023 (shipped) |
Add address1 , address2 and zip to mailingAddress object |
April 2023 (shipped) |
Add type to Product object |
April 2023 (shipped) |
New standard event: checkout_shipping_info_submitted |
April 2023 (shipped) |
New standard event: checkout_address_info_submitted |
April 2023 (shipped) |
New standard event: checkout_contact_info_submitted |
April 2023 (shipped) |
Add support for all collections in collection_viewed event |
May 2023 (shipped) |
Add ordersCount to Customer object |
June 2023 (shipped) |
Custom pixel saved versions | July 2023 |
Add discountApplications to Checkout object |
July 2023 (shipped) |
Add DiscountApplication.allocationMethod to Checkout object |
July 2023 (shipped) |
New standard event: cart_viewed event |
July 2023 (shipped) |
New standard event: product_removed_from_cart event |
August 2023 (shipped) |
Add Product.url to ProductVariant |
September 2023 (shipped) |
Add billingAddress to Checkout object |
September 2023 (shipped) |
New Custom Pixel Autocomplete - helps to write custom pixels referencing the standard event schema | September 2023 (shipped) |
New visitor API | September 2023 (shipped) |
Add Transaction.gateway to Checkout object |
October 2023 (shipped) |
New standard event: DOM events - clicked , input_blurred , input_focused , input_changed , form_submitted |
January 2024 |
New Pixel Granular Consent Purposes | January 2024 |
Custom Pixel debugging tool for troubleshooting firing and event data | Q2 2024 |
Customize standard event payloads with checkout data | Q2 2024 |
Web pixels on Shop Pay | Q3 2024 |
New standard event: JavaScript error events | Q3 2024 |