Announcement Bar Section

Display promotional messages, shipping info, or important announcements at the top of your store.

Adding the Section

The announcement bar is typically in the Header group:

1. Open the theme editor
2. Click Announcement bar in the header group
3. Or add it as a new section

Adding Announcements

Single Announcement

1. Click Add block
2. Select Announcement
3. Enter your message text
4. Optional: Add a link

Multiple Announcements

Add multiple announcement blocks to create a rotating carousel:

• Announcements rotate automatically
• Customers can click arrows to navigate
• Each can have different text and links

Announcement Block Settings

Text

Enter your promotional message:

• Keep it short and impactful
• Include key information (discount codes, thresholds, etc.)

Examples:

• "Free shipping on orders over $50"
• "Use code SAVE20 for 20% off"
• "New arrivals just dropped"

Link

Optional URL when announcement is clicked:

• Link to sale collections
• Link to promotional pages
• Link to featured products

Icon

Add an optional icon before the text:

• Shipping truck for delivery messages
• Tag for sale announcements
• Star for featured items

Countdown Timer

Add urgency with a countdown block:

1. Click Add block
2. Select Countdown
3. Set the end date and time
4. Customize the message

Countdown displays days, hours, minutes, and seconds remaining.

Dismissible

Allow customers to hide the announcement:

1. Toggle Show close button
2. When clicked, announcement hides
3. Uses cookies to remember preference
4. Typically reappears after 7 days

Color Scheme

Style your announcement bar:

• Background color (often contrasting)
• Text color
• Link color

Common color choices:

• Dark background with light text
• Brand accent color
• Contrasting from main header

Layout Options

Height

Adjust the bar height for more or less prominence.

Text Size

• Small - Subtle announcement
• Medium - Standard (default)
• Large - Maximum visibility

Carousel Settings

When using multiple announcements:

Auto-rotate

Announcements cycle automatically at set intervals.

Navigation

Arrow buttons appear on hover for manual navigation.

Best Practices

Content

• One clear message per announcement
• Include actionable information
• Use urgency when appropriate ("Limited time!")

Length

• Keep under 60 characters
• Must be readable at a glance
• Test on mobile screens

Priority

If using carousel, put most important announcement first.

Updates

• Rotate messages regularly
• Remove expired promotions promptly
• Keep content fresh and relevant

Use Cases

Free Shipping Threshold

"Free shipping on orders over $75"

Sale Promotion

"Summer Sale: Up to 40% off | Shop Now"

New Collection

"New Collection Now Live | Explore"

Holiday Timing

"Order by Dec 15 for Christmas delivery"

Countdown Sale

Countdown timer for flash sales or limited offers.

Mobile Experience

On mobile devices:

• Text may truncate if too long
• Carousel still functions with touch
• Close button remains accessible
• Consider shorter messages for mobile

Troubleshooting

Announcement Not Showing

• Check the section is enabled
• Verify blocks are added
• Ensure text is entered

Dismissed Bar Won't Return

• Clear browser cookies
• Announcement reappears after set period
• Check dismissal settings

Countdown Not Working

• Verify date format is correct
• Ensure date is in the future
• Check timezone settings