Choose a version:

Announcement

Requires access to protected customer data for some properties.

The announcement target renders a dismissable banner at the top of the Thank you page. Extensions here communicate high-priority content you want buyers to act on, such as surveys, promotions, and referral programs. Only one extension renders at this target. If multiple apps target this location, only one is displayed, so design your extension with the expectation it may not render.

Order data through the Order API at this target is limited to the order ID, order number, and whether it's the buyer's first order. For additional order details, query the GraphQL Admin API's order from your app backend.

Anchor to Use casesUse cases

Exclusive offers and promotions: Display special offers, discount codes, or loyalty program enrollment opportunities to returning buyers.
Buyer surveys and feedback: Prompt buyers to complete a survey or provide feedback about their shopping experience.
Referral programs: Promote referral programs and provide a direct link for buyer participation.
Localized messaging: Show market-specific announcements based on the buyer's country, language, or currency, such as customs information for international orders or region-specific promotions.

Anchor to Announcement targetAnnouncement target

Use this static target to display time-sensitive announcements to buyers immediately after their purchase.

Extensions must wrap all content inside the announcement component. The examples demonstrate using the Order API for order data and API properties for authenticated backend calls, Storefront API queries, and merchant settings.

Anchor to Thank you announcement ,[object Object]Thank you announcement target

purchase.thank-you.announcement.render

Renders a dismissable announcement banner above all other content on the Thank you page. Use this target to capture the buyer's attention with time-sensitive content that links to a modal for longer interactions.

Extensions at this target can access order information through the Order API, including whether it's the buyer's first order. The announcement renders as a banner with built-in expand and collapse behavior.

Support

Components (56)

APIs (24)

Examples

jsx

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

import {render} from 'preact';

export default function extension() {

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

}

function Extension() {

return (

<s-announcement>

<s-stack direction="inline" gap="base">

<s-text>

How was your shopping experience?

</s-text>

<s-link

commandFor="survey-modal"

command="--show"

Take a quick survey

</s-link>

</s-stack>

<s-modal

id="survey-modal"

heading="Quick survey"

<s-text-area

rows="4"

label="How can we improve your experience?"

<s-button

slot="primary-action"

variant="primary"

commandFor="survey-modal"

command="--hide"

Submit

</s-button>

<s-button

slot="secondary-actions"

commandFor="survey-modal"

command="--hide"

No thanks

</s-button>

</s-modal>

</s-announcement>

);

}

Examples

Description

Add a dismissable announcement to the Thank you page that prompts buyers to fill out a survey. This example uses the announcement component with a modal to collect feedback about the shopping experience.

jsx

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

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

function Extension() {
  return (
    <s-announcement>
      <s-stack direction="inline" gap="base">
        <s-text>
          How was your shopping experience?
        </s-text>
        <s-link
          commandFor="survey-modal"
          command="--show"
        >
          Take a quick survey
        </s-link>
      </s-stack>
      <s-modal
        id="survey-modal"
        heading="Quick survey"
      >
        <s-text-area
          rows="4"
          label="How can we improve your experience?"
        />
        <s-button
          slot="primary-action"
          variant="primary"
          commandFor="survey-modal"
          command="--hide"
        >
          Submit
        </s-button>
        <s-button
          slot="secondary-actions"
          commandFor="survey-modal"
          command="--hide"
        >
          No thanks
        </s-button>
      </s-modal>
    </s-announcement>
  );
}

Description

Display a referral program offer as an announcement banner. This example reads the order confirmation to personalize the message for first-time buyers.

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;

  const message = isFirstOrder
    ? 'Welcome! Refer a friend and you both get 15% off.'
    : 'Share the love — refer a friend for 15% off.';

  return (
    <s-announcement>
      <s-stack direction="inline" gap="base">
        <s-text>{message}</s-text>
        <s-link href="https://example.com/referrals">
          Get your referral link
        </s-link>
      </s-stack>
    </s-announcement>
  );
}

Anchor to Best practicesBest practices

Prioritize the default state: The announcement is most effective when content is short enough to display entirely in its default state, with no need for expansion. Keep text concise and scannable, because buyers are focused on their order confirmation.
Handle content truncation: The announcement component has a strict maximum height. Content that exceeds the expanded state's height is cut off with no scrolling capability. Make sure your extension handles long content gracefully to prevent truncation.
Provide a modal alternative: If your extension needs to display more than a few lines of content, don't cram it into the announcement bar. Instead, use the bar as a teaser that links to a modal. This is the recommended pattern for displaying surveys, detailed offers, or other longer-form content.

Was this page helpful?

Announcement

Anchor to Use casesUse cases

Anchor to Announcement targetAnnouncement target

Anchor to Thank you announcement ,[object Object]Thank you announcement target

Supported components

Available APIs

Supported components

Available APIs

jsx

Anchor to Best practicesBest practices