---
title: Announcement
description: >-
  The announcement component surfaces short, high-visibility messages without
  blocking the customer experience. Use announcement for promotions, loyalty
  updates, and lightweight prompts.
api_version: 2026-07
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/announcement
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/announcement.md
api_name: customer-account-ui-extensions
---

# Announcement

The announcement component surfaces short, high-visibility messages without blocking the customer experience. Use announcement for promotions, loyalty updates, and lightweight prompts that keep customers engaged.

Announcements support links, optional dismissal, and can contain a [modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/overlays/modal) for longer-form content. For persistent status messages or error alerts, use [banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/banner) instead.

The announcement bar enforces a strict maximum height. Content beyond that height is truncated and can't scroll. Layout and content are controlled entirely through child elements.

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Promotional offers**: Highlight limited-time discounts, coupon codes, or free shipping thresholds to encourage repeat purchases.
* **Loyalty program nudges**: Inform customers about membership perks, points earned, or rewards available in their account.
* **Feedback collection**: Prompt customers to complete a quick survey using a teaser that links to a modal form.
* **Subscription reminders**: Alert customers about upcoming renewals, billing changes, or opportunities to upgrade their plan.

***

## Events

The announcement component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).

* **aftertoggle**

  **CallbackEventListener\<typeof tagName, ToggleArgumentsEvent>**

  A callback that fires when the element state changes, after any toggle animations have finished.

  * If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.
  * If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.

  Learn more about [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).

* **dismiss**

  **CallbackEventListener\<typeof tagName>**

  A callback that fires when the announcement is dismissed by the user clicking the close button or by calling the `dismiss()` method programmatically.

* **toggle**

  **CallbackEventListener\<typeof tagName, ToggleArgumentsEvent>**

  A callback that fires immediately when the element state changes, before any animations.

  * If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.
  * If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.

  Learn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).

### CallbackEventListener

A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag.

```ts
(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null
```

### CallbackEvent

An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

```ts
TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}
```

### ToggleArgumentsEvent

The event data provided to toggle-related callbacks. Contains the previous and next visibility states of the element.

* newState

  The visibility state of the element after the toggle occurred.

  ```ts
  ToggleState
  ```

* oldState

  The visibility state of the element before the toggle occurred.

  ```ts
  ToggleState
  ```

### ToggleState

The visibility state of a toggleable element. - \`open\`: The element is visible and showing its content. - \`closed\`: The element is hidden and its content is not visible.

```ts
'open' | 'closed'
```

***

## Methods

The announcement component exposes methods for programmatic control.

* **dismiss**

  **() => void**

  **required**

  Programmatically dismisses the announcement. This triggers the `dismiss` event callback.

***

## Examples

### Display a promotional announcement

Display a promotional announcement with a survey link. This example shows an `s-announcement` with inline text and a link inviting customers to fill out a survey.

## Display a promotional announcement

![A promotional announcement banner with a plant emoji, survey text, and a dismiss button.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/announcement-default-B1rfHVgA.png)

## html

```html
<s-announcement>
  Enjoy a free plant on us! 🌿 We'd love to hear from you. <s-link href="/survey">Fill out the survey</s-link>
</s-announcement>
```

### Promote a members-only offer

Display a personalized discount for signed-in customers. This example uses subdued [text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/typography-and-content/text) for the discount code so the main message stands out.

## html

```html
<s-announcement>
  <s-stack direction="inline" gap="small-100" align-items="center">
    <s-text>Exclusive for members:</s-text>
    <s-text color="subdued">Use code RETURN15 for 15% off your next order.</s-text>
  </s-stack>
</s-announcement>
```

### Collect post-order feedback

Use an announcement as a teaser that opens a [modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/overlays/modal) for longer-form content. This example pairs a prompt with a [link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/actions/link) that triggers a feedback survey.

## html

```html
<s-announcement>
  <s-stack direction="inline" gap="base">
    <s-text>How was your recent order?</s-text>
    <s-link commandFor="feedback-modal" command="--show">Share feedback</s-link>
  </s-stack>
  <s-modal id="feedback-modal" heading="Tell us about your experience">
    <s-stack gap="base">
      <s-text>We'd love to hear how your recent order went.</s-text>
      <s-text-area rows="4" label="What went well? What could we improve?"></s-text-area>
    </s-stack>
    <s-button slot="primary-action">Submit feedback</s-button>
  </s-modal>
</s-announcement>
```

***

## Best practices

* **Keep copy short**: Fit the message in a single short line whenever possible so customers see it at a glance without needing to expand.
* **Plan for truncation**: The component has a strict maximum height. Content that exceeds the expanded state's height is clipped with no scrolling. Validate your copy length before shipping.
* **Link to a modal for longer content**: If you need to display surveys, detailed offers, or other long-form content, use the announcement bar as a teaser that opens a modal rather than overfilling the bar.

***