About checkout app extensions

Checkout app extensions make it easy for developers to extend their app code into checkout and customize many aspects of the checkout experience. Shopify provides the tools and resources for building checkout UI extensions on the checkout steps, post-purchase page, and Thank you and Order status pages.

Anchor to Checkout UI extensionsCheckout UI extensions

Checkout UI extensions let you add custom workflows and functionality at defined points of the checkout process, and are built into apps using target APIs and UI components.

Anchor to Post-purchase extensionsPost-purchase extensions

Post-purchase extensions let you add new UI and functionality to the post-purchase page, and are built into apps using extension points APIs and UI components provided by Shopify.

Anchor to Thank you and Order status page extensionsThank you and Order status page extensions

Checkout UI extensions can be developed for the Thank you page and the Order status page with similar target APIs and UI components. Extensions that appear after a purchase has been completed will be available to all plans except Shopify Starter.

Anchor to Getting startedGetting started

Learn how to use checkout app extensions 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.

Anchor to Next stepsNext steps

• Learn about the resources available for building checkout UI extensions.

• Learn about the extension points available to post-purchase checkout extensions.