--- gid: 2c6872d8-1f0e-4356-9784-1eed18c8dda4 title: Add a survey to Thank you and Order status pages description: Learn how to build a post-checkout survey that appears on Thank you and Order status pages using checkout UI extensions. --- import Deploy from 'app/views/partials/extensions/deploy.mdx' import CheckoutUiRequirements from 'app/views/partials/apps/checkout/ui-extensions/requirements.mdx' import CheckoutUiCreate from 'app/views/partials/apps/checkout/ui-extensions/create.mdx' import CheckoutUiReference from 'app/views/partials/apps/checkout/ui-extensions/reference.mdx' import CheckoutUiPreview from 'app/views/partials/apps/checkout/ui-extensions/preview.mdx' import CheckoutUiTroubleshooting from 'app/views/partials/apps/checkout/ui-extensions/troubleshooting.mdx' <Repo extension="react" href="https://github.com/Shopify/example-checkout--order-status--react" /> <Picker name="extension"> <PickerOption name="react" /> </Picker> <Overview> The **Thank you** and **Order status** pages are shown to customers at the end of checkout, and can be customized using checkout UI extensions. In this tutorial, you'll create a single extension that displays two different surveys depending where an app user places the extension in the checkout editor. You'll use both the `purchase.thank-you.block.render` and `customer-account.order-status.block.render` extension targets to build two surveys: - A survey that asks the customer how they heard about the store. - A survey that asks how the customer is enjoying their purchase after the order has been delivered. Follow along with this tutorial to build a sample app, or clone the completed sample app. You can use this tutorial as an example to build other customizations, such as adding a form that customers can submit to subscribe to a newsletter. ![A GIF that shows a post-checkout customer survey extension rendering and responding to input.](/assets/apps/checkout/thank-you-order-status/survey-overview.gif) ## What you'll learn In this tutorial, you'll learn how to do the following: - Create a checkout UI extension that renders on the **Thank you** and **Order status** pages. - Use multiple extension targets to display different interfaces to the customer. - Set up the UI components for the post-checkout survey. - Run the extension locally and test it on a development store. - Deploy your extension code to Shopify. </Overview> <Requirements> <CheckoutUiRequirements /> </Requirements> <StepSection> <Step> ### Create a Checkout UI extension To create a checkout UI extension, you'll use Shopify CLI, which generates starter code for building your extension. <Substep> <CodeRef extension="react" href="https://github.com/Shopify/example-checkout--order-status--react/blob/main/extensions/order-status-thank-you/src/Checkout.jsx" /> <CheckoutUiCreate /> </Substep> </Step> <Step> ### Set up a target for your extension Set up a target for your checkout UI extension. [Targets](/docs/api/checkout-extensions/checkout#extension-targets) control where your extension renders in the checkout flow. <Substep> <CodeRef extension="react" href="https://github.com/Shopify/example-checkout--order-status--react/blob/main/extensions/order-status-thank-you/src/Checkout.jsx" tag="order-status.extension-point"/> #### Export the targets from your script file In your `Checkout.jsx` file, set the entrypoints for the checkout extension, and then export them so they can be referenced in your configuration. For each target that you want to use, create a `reactExtension` function that references your target, and export it using a named export. --- This example code uses the `purchase.thank-you.block.render` and `customer-account.order-status.block.render` targets. Adding two targets enables you to display different components for each target. Targets prefixed by `purchase.thank-you` render only on the **Thank you** page. Because the **Thank you** page is shown at the end of every checkout, you can ensure that the survey is seen by the majority of customers. When a customer visits the **Thank you** page, the order hasn't been created or delivered yet. To enable customers to review the product, you'll use a `customer-account.order-status` target to add content to the **Order status** page. The **Order status** page is shown to customers when they revisit their purchase. <Resources> [purchase.thank-you.block.render](/docs/api/checkout-ui-extensions/latest/targets/block/purchase-thank-you-block-render) [customer-account.order-status.block.render](/docs/api/checkout-ui-extensions/latest/targets/block/customer-account-order-status-block-render) </Resources> </Substep> <Substep> <CodeRef extension="react" href="https://github.com/Shopify/example-checkout--order-status--react/blob/main/extensions/order-status-thank-you/shopify.extension.toml" tag="order-status.cofig-extension"/> <CheckoutUiReference /> </Substep> </Step> <Step> ### Build the survey UI Build a user interface using components from the [checkout UI extensions](/docs/api/checkout-ui-extensions/latest/components) component library. <Substep> <CodeRef extension="react" href="https://github.com/Shopify/example-checkout--order-status--react/blob/main/extensions/order-status-thank-you/src/Checkout.jsx" tag="order-status.survey-component"/> #### Create a survey component Create a function to set up checkout UI components that the two surveys share, including a button to submit feedback and a message that appears after the feedback is submitted. --- Checkout UI extensions are limited to specific UI components exposed by the platform [for security reasons](/docs/api/checkout-ui-extensions#security). Checkout UI components allow you to create a UI that feels seamless within the checkout experience, and that inherits a merchant's brand settings. <Resources> [View](/docs/api/checkout-ui-extensions/latest/components/structure/view) [BlockStack](/docs/api/checkout-ui-extensions/latest/components/structure/blockstack) [Heading](/docs/api/checkout-ui-extensions/latest/components/titles-and-text/heading) [Text](/docs/api/checkout-ui-extensions/latest/components/titles-and-text/text) [Button](/docs/api/checkout-ui-extensions/latest/components/actions/button) </Resources> </Substep> <Substep> #### Create an attribution survey <CodeRef extension="react" href="https://github.com/Shopify/example-checkout--order-status--react/blob/main/extensions/order-status-thank-you/src/Checkout.jsx" tag="order-status.attribution-survey"/> Use the `Survey` component that you created, along with checkout UI components, to build an attribution survey interface. This UI includes a `ChoiceList` to specify how the customer heard about the store. --- This sample code simulates storing the survey response by logging to your console. In a production-ready application, you should store the survey response in a database, or in [metafields](/docs/apps/custom-data/). This sample code also uses hard-coded survey questions and options. In a production-ready application, you should allow app users to customize the survey questions and answers with [checkout UI extension settings](/docs/api/checkout-ui-extensions/latest/configuration#settings-definition). Learn more about the [UX guidelines](/docs/apps/checkout/thank-you-order-status/ux-guidelines) for these pages. <Resources> [ChoiceList](/docs/api/checkout-ui-extensions/latest/components/forms/choicelist) [Choice](/docs/api/checkout-ui-extensions/latest/components/forms/choice) [BlockStack](/docs/api/checkout-ui-extensions/latest/components/structure/blockstack) </Resources> </Substep> <Substep> #### Create a product review survey <CodeRef extension="react" href="https://github.com/Shopify/example-checkout--order-status--react/blob/main/extensions/order-status-thank-you/src/Checkout.jsx" tag="order-status.product-review"/> Use the `Survey` component that you created, along with checkout UI components, to build a product review survey interface. This UI includes a `ChoiceList` to specify how the customer is enjoying their purchase. --- <Resources> [ChoiceList](/docs/api/checkout-ui-extensions/latest/components/forms/choicelist) [Choice](/docs/api/checkout-ui-extensions/latest/components/forms/choice) [BlockStack](/docs/api/checkout-ui-extensions/latest/components/structure/blockstack) </Resources> </Substep> </Step> <Step> <CheckoutUiPreview extension="Order status page "/> <Substep> #### Test the attribution survey 1. Complete the checkout by [placing a test order](https://help.shopify.com/manual/checkout-settings/test-orders). When you visit the **Thank you** page, the attribution survey displays. 1. Refresh the page to access the product review survey on the **Order status** page. 1. Optional: To preview the dynamic extension in a different supported location, add the [placement-reference URL](/docs/apps/build/checkout/test-checkout-ui-extensions#dynamic-extension-points) query parameter. --- To remain on the **Thank you** page through a page refresh, append the `?prevent_order_redirect=true` parameter to the URL. This parameter persists in the local storage of your browser and prevents redirection to the **Order status** page. To re-enable redirection, either clear your local storage or add the `?prevent_order_redirect=false` parameter to the URL and reload the page. <CheckoutUiTroubleshooting /> </Substep> </Step> <Deploy /> </StepSection> <NextSteps> ## Tutorial complete! Nice work - what you just built could be used by Shopify merchants around the world! Keep the momentum going with these related tutorials and resources. ### Next steps <CardGrid> <LinkCard href="/docs/apps/checkout/thank-you-order-status/ux-guidelines"> #### Review order status and **Thank you** page UX guidelines Optimize your user experience by following our UX guidelines. </LinkCard> <LinkCard href="/docs/apps/checkout/localizing-ui-extensions"> #### Localize your extension Learn how to localize the text and number formats in your extension. </LinkCard> <LinkCard href="/docs/api/checkout-ui-extensions/latest/components"> #### Explore the checkout UI extension component reference Learn about all of the components that you can use in your checkout UI extension. </LinkCard> <LinkCard href="/docs/api/checkout-ui-extensions/latest/apis/extensiontargets"> #### Explore the checkout UI extension targets API reference Learn about the extension targets offered in the checkout. </LinkCard> </CardGrid> </NextSteps>