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 | Create a new type of discount that's offered in the cart and at checkout | Shopify Functions (developer preview) |
| 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 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 can't be used on live stores until the General Availability (GA) milestone, which is targeted for September 2022.
We'll begin reviewing new app submissions for pre-approval at the beginning of September (exact date to be confirmed at a later time). Any apps submitted prior to the beginning of the pre-approval period will be rejected. Please don't submit apps containing checkout extensions to the app store for review before this time.
| Milestone | Target |
|---|---|
| Developer preview start | June 22, 2022 |
| App submissions accepted | Early September 2022 |
| Checkout UI extensions available on an initial set of Plus stores | End of September, 2022 |
As we build towards general availability, we'll add more API capabilities to help you access the right functionality on extensions. We'll also add more UI components that offer performant patterns on our design best practices.
| Feature | Target launch date |
|---|---|
| Extension visibility API for accelerated checkouts (Shop Pay, other wallets) | September 2022 |
| Extension error handling | September 2022 |
| Additional UI components | September 2022 |
| Merchant facing configuration of extensions | September 2022 |
- 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.