--- title: Announcement description: >- Surfaces short, non-blocking messages at checkout for promotions, shipping updates, and lightweight prompts. api_version: 2026-07-rc source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/announcement md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/announcement.md api_name: checkout-ui-extensions --- # Announcement The announcement component surfaces short, high-visibility messages at checkout without blocking the flow. Use announcement for promotions, shipping updates, and lightweight prompts that keep buyers moving. Announcements support links, optional dismissal, and can trigger a [modal](https://shopify.dev/docs/api/checkout-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/checkout-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 (1) ### Supported targets * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/announcement#thank-you-announcement-) #### Use cases * **Promotional offers**: Highlight limited-time discounts, coupon codes, or free shipping thresholds to drive conversions. * **Loyalty program nudges**: Inform returning buyers about membership perks or points available during checkout. * **Feedback collection**: Prompt buyers to complete a quick survey using a teaser that links to a modal form. ### 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 & TData): 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. Learn more about [using methods](https://shopify.dev/docs/api/polaris/using-polaris-web-components#methods). * **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 buyers to fill out a survey. ## Display a promotional announcement ![A rendered example of the announcement component](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 ``` ### Display a message with a link to open a modal Use an announcement as a teaser that opens a modal for longer-form content. This example displays a short prompt with an `s-link` that triggers a survey modal. ## html ```html Enjoy a free plant on us! 🌿 We'd love to hear from you. Fill out the survey ``` ### Display an announcement with plain text Keep the body to a single `s-text` element. This example places one `s-text` inside `s-announcement` without stacks or other layout wrappers. ## html ```html Free shipping on orders over $50, and you qualify! ``` *** ## Best practices * **Keep copy short**: Fit the message in a single short line whenever possible so buyers 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. ***