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.
For example, you can create an app that offers a customer free shipping or other discounts depending on what's in their cart.
This guide describes the different ways that you can customize Shopify checkout and the resources that you can use to do it.
What is Shopify checkout?
Anchor link to section titled "What is Shopify checkout?"After a customer adds products to a cart, they use Shopify checkout to enter their customer, shipping, and payment information before placing the order.
Shopify Partners can create apps that extend Shopify checkout to include functionality that isn't provided natively. 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 and resources
Anchor link to section titled "Customization options and resources"All customization options are easy to install and upgrade-safe, which enables merchants to continue getting platform benefits when Shopify releases new features.
The following table describes some common use cases, and what customization capabilities to use.
| Customization type | Example use cases | What to use |
|---|---|---|
| Add custom UI or content to the checkout process |
|
Checkout UI extensions (developer preview and Shopify Plus) |
| Customize your checkout's look and feel |
|
Checkout branding (developer preview and Shopify Plus) |
| Extend or replace key parts of Shopify’s backend with custom logic |
|
Shopify Functions |
| Add new content to the post-purchase page |
|
Post-purchase extensions |
| Add a tracking pixel | Collect buyer behavioral data to measure and optimize marketing campaign performance as well as your online store's conversion funnel. | Web pixel app extension |
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 were available to some Shopify Plus merchants as of October 3, 2022. By the end of January 2023, all eligible Plus shops will have access to this feature.
| Milestone | Target |
|---|---|
| Checkout UI extensions available on an initial set of Plus stores | October 3, 2022 |
| Developer preview of extensions on the Order Status Page | February 2023 |
Following our general availability, we'll continue adding API capabilities to help you access the right functionality on extensions. We'll also continue adding UI components that offer performant patterns on our design best practices.
| 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 |
| Preview accelerated checkouts in the checkout editor | February 2023 |
New UI components: Popover, Modal, Disclosure |
February 2023 |
| Heading styles, button styles and corner radius controls through the Branding API | February 2023 |
| Session token API to enable authenticated network calls | February 2023 |
| New API that allows checkout UI extensions to directly query the storefront API | February 2023 |
| Support for reading app-owned metafields | March 2023 |
- Learn how to extend checkout for common use cases such as adding a custom field to collect delivery instructions and product offers.
- Learn about the post-purchase checkout extensions that let merchants create and manage the post-purchase experience within the Shopify checkout.
- Learn how to inject custom code into key areas of the Shopify platform using Shopify Functions.