In this tutorial, you'll learn how an extension can target checkout, the **Thank you** page, the **Order status** page, or all of the above, to create a seamless experience for merchants and their customers.

## What you'll learn

In this tutorial, you'll learn how to create a checkout UI extension that can render in checkout, the **Thank you** page, the **Order status** page, or all three areas.

## Requirements

- You're familiar with [Thank you and Order status extensions](/docs/apps/build/checkout/thank-you-order-status).
- You've created a [Partner account](https://www.shopify.com/partners).

- You've created a new [development store](/docs/api/development-stores) with the following:
    - [Generated test data](/docs/api/development-stores/generated-test-data)
    - [Checkout and Customer Accounts Extensibility developer preview](/docs/api/developer-previews#previewing-new-features) enabled

- You've [created an app that uses Shopify CLI 3.0 or higher](/docs/apps/build/scaffold-app).


## How it works

You can use a [checkout UI extension](/docs/apps/build/checkout/thank-you-order-status) to add custom content across multiple pages of checkout.

Depending on the page and state of Shopify’s internal order processing, the targets and APIs available to extensions can vary.

A multi-page extension can be used to add custom content such as final sale details, upsells, surveys and more. The following examples demonstrate how to use targets to target different parts of the flow, depending on your use case.

## Pre-purchase

You can configure an extension to display before a purchase is completed by using the `purchase.checkout.cart-line-item.render-after` target. This means that merchants can place the extension on the information, payment and shipping steps of checkout (pre-purchase).

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="tsx" data-title="src/Checkout.tsx">
// Set up the entry point for the extension
const cartLineItemRender = reactExtension("purchase.checkout.cart-line-item.render-after", () => <App />);
export {cartLineItemRender};
</script>
<script type="text/plain" data-language="toml" data-title="shopify.extension.toml">
[[extensions.targeting]]
target = "purchase.checkout.cart-line-item.render-after"
module = "./src/Checkout.tsx"
export = "cartLineItemRender"
</script>

</div>
</p>


![An image that shows an extension in the order summary displaying that the product cannot be shipped to PO boxes](/assets/apps/checkout/thank-you-order-status/pre-purchase-extension-rendering.png)

## Post-purchase

You can configure an extension to display after a purchase is completed by using both the `purchase.thank-you.cart-line-item.render-after` and `customer-account.order-status.cart-line-item.render-after` targets. This means that merchants can place the extension on the **Thank you** and **Order status** pages (post-purchase).

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="tsx" data-title="src/Checkout.tsx">
// Allow the extension to render on the Thank you page
const thankYouRender = reactExtension("purchase.thank-you.cart-line-list.render-after", () => <App />);
export {thankYouRender};
// Allow the extension to render on the Order status page
const orderDetailsRender = reactExtension("customer-account.order-status.cart-line-item.render-after", () => <App />);
export {orderDetailsRender};
</script>
<script type="text/plain" data-language="toml" data-title="shopify.extension.toml">
[[extensions.targeting]]
target = "purchase.thank-you.cart-line-item.render-after"
module = "./src/Checkout.tsx"
export = "thankYouRender"

[[extensions.targeting]]
target = "customer-account.order-status.cart-line-item.render-after"
module = "./src/Checkout.tsx"
export = "orderDetailsRender"
</script>

</div>
</p>


![An image that shows an extension in the order summary displaying expected shipping delays](/assets/apps/checkout/thank-you-order-status/post-purchase-extension-rendering.png)

## Pre and post purchase

You can configure an extension to display on all areas of the checkout flow by combining the `purchase.checkout.cart-line-item.render-after`, `purchase.thank-you.cart-line-item.render-after` and `customer-account.order-status.cart-line-item.render-after` targets.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="tsx" data-title="src/Checkout.tsx">
// Allow the extension to render on the pre-purchase checkout pages
const cartLineItemRender = reactExtension("purchase.thank-you.cart-line-item.render-after", () => <App />);
export {cartLineItemRender};
// Allow the extension to render on the Thank you page
const thankYouRender = reactExtension("purchase.thank-you.cart-line-item.render-after", () => <App />);
export {thankYouRender};
// Allow the extension to render on the Order status page
const orderDetailsRender = reactExtension("customer-account.order-status.cart-line-item.render-after", () => <App />);
export {orderDetailsRender};
</script>
<script type="text/plain" data-language="toml" data-title="shopify.extension.toml">
[[extensions.targeting]]
target = "purchase.checkout.cart-line-item.render-after"
module = "./src/Checkout.tsx"
export = "cartLineItemRender"

[[extensions.targeting]]
target = "purchase.thank-you.cart-line-item.render-after"
module = "./src/Checkout.tsx"
export = "thankYouRender"

[[extensions.targeting]]
target = "customer-account.order-status.cart-line-item.render-after"
module = "./src/Checkout.tsx"
export = "orderDetailsRender"
</script>

</div>
</p>


![An image that shows an extension in the order summary final sale, no returns or exchanges](/assets/apps/checkout/thank-you-order-status/persistent-extension-rendering.png)

## Testing the extension in the checkout editor

1. Follow the guide to [test an extension in the editor](/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor)
1. Use the dropdown list at the top of the page to navigate to the **Thank you** and **Order status** pages.

> Note:
> In a future release, we'll improve the extension installation in the editor to enable merchants to add an extension to multiple pages at once and share configuration between each placements.



## Next steps

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/customer-accounts/editor-extension-collections" 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">
      Get started with editor extension collections
    </h3>
    <p class="resource-card__description">Get started with building editor extension collections to group multi-page extensions</p>
  </a>
</div>
</div>