--- 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-04 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/announcement md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/announcement.md --- # 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/latest/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/latest/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-04/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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-04/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-04/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-04/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-04/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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-04/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-04/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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-04/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-04/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-04/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\** 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\** 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\** 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): 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 Enjoy a free plant on us! 🌿 We'd love to hear from you. Fill out the survey ``` ### 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/latest/web-components/typography-and-content/text) for the discount code so the main message stands out. ## html ```html Exclusive for members: Use code RETURN15 for 15% off your next order. ``` ### Collect post-order feedback Use an announcement as a teaser that opens a [modal](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/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/latest/web-components/actions/link) that triggers a feedback survey. ## html ```html How was your recent order? Share feedback We'd love to hear how your recent order went. Submit feedback ``` *** ## 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. ***