Choose a version:

Information

The customer information section on the Thank you page displays the buyer's contact details and, for shipping orders, their delivery address. Use this target to add UI immediately after the customer information section, such as referral program prompts, loyalty enrollment offers, or order follow-up messaging.

The Order API at this target exposes only isFirstOrder and number. Detailed order information such as line items, payment method, or fulfillment status isn't available. Query the GraphQL Admin API's order from your app backend for full order details.

Anchor to Use casesUse cases

Referral program: Display a shareable referral link or discount code below the customer's contact details, encouraging buyers to refer friends immediately after completing their purchase.
Loyalty enrollment: Prompt first-time buyers to join a loyalty program, using order data to show how many points their purchase would earn.
Order follow-up: Display a personalized message with the order number, estimated delivery timeline, and tracking information.
Account creation: Encourage guest buyers to create an account by highlighting benefits like order history and faster future checkouts.
Feedback request: Show a compact survey or feedback link below the customer information section.

Anchor to Information targetInformation target

A static extension target that renders below the customer information section on the Thank you page. Unlike block targets, this target always renders in a fixed position relative to the customer information.

Anchor to Render after customer information ,[object Object]Render after customer information target

purchase.thank-you.customer-information.render-after

The Order API 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 details, buyer identity, cost totals, and cart lines. Write access isn't available on Thank you page targets because the order is complete.

Support

Components (55)

APIs (24)

Examples

Preact

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

import {render} from 'preact';

export default function extension() {

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

}

function Extension() {

const order = shopify.orderConfirmation.value;

if (!order.isFirstOrder) return null;

const pointsEarned = Math.floor(

shopify.cost.totalAmount.value.amount,

);

return (

<s-banner heading="Welcome to our referral program">

<s-text>

{`You earned ${pointsEarned} bonus points on your first order. Refer a friend and earn 100 more points when they place an order.`}

</s-text>

<s-link href="https://example.com/referrals">

Learn more about referrals

</s-link>

</s-banner>

);

}

Examples

Prompt first-time buyers to join a referral program

Description

Display a personalized referral message below the customer information section. This example reads the order confirmation to check whether it's the buyer's first order and displays a referral banner with a link for new customers.

Preact

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

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

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

  if (!order.isFirstOrder) return null;

  const pointsEarned = Math.floor(
    shopify.cost.totalAmount.value.amount,
  );

  return (
    <s-banner heading="Welcome to our referral program">
      <s-text>
        {`You earned ${pointsEarned} bonus points on your first order. Refer a friend and earn 100 more points when they place an order.`}
      </s-text>
      <s-link href="https://example.com/referrals">
        Learn more about referrals
      </s-link>
    </s-banner>
  );
}

Encourage account creation for guest buyers

Description

Display an account creation prompt below the customer information for guest buyers. This example checks whether a customer record exists and, if not, shows a sign-up banner.

Preact

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

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

function Extension() {
  const customer =
    shopify.buyerIdentity?.customer.value;

  if (customer) return null;

  return (
    <s-banner heading="Create an account">
      <s-text>
        Save your details for faster checkout next
        time and track your order status.
      </s-text>
      <s-link
        href={`https://${shopify.shop.myshopifyDomain}/account/register`}
      >
        Create account
      </s-link>
    </s-banner>
  );
}

Anchor to Best practicesBest practices

Personalize for first-time buyers: Use shopify.orderConfirmation.value.isFirstOrder to tailor messaging. First-time buyers are more receptive to loyalty enrollment and referral program prompts.
Keep content contextually relevant: This target renders directly below the customer's contact details. Content should relate to the buyer's identity or post-purchase actions, not to products or order summary information.

Was this page helpful?

Information

Anchor to Use casesUse cases

Anchor to Information targetInformation target

Anchor to Render after customer information ,[object Object]Render after customer information target

Supported components

Available APIs

Supported components

Available APIs

Preact

Anchor to Best practicesBest practices