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](/docs/apps/build/checkout/technologies), [post-purchase page](/docs/apps/build/checkout/product-offers#post-purchase-product-offers), and [**Thank you** and **Order status** pages](/docs/apps/build/checkout/thank-you-order-status).

## Checkout 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](/docs/api/checkout-ui-extensions).



> Shopify Plus:
> [Checkout UI extensions](/docs/api/checkout-ui-extensions) that render on the information and shipping and payment steps in checkout are available only to stores on a [Shopify Plus](https://www.shopify.com/plus) plan.




## Post-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](/docs/api/checkout-extensions/post-purchase/api) and [UI components](/docs/api/checkout-extensions/post-purchase/components) provided by Shopify.

> Tip:
> Learn how JWTs (JSON web tokens) [need to be structured](/docs/api/checkout-extensions/post-purchase/jwt-specification) for use in post-purchase extensions.

## Thank 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](/docs/api/checkout-ui-extensions). Extensions that appear after a purchase has been completed will be available to all plans except Shopify Starter.

## Getting started

Learn how to use checkout app extensions by following one of our use case tutorials:

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/filesystem"
     data-alt-src="/assets/resource-cards/filesystem-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Pre-purchase product offers
    </h3>
    <p class="resource-card__description">Build a pre-purchase upsell offer that prompts the customer to add a product to their order. </p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/product-offers/build-a-post-purchase-offer" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/star"
     data-alt-src="/assets/resource-cards/star-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Post-purchase checkout extensions
    </h3>
    <p class="resource-card__description">Create a basic example of a post-purchase checkout extension. </p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/thank-you-order-status/add-survey" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/marketplaces"
     data-alt-src="/assets/resource-cards/marketplaces-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Thank you and order status extensions
    </h3>
    <p class="resource-card__description">Build a survey that asks customers how they heard about the store after they made a purchase. </p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/fields-banners/add-banner" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/quickstart"
     data-alt-src="/assets/resource-cards/quickstart-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Custom banners
    </h3>
    <p class="resource-card__description">Learn how to add a custom banner to checkout. </p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/fields-banners/add-field" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/gear"
     data-alt-src="/assets/resource-cards/gear-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Custom fields
    </h3>
    <p class="resource-card__description">Learn how to add custom fields to checkout that customers can use to add delivery instructions to their order. </p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/cart-checkout-validation/create-client-side-validation" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/utility"
     data-alt-src="/assets/resource-cards/utility-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Client-side validation
    </h3>
    <p class="resource-card__description">Use a checkout UI extension to validate fields at checkout and block customer progress.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/customize-header" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/tutorial"
     data-alt-src="/assets/resource-cards/tutorial-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Header
    </h3>
    <p class="resource-card__description">Use a checkout UI extension and the GraphQL Admin API&#39;s checkout branding types to customize the checkout header with custom images, including the back to cart link.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/customize-footer" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Footer
    </h3>
    <p class="resource-card__description">Use a checkout UI extension and the GraphQL Admin API&#39;s checkout branding types to customize the checkout footer with store policies.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/delivery-shipping/address-autocomplete/build-autocomplete" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/marketplaces"
     data-alt-src="/assets/resource-cards/marketplaces-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Address autocomplete
    </h3>
    <p class="resource-card__description">Build an extension to customize the address autocomplete provider for the delivery and billing address forms in checkout.</p>
  </a>
</div>

</div>



## Next steps

- Learn about the [resources available](/docs/api/checkout-ui-extensions) for building checkout UI extensions.

- Learn about the [extension points](/docs/api/checkout-extensions/post-purchase/api) available to post-purchase checkout extensions.