---
title: Header
description: >-
The header area appears at the top of the Thank you page, directly below the
store logo and navigation. Extensions in this area add high-visibility content
to the post-purchase experience that buyers see immediately after completing
their order.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/thank-you/header
md: >-
https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/thank-you/header.md
---
# Header
The header area appears at the top of the Thank you page, directly below the store logo and navigation. Extensions in this area add high-visibility content to the post-purchase experience that buyers see immediately after completing their order.
### Use cases
* **First-time buyer welcome**: Display a personalized welcome message for new customers and encourage account creation to build long-term engagement.
* **Post-purchase surveys**: Collect buyer feedback through a compact form.
* **Loyalty program enrollment**: Prompt unenrolled buyers to join a rewards program, or show enrolled buyers how many points they earned from the purchase.
* **Referral program prompts**: Generate shareable referral URLs tied to the completed order, with a copy-to-clipboard action for easy sharing.
* **Order tracking and delivery estimates**: Display expected delivery information or show a map for local pickup orders.
* **App install prompts**: Encourage buyers to download the store's mobile app for order tracking and reorder convenience.
***
## Header target
Use this [static extension target](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets#static-extension-targets) to extend the area directly below the Thank you page header. This target supports 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 header target
`purchase.thank-you.header.render-after`
Adds persistent content directly below the header on the Thank you page. 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 customer's first order.
Extensions also have read access through API properties to shop information, buyer identity, cost breakdowns, cart lines, delivery groups, discount codes, localization, and other checkout state. 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 a header extension that checks whether the buyer is a first-time customer and displays a personalized welcome message.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
export default function extension() {
render(, document.body);
}
function Extension() {
const isFirstOrder =
shopify.orderConfirmation.value?.isFirstOrder;
if (isFirstOrder) {
return (
Welcome to {shopify.shop.name}! Thanks for
your first order.
);
}
return (
Thanks for your order,{' '}
{shopify.shop.name} appreciates your
continued support.
);
}
```
* ####
##### Description
Display the order number and a link to the store's order status page. This example reads order confirmation data to customize a banner.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
export default function extension() {
render(, document.body);
}
function Extension() {
const orderNumber =
shopify.orderConfirmation.value?.number;
if (!orderNumber) return null;
return (
Order #{orderNumber} confirmed. You'll
receive tracking details by email.
View your orders
);
}
```
***
## Best practices
* **Reserve space for dynamic content**: Layout shifts are highly visible in the header. 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 an enrollment prompt so it doesn't re-show on page refresh.
***