Announcement Bar Setup Guide
This guide explains how to configure the Announcement Bar — a top-of-page banner that displays critical store-wide messages (promotions, free shipping, new launches, or important notices). It’s one of the most visible elements on your store, making it a powerful tool for driving conversions and communicating key information to customers.
All settings mentioned below can be found in:
Online Store → Themes → Customize → Header → Announcement bar
Adding Announcement Messages
The Announcement Bar supports multiple rotating messages, each with custom text and an optional URL link (for directing customers to promotions, product pages, or checkout).
Each announcement item includes two core fields:
- Text label: The message displayed to customers (e.g., "Free shipping on orders over $50" or "20% off summer collection")
- URL (optional): A link to a page (collection, product, or promotion) for customers to act on the message
Common use cases for announcement messages:
- Free shipping or delivery promotions
- Limited-time discount codes or sales
- New product launches or restocks
- Important store notices (holiday hours, shipping delays)
- Loyalty program or newsletter sign-up prompts
Technical Note: There is no hard limit to the number of announcement items you can add — but usability limits apply (see Section 2 below).
Recommended Number of Announcements
While the Announcement Bar allows unlimited messages, too many rotating items harm readability and conversion rates (customers skip or ignore cluttered banners).
- Recommended (best performance): 1–3 messages
- Maximum (not ideal): 4–5 messages
- Avoid entirely: More than 5 messages
Prioritize quality over quantity! If you have multiple promotions, rotate them over time (e.g., update the bar weekly) instead of displaying all at once — this ensures each message gets full visibility.
Fewer messages lead to faster comprehension, higher click-through rates, and less customer frustration. Focus on your highest-priority offer (e.g., free shipping) first.
Font Size
Setting: Font size (%) — controls the text size of the announcement bar text (relative to the theme’s default font size).
100% = theme default (recommended for most stores)- Increase to
110–120% for stronger emphasis (e.g., flash sales) - Decrease to
90% if text wraps to multiple lines on mobile screens
Avoid sizes over 120%! Oversized text looks unprofessional, takes up too much screen space (especially on mobile), and can overlap with header elements.
Background Color
Setting: Background color — defines the banner’s background hue (critical for visibility and brand alignment).
- Use a color that contrasts with your header (e.g., dark blue bar on white header) to make the bar stand out
- Stick to your brand’s primary/secondary colors (consistency builds recognition)
- Avoid low-contrast shades (e.g., light gray on white) — the bar will blend into the page and be ignored
Text Color
Setting: Text color — controls the color of the announcement message text (readability is non-negotiable).
- Ensure high contrast with the background color (e.g., white text on dark blue background)
- Use brand-compliant colors (e.g., your brand’s accent color for text)
- Test readability on both desktop and mobile (small screens amplify contrast issues)
Scroll Duration
Setting: Scroll duration (ms) — controls how fast rotating messages transition (only applies if you have multiple announcements).
- Lower value = faster scrolling (e.g., 2000 ms = 2 seconds per message)
- Higher value = slower scrolling (e.g., 4000 ms = 4 seconds per message)
Recommended durations:
- 2000–3000 ms: Standard (ideal for short messages, 1–5 words)
- 3000–4000 ms: Recommended for longer text (6+ words) to ensure readability
Disable scrolling entirely if you only have 1 message! Animation is unnecessary and can distract customers from your core message.
Custom CSS (Advanced)
Custom CSS applies styles only to the Announcement Bar section (use this for minor tweaks — prefer Theme Settings for global changes).
/* Adjust announcement bar heading size */ .announcement-bar h2 { font-size: 32px; } /* Add padding to announcement bar */ .announcement-bar { padding: 8px 16px; } /* Change link color */ .announcement-bar a { color: #ffffff; text-decoration: underline; }
Use Custom CSS sparingly. For global styling (e.g., font families, default colors), edit the Theme Settings instead — this ensures consistency across your entire store.
Best Practices
- Keep messages short and actionable (10 words max): e.g., "Free shipping on orders over $50 →" instead of "We offer free standard shipping on all orders totaling more than $50 USD"
- Use clear CTAs: Add an arrow (→) or "Shop Now" to guide clicks (e.g., "20% off sale → Shop Now")
- Test mobile responsiveness: Ensure text doesn’t wrap to 3+ lines or overlap with the header
- Update regularly: Refresh messages for holidays, sales, or new launches (stale messages hurt trust)
- A/B test: Try different colors/messages to see which drives the highest click-through rate
- Hide when unnecessary: Disable the bar if you have no critical messages (clutter-free design boosts user experience)
The Announcement Bar is your store’s "billboard" — use it wisely! Focus on clear, concise, and customer-centric messages to drive conversions and keep visitors informed without overwhelming them.
