Choose a version:

Block

Use block targets to build general-purpose extensions which merchants can reposition using the checkout and accounts editor. Unlike static extension targets that render at fixed locations, block targets can be displayed across different areas of the Thank you page according to merchants' needs.

Anchor to Use casesUse cases

Loyalty points summary: Display how many loyalty points the buyer earned on their purchase, with personalized messaging for first-time buyers.
Post-purchase survey: Collect feedback about the buying experience through a compact form, using the Storage API to track whether the survey has already been submitted.
Referral program: Generate and display shareable referral links or discount codes tied to the completed order.
Order confirmation details: Show the order number or additional confirmation information in a merchant-placed block.
First-order welcome: Display a personalized welcome message for new customers with information about loyalty programs or account benefits.

Anchor to Block targetBlock target

A block extension target on the Thank you page that isn't tied to a specific section. Merchants control the placement using the checkout and accounts editor. During development, you can preview the target at different locations by using a URL parameter.

Anchor to Render block ,[object Object]Render block target

purchase.thank-you.block.render

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;

const total = parseFloat(

shopify.cost.totalAmount.value.amount,

);

const pointsEarned = Math.floor(total);

return (

<s-banner>

{order.isFirstOrder

? `Welcome! You earned ${pointsEarned} loyalty points on your first order.`

: `You earned ${pointsEarned} loyalty points on this order.`}

</s-banner>

);

}

Examples

Display a loyalty points summary

Description

Show buyers how many loyalty points they earned on their purchase. This example reads the order total and personalizes the message for first-time buyers.

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;
  const total = parseFloat(
    shopify.cost.totalAmount.value.amount,
  );
  const pointsEarned = Math.floor(total);

  return (
    <s-banner>
      {order.isFirstOrder
        ? `Welcome! You earned ${pointsEarned} loyalty points on your first order.`
        : `You earned ${pointsEarned} loyalty points on this order.`}
    </s-banner>
  );
}

Show a post-purchase product recommendation

Description

Display a product recommendation after the purchase completes. This example reads cart lines to create an upselling message and links to the storefront.

Preact

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

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

function Extension() {
  const cartLines = shopify.lines.value;

  if (cartLines.length === 0) return null;

  const firstItem = cartLines[0];
  const title = firstItem.merchandise?.title;

  return (
    <s-banner heading="You might also like">
      <s-text>
        Buyers who purchased {title} also loved
        our bestselling accessories.
      </s-text>
      <s-link href={`https://${shopify.shop.myshopifyDomain}/collections/accessories`}>
        Browse accessories
      </s-link>
    </s-banner>
  );
}

Anchor to Best practicesBest practices

Design for flexible placement: The merchant controls where this extension appears, so avoid assumptions about surrounding content. Test the extension in multiple supported locations to confirm it renders well in each.

Anchor to Placement referencesPlacement references

During development, preview each supported placement by appending ?placement-reference={name} to the Thank you page URL printed by Shopify CLI. For example, ?placement-reference=ORDER_STATUS1 previews the extension above the order status card.

You can also set default_placement in your extension's TOML configuration file to recommend an initial placement to merchants in the checkout and accounts editor.

Reference	Location
`ORDER_STATUS1`	Above the order status card, at the top of the Thank you page content.
`ORDER_STATUS2`	Below Shop ads and upsells, above the buyer information details.
`ORDER_STATUS3`	Below the buyer information, at the bottom of the Thank you page content.
`ORDER_SUMMARY1`	Above the line items in the order summary.
`ORDER_SUMMARY2`	Below the line items in the order summary.
`ORDER_SUMMARY3`	Below the money lines in the order summary. On checkout, this same reference renders above the money lines.

ORDER_SUMMARY4 isn't supported on the Thank you page.

Was this page helpful?

Block

Anchor to Use casesUse cases

Anchor to Block targetBlock target

Anchor to Render block ,[object Object]Render block target

Supported components

Available APIs

Supported components

Available APIs

Preact

Anchor to Best practicesBest practices

Anchor to Placement referencesPlacement references