--- title: Order summary description: >- The order summary area on the Thank you page displays the purchased line items and order totals after the buyer completes their order. Extensions in this area help merchants build post-purchase engagement by surfacing product-specific instructions, review prompts, and follow-up actions alongside the order details. api_version: 2026-04 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/thank-you/order-summary md: >- https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/thank-you/order-summary.md --- # Order summary The order summary area on the Thank you page displays the purchased line items and order totals after the buyer completes their order. Extensions in this area help merchants build post-purchase engagement by surfacing product-specific instructions, review prompts, and follow-up actions alongside the order details. The cart line item target doesn't render for custom line items belonging to draft order invoices. ### Use cases * **Product-specific post-purchase instructions**: Show setup guides, care instructions, or download links for digital products next to each purchased item. * **Per-item review prompts**: Invite buyers to leave reviews for individual products, linking directly to the review submission flow. * **Product registration and warranty activation**: Prompt buyers to register specific products or activate warranties immediately after purchase. * **Post-purchase surveys**: Collect buyer feedback through a compact form after the order summary. * **First-order welcome and onboarding**: Display personalized welcome messages for new buyers with loyalty program enrollment or onboarding information. * **Referral program invitations**: Generate shareable referral links or codes tied to the completed order for easy sharing. ![Thank you page order summary showing two purchased items (Lipstick, Gel Moisturizer) each with a purchase.thank-you.cart-line-item.render-after target slot, and purchase.thank-you.cart-line-list.render-after below the complete item list.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/purchase.thank-you.order-summary.overview-Bluiqkyd.png) *** ## Line item targets Use these [static extension targets](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets#static-extension-targets) to extend the order summary line items area on the Thank you page. These targets support the full checkout component set, including form fields, banners, images, and interactive elements. The examples demonstrate using the [Order API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/order-api#order-confirmation-properties) for order data and API properties for reading checkout state. ### Thank you cart line item target `purchase.thank-you.cart-line-item.render-after` Renders on every line item in the order summary on the Thank you page, inside the details under the line item properties element. This target is instantiated once for each item in the order. To selectively show content for specific items, inspect the cart line data from `target` and return `null` for items where your extension doesn't apply. This target receives [additional cart line item properties](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-lines-api#cart-line-item-properties) that provide the specific cart line through the `target` property with access to merchandise details, quantity, cost, attributes, and discount allocations. The [Order API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/order-api#order-confirmation-properties) provides read access to order data, including the order number and whether it's the buyer's first order. Extensions also have read access through API properties to checkout state, including shop information, buyer identity, cost breakdowns, and cart lines. Write access isn't available on Thank you page targets because the order is complete. ### Support Components (55) APIs (24) ### Supported components * [Abbreviation](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/abbreviation) * [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner) * [Box](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/box) * [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/button) * [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/checkbox) * [Chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/chip) * [Choice list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/choice-list) * [Clickable](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clickable) * [Clickable chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clickable-chip) * [Clipboard item](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clipboard-item) * [Consent checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/consent-checkbox) * [Consent phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/consent-phone-field) * [Date field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/date-field) * [Date picker](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/date-picker) * [Details](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/details) * [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/divider) * [Drop zone](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/drop-zone) * [Email field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/email-field) * [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/form) * [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/grid) * [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/heading) * [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/image) * [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/link) * [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/map) * [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/modal) * [Money field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/money-field) * [Number field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/number-field) * [Ordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/ordered-list) * [Paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/paragraph) * [Password field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/password-field) * [Payment icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon) * [Phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/phone-field) * [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/popover) * [Press button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/press-button) * [Product thumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail) * [Progress](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress) * [Qr code](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/qr-code) * [Query container](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/query-container) * [Scroll box](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box) * [Section](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/section) * [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/select) * [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/sheet) * [Skeleton paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph) * [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner) * [Stack](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/stack) * [Switch](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/switch) * [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/text) * [Text area](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/text-area) * [Text field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/text-field) * [Time](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/time) * [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/tooltip) * [Unordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/unordered-list) * [Url field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/url-field) ### Available APIs * [Addresses API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/addresses-api) * [Analytics API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/analytics-api) * [Attributes API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/attributes-api) * [Buyer Identity API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/buyer-identity-api) * [Buyer Journey API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/buyer-journey-api) * [Cart Instructions API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cart-instructions-api) * [Cart Lines API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cart-lines-api) * [Checkout Token API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/checkout-token-api) * [Cost API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cost-api) * [Customer Privacy API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/customer-privacy-api) * [Delivery API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/delivery-api) * [Discounts API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/discounts-api) * [Extension API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/extension-api) * [Gift Cards API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/gift-cards-api) * [Localization API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/localization-api) * [Localized Fields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/localized-fields-api) * [Metafields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/metafields-api) * [Note API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/note-api) * [Payments API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/payments-api) * [Session Token API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/session-token-api) * [Settings API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/settings-api) * [Shop API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/shop-api) * [Storage API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/storage-api) * [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/storefront-api) Examples ### Examples * #### ##### Description Create an extension that shows a review prompt for each purchased item with a link to the review submission page. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default function extension() { render(, document.body); } function Extension() { const line = shopify.target.value; const title = line.merchandise.title; return ( How do you like your {title}? Leave a review ); } ``` ### Thank you cart line list target `purchase.thank-you.cart-line-list.render-after` Renders once after all line items in the order summary on the Thank you page. This target appears once per order, unlike the cart line item target, which is instantiated for each item. The [Order API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/order-api#order-confirmation-properties) provides read access to order data, including the order number and whether it's the buyer's first order. Extensions also have read access through API properties to checkout state, including shop information, buyer identity, cost breakdowns, and cart lines. The Storefront API is available through the [`query`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/storefront-api#docsstandardqueryapi-propertydetail-query) method for fetching additional data like product recommendations. Write access isn't available on Thank you page targets because the order is complete. ### Support Components (55) APIs (24) ### Supported components * [Abbreviation](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/abbreviation) * [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner) * [Box](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/box) * [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/button) * [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/checkbox) * [Chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/chip) * [Choice list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/choice-list) * [Clickable](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clickable) * [Clickable chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clickable-chip) * [Clipboard item](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clipboard-item) * [Consent checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/consent-checkbox) * [Consent phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/consent-phone-field) * [Date field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/date-field) * [Date picker](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/date-picker) * [Details](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/details) * [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/divider) * [Drop zone](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/drop-zone) * [Email field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/email-field) * [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/form) * [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/grid) * [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/heading) * [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/image) * [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/link) * [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/map) * [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/modal) * [Money field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/money-field) * [Number field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/number-field) * [Ordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/ordered-list) * [Paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/paragraph) * [Password field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/password-field) * [Payment icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon) * [Phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/phone-field) * [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/popover) * [Press button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/press-button) * [Product thumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail) * [Progress](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress) * [Qr code](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/qr-code) * [Query container](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/query-container) * [Scroll box](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box) * [Section](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/section) * [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/select) * [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/sheet) * [Skeleton paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph) * [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner) * [Stack](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/stack) * [Switch](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/switch) * [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/text) * [Text area](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/text-area) * [Text field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/text-field) * [Time](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/time) * [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/tooltip) * [Unordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/unordered-list) * [Url field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/url-field) ### Available APIs * [Addresses API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/addresses-api) * [Analytics API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/analytics-api) * [Attributes API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/attributes-api) * [Buyer Identity API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/buyer-identity-api) * [Buyer Journey API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/buyer-journey-api) * [Cart Instructions API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cart-instructions-api) * [Cart Lines API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cart-lines-api) * [Checkout Token API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/checkout-token-api) * [Cost API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cost-api) * [Customer Privacy API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/customer-privacy-api) * [Delivery API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/delivery-api) * [Discounts API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/discounts-api) * [Extension API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/extension-api) * [Gift Cards API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/gift-cards-api) * [Localization API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/localization-api) * [Localized Fields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/localized-fields-api) * [Metafields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/metafields-api) * [Note API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/note-api) * [Payments API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/payments-api) * [Session Token API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/session-token-api) * [Settings API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/settings-api) * [Shop API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/shop-api) * [Storage API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/storage-api) * [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/storefront-api) Examples ### Examples * #### ##### Description Create an extension that shows a short feedback survey after the order summary. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; import {useState} from 'preact/hooks'; export default function extension() { render(, document.body); } function Extension() { const [submitted, setSubmitted] = useState(false); const isFirstOrder = shopify.orderConfirmation.value?.isFirstOrder; if (submitted) { return ( Thanks for your feedback! ); } return ( {isFirstOrder ? 'Welcome! How was your first experience?' : 'How was your experience?'} Great OK Needs improvement setSubmitted(true)}> Submit ); } ``` *** ## Best practices * **Reserve space for dynamic content**: The order summary is visible throughout the Thank you page. If you load data asynchronously, use a [skeleton paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/skeleton-paragraph) or [spinner](https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/spinner) to hold space while content loads. * **Use the [Storage API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/storage-api) to track interactions**: Record whether a buyer has already submitted a survey or dismissed a prompt so it doesn't resurface on page refresh. * **Check `isFirstOrder` for personalization**: Use `orderConfirmation.value.isFirstOrder` from the [Order API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/order-api#order-confirmation-properties) to differentiate first-time buyers from returning customers and display appropriate messaging. * **Keep per-item extensions lightweight**: The cart line item target runs once for each item in the order. Avoid heavy network calls for each instance and consider caching data using the [Storage API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/storage-api) to reduce repeated requests. * **Use the cart line target property directly**: In the cart line item target, read `shopify.target.value` for the specific cart line rather than searching through `shopify.lines`. The [cart line item properties](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-lines-api#cart-line-item-properties) give you direct access to the attached line item. ***