Apps in 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.

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.

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.

Learn how to customize and extend checkout by following one of our use case tutorials.

Pre-purchase product offers

Build a pre-purchase upsell offer that prompts the customer to add a product to their order.

Post-purchase checkout extensions

Create a basic example of a post-purchase checkout extension.

Thank you and order status extensions

Build a survey that asks customers how they heard about the store after they made a purchase.

Custom banners

Learn how to add a custom banner to checkout.

Custom fields

Learn how to add custom fields to checkout that customers can use to add delivery instructions to their order.

Client-side validation

Use a checkout UI extension to validate fields at checkout and block customer progress.

Header

Use a checkout UI extension and the GraphQL Admin API's checkout branding types to customize the checkout header with custom images, including the back to cart link.

Footer

Use a checkout UI extension and the GraphQL Admin API's checkout branding types to customize the checkout footer with store policies.

Address autocomplete

Build an extension to customize the address autocomplete provider for the delivery and billing address forms in checkout.

Build a discount function

Use Shopify Functions to create a new discount type for users.

Create a payments function

Use Shopify Functions to hide a payment option offered to customers at checkout.

Build a delivery options function

Use Shopify Functions to rename a delivery option offered to customers at checkout.

Create server-side validation

Use Shopify Functions to block progress on a checkout when the cart line quantities exceed a limit.

Build a location rule function

Use Shopify Functions to choose a different order location during checkout.

Add a customized bundle

Use Shopify Functions to group products together and sell them as a single unit.

Build fulfillment constraints

Use Shopify Functions to customize fulfillment and delivery strategies.

Build local pickup options

Use Shopify Functions to generate local pickup delivery options at checkout.

Generate pickup points

Use Shopify Functions to generate pickup point delivery options at checkout.

A report identifying your current checkout customizations is available in the Shopify admin. The report provides high-level guidance to map customizations to Checkout Extensibility. Use this report to simplify your review of your existing customizations and to help you upgrade to Checkout Extensibility faster. Learn more.

To upgrade a checkout.liquid customization to Checkout Extensibility, take one or more of the following actions:

1. 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.

2. 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.

To optimize your app development experience, Shopify has established a set of best practices that you can refer to when developing an app that extends checkout.

Create multi-page extensions

Learn more about building extensions that can render on any checkout page.

UX for checkout

Learn how to improve the quality of checkout experiences by following our UX guidelines for checkout.

Network requests from extensions

Learn about Cross-Origin Resource Sharing (CORS) and other security considerations when making network requests to your own server.

App Design Guidelines

Get practical guidance on how to design a user interface for the Shopify admin.

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:

Stores that subscribe to the Shopify Plus plan can add UI extensions to their Checkout, Thank you and Order Status pages. Stores on Basic, Shopify, and Advanced plans can only add UI extensions to their Thank you and Order Status pages. Merchants can install apps from the Shopify App Store or build custom apps that contain UI extensions.

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.

We'll continue to add new Shopify Function APIs to further customize checkout business logic.

We'll continue to add new custom pixel and app pixel events and features.