Announcement Bar Section

The announcement bar appears at the very top of your store, above the header. It's perfect for displaying important messages like promotions, shipping offers, or store updates.

Overview

The announcement bar is a thin banner that spans the full width of your store. You can add one or multiple announcements, and if you add multiple, they'll automatically rotate in a carousel.

Where to Use

The announcement bar is typically added to the Header Group section, which appears at the top of all pages. It's designed to be placed above the header.

Blocks

Announcement Block

What it does: Displays a single announcement message

Settings:

  • Message: The announcement text (e.g., "Free shipping on orders over $50")
  • Link Text: Optional text for a clickable link (e.g., "Shop Now", "Learn More")
  • Link URL: Optional URL the link should go to

Examples:

  • "Free shipping on orders over $50" with link to shipping policy
  • "New collection now available - Shop Now" with link to collection
  • "Holiday sale: 20% off everything" with link to sale page
  • "Store hours: Mon-Fri 9am-6pm" (no link needed)

Tips:

  • Keep messages short and impactful (one line is best)
  • Use clear, action-oriented language
  • Add a link when you want customers to take action

Settings

Carousel

Autoplay Speed

  • What it does: Controls how long each announcement displays before switching to the next
  • Range: 2-10 seconds
  • Default: 5 seconds
  • When it applies: Only when you have 2 or more announcements
  • Tip:
    • 3-5 seconds: Good for short messages
    • 5-7 seconds: Better for longer messages
    • Too fast (< 3s): Hard to read
    • Too slow (> 8s): Customers might miss it

Note: When you have multiple announcements, autoplay and loop are automatically enabled. You can't disable them.

Layout

Top Padding

  • Space above the announcement text
  • Range: 0-50px
  • Default: 12px
  • Tip: More padding creates more breathing room

Bottom Padding

  • Space below the announcement text
  • Range: 0-50px
  • Default: 12px
  • Tip: Adjust to balance spacing with header

Colors

Color Scheme

  • Select a color scheme for the announcement bar
  • Controls background color and text color
  • Leave empty to use default theme colors
  • Tip: Use a contrasting color to make it stand out

How It Works

Single Announcement

  • If you add only one announcement, it displays as static text
  • No carousel, no autoplay
  • Simple, always-visible message

Multiple Announcements

  • If you add 2 or more announcements, they automatically rotate
  • Uses a fade transition between announcements
  • Autoplay is always enabled (can't be turned off)
  • Loop is always enabled (cycles through all announcements)
  • Each announcement displays for the time set in "Autoplay Speed"

Common Use Cases

Promotions & Sales

  • "Summer Sale: 30% off everything - Shop Now"
  • "Black Friday: Up to 50% off - Limited Time"
  • "New Year Sale: Free shipping on all orders"

Shipping & Delivery

  • "Free shipping on orders over $50"
  • "Same-day delivery available in select areas"
  • "Order by 2pm for next-day delivery"

Store Updates

  • "New collection launching this Friday"
  • "Store hours: Mon-Fri 9am-6pm, Sat 10am-4pm"
  • "We're hiring! Join our team"

Trust Signals

  • "Secure checkout with 30-day returns"
  • "Rated 5 stars by 10,000+ customers"
  • "Free returns within 30 days"

Seasonal Messages

  • "Holiday shipping: Order by Dec 15 for delivery by Dec 24"
  • "Valentine's Day collection now available"
  • "Back to school sale: 25% off"

Tips & Best Practices

✅ Do's

  • Keep it short: One line, maximum 10-15 words
  • Be clear: Use simple, direct language
  • Add urgency: Use time-sensitive language when appropriate
  • Include a link: When you want customers to take action
  • Update regularly: Keep announcements current and relevant
  • Test multiple announcements: Rotate different messages to see what works
  • Use contrasting colors: Make sure text is readable against background

❌ Don'ts

  • Don't write novels: Long messages are hard to read
  • Don't use all caps: It looks unprofessional and is hard to read
  • Don't forget to update: Remove outdated promotions
  • Don't overcrowd: 2-3 announcements maximum is usually enough
  • Don't use tiny text: Ensure message is readable
  • Don't ignore mobile: Test how it looks on phones

Adding Announcements

Adding Your First Announcement

  1. In the theme editor, find the Announcement Bar section (usually in Header Group)
  2. Click Add block
  3. Choose Announcement
  4. Enter your message in the Message field
  5. (Optional) Add Link Text and Link URL
  6. Click Save

Adding Multiple Announcements

  1. Click Add block again
  2. Choose Announcement
  3. Enter a different message
  4. Repeat for additional announcements
  5. Announcements will automatically rotate

Editing an Announcement

  1. Click on the announcement block in the left sidebar
  2. Edit the message, link text, or link URL
  3. Changes appear instantly in the preview

Removing an Announcement

  1. Click on the announcement block
  2. Scroll to the bottom
  3. Click Remove block

Reordering Announcements

  1. Click on an announcement block
  2. Use the ⋮⋮ (six dots) icon to drag and drop
  3. Change the order announcements appear

Best Practices for Multiple Announcements

How Many?

  • 2-3 announcements: Ideal for most stores
  • 4+ announcements: Can be overwhelming, customers might miss messages

Message Length

  • Keep all announcements similar in length
  • If one is much longer, it might look unbalanced

Content Strategy

  • Mix different types: promotions, shipping, trust signals
  • Rotate seasonal messages
  • Update based on what's currently relevant

Timing

  • Set autoplay speed to 5-7 seconds for multiple announcements
  • Gives customers time to read each message
  • Not so long they get bored waiting

Color Scheme Tips

High Contrast

  • Use dark text on light background, or light text on dark background
  • Ensures readability

Brand Colors

  • Match your brand colors for consistency
  • Use accent colors to make it stand out

Seasonal Themes

  • Change colors for holidays (red/green for Christmas, etc.)
  • Keep it subtle and professional

Examples

Example 1: Simple Promotion

  • Message: "Free shipping on orders over $50"
  • Link Text: "Shop Now"
  • Link URL: Link to main collection
  • Color: Brand accent color
  • Result: Clear call-to-action with easy way to shop

Example 2: Multiple Announcements

  1. "New arrivals: Spring collection now available"
  2. "Free shipping on orders over $50"
  3. "Sign up for 10% off your first order"
  • Autoplay Speed: 5 seconds
  • Result: Rotates through different messages, keeping content fresh

Example 3: Store Information

  • Message: "Store hours: Mon-Fri 9am-6pm, Sat 10am-4pm"
  • No link (informational only)
  • Color: Subtle, professional
  • Result: Always-visible store information

Troubleshooting

Announcement Not Showing

  • Check: Make sure you've added at least one announcement block
  • Check: Verify the announcement bar section is enabled in Header Group

Carousel Not Rotating

  • Check: You need 2 or more announcements for carousel to work
  • Check: With only 1 announcement, it displays statically (this is normal)

Link Not Working

  • Check: Make sure both Link Text and Link URL are filled in
  • Check: Verify the URL is correct and starts with http:// or https://
  • Check: For internal links, use the format: /collections/collection-name or /pages/page-name

Text Not Readable

  • Check: Ensure good contrast between text and background colors
  • Check: Try a different color scheme
  • Check: Test on different devices and screen sizes

Too Fast/Slow Rotation

  • Adjust: Change "Autoplay Speed" setting
  • Tip: 5 seconds is usually a good balance

Related Sections

  • Header - Appears directly below the announcement bar
  • Store Info Bar - Another information bar option

Next Steps: