Skip to main content

UX for the announcement bar

This guide introduces UX guidelines for announcements in Thank you and customer account page customizations.

Anchor to IntroductionIntroduction

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.

Anchor to FeaturesFeatures

The announcement bar component appears at the top of the page. It supports three states, determined by the length of its content:

All content is visible when it fits within the bar’s default height.

An announcement bar showing all content fitting inside its default height.

Anchor to When to use announcement barsWhen 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.

Anchor to Example use casesExample 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

Anchor to Design guidelinesDesign 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.

Content that's too long

An announcement bar showing long content that is being cut off in the expanded state.

Anchor to Content guidelinesContent 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.

Anchor to Best practicesBest 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.

Anchor to Next stepsNext steps

Was this page helpful?