Announcement bar

Display important site-wide messages at the top of your store

The Announcement bar is a classic Shopify section and a staple of nearly every online store. It’s designed to highlight important site-wide messages that you don’t want customers to miss.

Common use cases include:

  • Free shipping offers (for example, “Free shipping on orders over $XX”)

  • Promotions or sales announcements

  • Limited-time offers or important updates

Like all our sections, the Announcement bar is highly customizable. You can:

  • Add multiple messages that slide automatically

  • Display a single message (navigation arrows are hidden automatically when only one message is used)

  • Enhance the bar with dynamic elements such as an animated countdown timer

This flexibility allows you to keep your messaging clear, engaging, and perfectly aligned with your store’s marketing goals.

Announcement bar section settings

Configuration

As mentioned above, you can display multiple messages, each on its own slide, by adding blocks to the section using the plus (+) icon. If you prefer to show only one message and hide the previous/next arrows, simply remove all other blocks and keep a single one.

You can freely customize the section using the available settings. In addition to common options such as the color scheme, you’ll find several controls to fine-tune the appearance and behavior of the Announcement bar, including:

  • Font size for the message text

  • Option to make all text uppercase

  • Letter spacing adjustments

You’ll also find slider-related settings, such as:

Slider speed Controls how long the slide transition animation takes (in seconds). Higher values result in slower, smoother animations.

Autoplay Controls how often the slides change automatically (in seconds). Set this value to 0 to disable autoplay and allow slide changes only via the previous/next arrows.


Block settings

Each announcement message is added as its own block, and each block has individual settings, including:

  • The message text

  • An optional link

Block settings for the announcement bar

You can also enable the Countdown setting to display an animated countdown timer after the message text, as shown in the screenshot above. This is especially useful for limited-time offers or promotions.

  • Format: yyyy-mm-dd hh:mm

  • Example: 2026-01-01 00:00

  • Leave this field empty to disable the countdown

This setup gives you full control over both the content and behavior of your Announcement bar.

Last updated