Choose a version:

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.

Anchor to Use casesUse 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.

Anchor to Header targetHeader target

Use this static extension target 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 for order data and API properties for reading checkout state.

Anchor to Thank you header ,[object Object]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 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 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)

Examples

jsx

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default function extension() {

render(<Extension />, document.body);

}

function Extension() {

const isFirstOrder =

shopify.orderConfirmation.value?.isFirstOrder;

if (isFirstOrder) {

return (

<s-banner tone="success">

Welcome to {shopify.shop.name}! Thanks for

your first order.

</s-banner>

);

}

return (

<s-banner>

Thanks for your order,{' '}

{shopify.shop.name} appreciates your

continued support.

</s-banner>

);

}

Examples

Description

Create a header extension that checks whether the buyer is a first-time customer and displays a personalized welcome message.

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const isFirstOrder =
    shopify.orderConfirmation.value?.isFirstOrder;

  if (isFirstOrder) {
    return (
      <s-banner tone="success">
        Welcome to {shopify.shop.name}! Thanks for
        your first order.
      </s-banner>
    );
  }

  return (
    <s-banner>
      Thanks for your order,{' '}
      {shopify.shop.name} appreciates your
      continued support.
    </s-banner>
  );
}

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

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const orderNumber =
    shopify.orderConfirmation.value?.number;

  if (!orderNumber) return null;

  return (
    <s-banner>
      <s-stack gap="base">
        <s-text>
          Order #{orderNumber} confirmed. You'll
          receive tracking details by email.
        </s-text>
        <s-link
          href={`https://${shopify.shop.myshopifyDomain}/account/orders`}
        >
          View your orders
        </s-link>
      </s-stack>
    </s-banner>
  );
}

Anchor to Best practicesBest practices

Reserve space for dynamic content: Layout shifts are highly visible in the header. If you load data asynchronously, use a skeleton paragraph or spinner to hold space while content loads.
Use the 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.

Was this page helpful?