This guide introduces UX guidelines for Thank you and Order status customizations.

## Choosing placement

Before getting started, you first need to decide whether you want your extension to show up at a static target, or a dynamic target. Read the [target framework](/docs/api/checkout-ui-extensions/latest/apis/extensiontargets) to learn more. Choosing the right target approach is key to providing a great customer experience.

![The Order status page, with a highlighted section labelled "purchase.thank-you.block.render [OrderStatus1]".](/assets/apps/checkout/thank-you-order-status/orderstatus1-extension-point.png)

In the example above, `purchase.thank-you.block.render` is a dynamic extension point, which a merchant can place wherever they want. In this instance, the extension adds a post-checkout survey extension in `OrderStatus1` above the customer information, because the survey feedback should be captured directly after the buying experience.

## Choosing components

To understand the complete list of components needed to create a Thank you and Order status extension, you should first understand the extension's possible states.

![A Thank you and Order status extension going through its four possible states.](/assets/apps/checkout/thank-you-order-status/post-checkout-extension-loading.gif)

An extension has four possible states:

- Loading state. Learn more about [requesting network access scope](/docs/api/checkout-ui-extensions/latest/configuration#network-access).

- Loaded (default) state

- Processing state

- Submitted state

> Note:
> The submitted state doesn't need a success banner because the addition of the survey to the page indicates that the extension was rendered.

### Component list

To create the four possible states of a post-checkout survey extension, you need all the components listed in the following chart.

<table>
<tr>
    <th>Component</th>
    <th width="50%">Preview</th>
    <th>Tips</th>
</tr>
<tr>
    <td><a href="/docs/api/checkout-ui-extensions/latest/components/feedback/skeletontext">SkeletonText</a></td>
    <td><img src="/assets/apps/checkout/thank-you-order-status/components/skeletontext.png" alt="A SkeletonText component." /></td>
    <td>Try to reflect the actual content's dimensions to keep placement from shifting when the content loads.</td>
</tr>
<tr>
    <td><a href="/docs/api/checkout-ui-extensions/latest/components/structure/view">View</a></td>
    <td><img src="/assets/apps/checkout/thank-you-order-status/components/view.png" alt="A View component." /></td>
    <td>View is a generic container component. Its contents will always be the same size, so this component can be useful in layout components like Grid, BlockStack, and InlineStack that would otherwise stretch their children to fit.</td>
</tr>
<tr>
    <td><a href="/docs/api/checkout-ui-extensions/latest/components/titles-and-text/heading">Heading</a></td>
    <td><img src="/assets/apps/checkout/thank-you-order-status/components/heading.png" alt="A Heading component." /></td>
    <td>Allow merchants to customize the header content and make it configurable from the checkout editor.</td>
</tr>
<tr>
    <td><a href="/docs/api/checkout-ui-extensions/latest/components/titles-and-text/text">Text</a></td>
    <td><img src="/assets/apps/checkout/thank-you-order-status/components/text.png" alt="A Text component." /></td>
    <td>Allow merchants to customize the text content and make it configurable from the checkout editor.</td>
</tr>
<tr>
    <td><a href="/docs/api/checkout-ui-extensions/latest/components/forms/choicelist">ChoiceList</a></td>
    <td><img src="/assets/apps/checkout/thank-you-order-status/components/choicelist.png" alt="A ChoiceList component." /></td>
    <td>Use choice lists to present a list of choices where customers can make a single selection or multiple selections. If possible, enable merchants to customize the `OptionList` content.</td>
</tr>
<tr>
    <td><a href="/docs/api/checkout-ui-extensions/latest/components/actions/button">Button</a></td>
    <td><img src="/assets/apps/checkout/thank-you-order-status/components/button.png" alt="A Button component." /></td>
    <td>Use secondary buttons here, reserving the primary button for the main call to actions (such as "Continue shopping").</td>
</tr>
<tr>
    <td><a href="/docs/api/checkout-ui-extensions/latest/components/feedback/banner">Banner</a></td>
    <td><img src="/assets/apps/checkout/thank-you-order-status/components/banner.png" alt="A Banner component." /></td>
    <td>Use secondary buttons here, reserving the primary button for the main call to actions (such as "Continue shopping").</td>
</tr>
</table>

## Choosing a layout

When using a nested layout, you need only the following structural component:

<table>
    <tr>
        <th>Component</th>
        <th width="50%">Preview</th>
        <th>Tips</th>
    </tr>
    <tr>
        <td><a href="/docs/api/checkout-ui-extensions/latest/components/structure/blockstack">BlockStack</a></td>
        <td><img src="/assets/apps/checkout/thank-you-order-status/components/blockstack.png" alt="A BlockStack component." /></td>
        <td>BlockStack components can be nested with themselves or with other components.</td>
    </tr>
</table>

Use the BlockStack component to vertically stack elements on top of each other.

![A BlockStack component with two elements vertically stacked on top of each other. The spacing between the components is highlighted.](/assets/apps/checkout/thank-you-order-status/blockstack-vertical.png)

### Nesting BlockStack

Spacing between the heading and content should be set to `base` to keep it consistent with nested components. To address different spacing values, you can nest a BlockStock inside of another BlockStack component, as shown in the following image:

![A BlockStack component nested inside another BlockStack component. Both BlockStack components are using the base spacing value so that they appear visually consistent with each other.](/assets/apps/checkout/thank-you-order-status/blockstack-nesting.png)

## Post-checkout survey UX guidelines

To help merchants gain customer trust and to provide a great post-checkout experience, follow these guidelines when designing a post-checkout survey app extension.

### Display only one survey per session

Limit content so that customers aren't overwhelmed with information after they've completed their order.

![The Order status page with only one placeholder survey included.](/assets/apps/checkout/thank-you-order-status/display-one-survey.png)

### Give merchants control over survey content

Merchants know their customers best and should have the flexibility to create surveys that relate to the shopping journey of their customers.

![A GIF that shows a rendered post-checkout survey extension cycling through different custom content that a merchant could choose to add.](/assets/apps/checkout/thank-you-order-status/survey-variations.gif)

## Next steps

- Use a Checkout UI extension to [add a post-checkout survey to the **Thank you** and **Order status** pages](/docs/apps/build/checkout/thank-you-order-status/add-survey).
- Explore [UX guidelines](/docs/apps/build/checkout/ux-for-checkout) for the entire checkout experience.

- For practical guidance on how to design a user interface for the Shopify admin, refer to Shopify's [App Design Guidelines](/docs/apps/design-guidelines).
- Get familiar with Polaris [accessibility](https://polaris.shopify.com/foundations/accessibility) and [content](https://polaris.shopify.com/content/merchant-to-customer) guidelines.