This guide introduces UX guidelines for **Thank you** and **Order status** page 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 **Thank you** or **Order status** page extensions, first consider the possible states for these extensions.

![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"><code>SkeletonText</code></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"><code>View</code></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 <code>Grid</code>, <code>BlockStack</code>, and <code>InlineStack</code> 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"><code>Heading</code></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"><code>Text</code></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"><code>ChoiceList</code></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 <code>OptionList</code> content.</td>
</tr>
<tr>
    <td><a href="/docs/api/checkout-ui-extensions/latest/components/actions/button"><code>Button</code></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"><code>Banner</code></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%"><code>Preview</code></th>
        <th>Tips</th>
    </tr>
    <tr>
        <td><a href="/docs/api/checkout-ui-extensions/latest/components/structure/blockstack"><code>BlockStack</code></a></td>
        <td><img src="/assets/apps/checkout/thank-you-order-status/components/blockstack.png" alt="A BlockStack component." /></td>
        <td><code>BlockStack</code> 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.