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>
    );
  }