--- title: UX for the announcement bar description: >- UX guidelines to follow to ensure high-quality announcements in Thank you and customer account pages. source_url: html: >- https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar md: >- https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md --- ExpandOn this page * [Introduction](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#introduction) * [Features](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#features) * [When to use announcement bars](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#when-to-use-announcement-bars) * [Example use cases](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#example-use-cases) * [Design guidelines](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#design-guidelines) * [Content guidelines](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#content-guidelines) * [Best practices](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#best-practices) * [Next steps](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#next-steps) # UX for the announcement bar This guide introduces UX guidelines for announcements in **Thank you** and **customer account** page customizations. *** ## Introduction The announcement bar is a designated, prominent area on **Thank You** and **customer account** pages, designed to communicate essential and actionable information without blocking content on the page. The component is intentionally designed to be non-intrusive, making use of a different color scheme to capture attention while maintaining a balanced, clean page layout. This guide describes UX guidelines and best practices for implementing an announcement bar. *** ## Features The announcement bar component appears at the top of the page. It supports three states, determined by the length of its content: #### Default state All content is visible when it fits within the bar’s default height. ![An announcement bar showing all content fitting inside its default height.](https://shopify.dev/assets/assets/images/apps/checkout/thank-you-order-status/ux-for-announcement-bar/announcement-bar-01-D27S39sP.png) #### Collapsed state Not all content is shown. This occurs when the content exceeds the default state maximum height. Buyers must click or tap on the announcement bar to reveal more of the content. ![An announcement bar showing content exceeding the maximum height.](https://shopify.dev/assets/assets/images/apps/checkout/thank-you-order-status/ux-for-announcement-bar/announcement-bar-02-CVV67-20.png) #### Expanded state The rest of the content is shown. ![An announcement bar showing succinct content that won't get cut off.](https://shopify.dev/assets/assets/images/apps/checkout/thank-you-order-status/ux-for-announcement-bar/announcement-bar-succinct-content-BL8UI1gg.gif) *** ## When to use announcement bars The announcement bar is specifically for content that needs to capture a buyer's immediate attention. If content is not intended to be attention-grabbing, it should be placed inline using other available extension targets on the page. This allows less critical content to display within specific, less prominent areas without disrupting the buyer's primary focus. The announcement bar is available on the following buyer-facing pages: * The **Thank you** page, which is displayed immediately after a purchase. * The **customer account** pages, including the Order Index, Order Status, and Profile pages. *** ## Example use cases Apps using the announcement bar should provide merchants with the ability to create content for the following purposes: * **Post-checkout upsells or cross-sells:** Presenting related products or offers that complement a recent purchase. * **Referral programs:** Promoting referral programs and providing a direct link for buyer participation. * **Exclusive offers & promotions:** Delivering special, limited-time offers to a buyer. * **Buyer surveys & feedback:** Gathering feedback on the shopping experience. * **Information & education:** Sharing details about loyalty programs, upcoming events, or other news that directly benefits the buyer. * **Profile enrichment or loyalty program enrollment:** Collect important buyer information to offer personalized experiences *** ## Design guidelines The announcement bar has strict height restrictions to maintain page integrity. * Collapsed state's height restriction shows only about two and a half lines of text on mobile * Expanded state's height restriction is two-thirds of mobile height, and one-third of desktop height Content Truncation Risk Any content that exceeds the expanded state's maximum height will be cut off, with no option to scroll to view the truncated portion. Extensions should only use the announcement bar as a **concise teaser**. Consider using a `Modal` for long content to ensure it won't be truncated. **Using a `Modal` to show long content** ![An announcement bar opening a modal to show long content.](https://shopify.dev/assets/assets/images/apps/checkout/thank-you-order-status/ux-for-announcement-bar/announcement-bar-using-modals-DL2e9p2E.gif) **Content that's too long** ![An announcement bar showing long content that is being cut off in the expanded state.](https://shopify.dev/assets/assets/images/apps/checkout/thank-you-order-status/ux-for-announcement-bar/announcement-bar-content-too-long-B60HNmfn.gif) *** ## Content guidelines Announcement bar content should adhere to these principles: * **Succinctness:** The content must be brief, direct, and immediately understandable to the buyer. * **Value:** Every message should provide a clear benefit or be genuinely useful to the buyer, whether it's through information, an offer, or an opportunity to act. * **Clarity:** The message's purpose must be immediately obvious. If it requires a buyer action, that action must be clear, simple, and visible. *** ## Best practices These best practices will ensure your announcement bar delivers a great experience for merchants and their customers: * **Prioritize conciseness:** The best user experience is the default state, where all content is visible at a glance. Provide merchant-facing controls that encourage them to keep content short and focused on this state. * **Provide a modal option:** Build an easy-to-use method for merchants to create a concise announcement bar that links to a modal for displaying longer content, such as a full survey or offer details. * **Test on different devices:** Advise merchants to test their content on both mobile and desktop devices. * **Enable content refresh:** Design apps to allow merchants to easily update or replace the content to prevent "banner blindness" and keep messages relevant. *** ## Next steps * Explore [UX guidelines](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-thank-you-order-status) for Thank you and Order status pages - Explore [UX guidelines](https://shopify.dev/docs/apps/build/checkout/ux-for-checkout) for the entire checkout experience. * For practical guidance on how to design a user interface for the Shopify admin, refer to Shopify's [App Design Guidelines](https://shopify.dev/docs/apps/design-guidelines). * Get familiar with Polaris [accessibility](https://polaris.shopify.com/foundations/accessibility) and [content](https://polaris.shopify.com/content/merchant-to-customer) guidelines. *** * [Introduction](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#introduction) * [Features](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#features) * [When to use announcement bars](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#when-to-use-announcement-bars) * [Example use cases](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#example-use-cases) * [Design guidelines](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#design-guidelines) * [Content guidelines](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#content-guidelines) * [Best practices](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#best-practices) * [Next steps](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/ux-for-announcement-bar.md#next-steps)