An announcement bar is a narrow full-width strip displayed above the header on your Shopify store. It has one job: deliver your highest-priority message to every visitor, on every page, before anything else. No other placement in your store offers this combination of visibility, reach, and immediacy. It is the first thing most shoppers see when they land on your site and the last thing they see before they leave — making it one of the most valuable pieces of real estate in your store layout.

The most common and highest-ROI uses of an announcement bar: communicating a free shipping threshold (which reduces checkout abandonment), announcing an active sale or discount code, creating urgency with a deadline or countdown timer, building trust with a reviews badge or guarantee, and directing traffic to a specific collection or campaign page. The bar is a direct line from your business objective to the visitor's awareness — use it intentionally, not generically.

Most Shopify themes include a basic built-in announcement bar, but these are limited: static text only, no rotating messages, no countdown timers, and no CTA links. EA Announcement Bar extends this with rotating carousels, integrated countdown timers, CTA buttons, and page-specific targeting. This guide walks through the complete setup in seven steps.

Step 1: Install EA Announcement Bar

Go to the Shopify App Store and search for EA Announcement Bar, or navigate directly to apps.shopify.com/ea-announcement-bar-upsell. Click Add app, review the permissions, and click Install app.

After installation, you will land in the EA Announcement Bar dashboard. The bar is disabled by default. Before enabling it, disable any announcement bar currently running in your theme editor — running two announcement bars simultaneously will create a layout conflict and a poor user experience. Go to Online Store → Themes → Customize and disable the built-in announcement bar section before activating the app version.

💡 One bar at a time: Do not run EA Announcement Bar alongside your theme's built-in announcement bar. Turn off the native theme bar first, then enable the app. Having two bars stacked at the top of your page pushes your header down and worsens the mobile experience.

Step 2: Write Your Announcement Copy

Your announcement bar copy should answer one question for the visitor: "What do I get here that I should know about right now?" The bar is not a headline, a tagline, or a brand statement. It is a transactional communication about something that directly benefits the shopper today.

Copy formulas by goal:

  • Free shipping: "Free shipping on all orders over $[threshold]" — plain, direct, immediately useful.
  • Active sale: "[X]% off sitewide — use code [CODE] at checkout" — shows the benefit and removes ambiguity about how to claim it.
  • Urgency: "Sale ends [day/date] — [X]% off everything" — time + benefit together.
  • New arrivals: "Just dropped: [Collection Name] — shop the new collection" — creates curiosity, provides direction.
  • Trust signal: "Rated 4.9 stars by 2,400+ customers — free returns on all orders" — social proof + risk reversal.

Keep bar copy under 80 characters so it reads fully without truncation on mobile screens. Write the mobile version first, then expand if desktop width allows more.

Step 3: Choose Your Display Type

EA Announcement Bar supports three display modes:

  • Static: A single, fixed message that stays the same for all visitors. Best when you have one dominant message — a free shipping threshold or an active sitewide sale — that outranks everything else in importance. Do not rotate messages if one message is clearly most important.
  • Rotating carousel: Cycles through 2–5 messages automatically, pausing on each for a set duration (typically 4–6 seconds). Use this when you have multiple equally important messages: free shipping + active sale + trust signal. Set the rotation slow enough that visitors can read each message fully.
  • Countdown timer: The bar includes an inline countdown timer alongside the announcement text. Use this for time-limited promotions where the deadline is the most important element. This is EA Announcement Bar's most powerful configuration for promotional events.

Step 4: Add a CTA Link (Optional but Powerful)

A CTA link in the announcement bar turns a passive message into an active click. Making the entire bar or a specific "Shop Now" text clickable adds a navigation function on top of the awareness function.

When to add a CTA link:

  • When announcing a new collection: link to the collection page.
  • When promoting a sale on specific products: link to the on-sale collection or tagged collection.
  • When running a flash deal on one product: link directly to that product page.
  • When running a free shipping threshold message: no CTA needed — the bar's job is just to inform.

In the EA Announcement Bar editor, enter the destination URL in the Click URL field. You can make the whole bar clickable or style a specific "Shop Now" text as the link. For rotating carousels, set a different link for each rotating message.

Step 5: Style the Bar

The announcement bar sits above your header — it is the literal first visual impression of your store. Style it to feel like a deliberate brand choice, not an afterthought.

  • Background color: A strong brand color works well — the same primary color used in your ATC button or header. Avoid light gray or white, which blends into the header and makes the bar invisible.
  • Text color: Maximum contrast with the background. White text on dark/colored backgrounds is the most legible configuration.
  • Font size: 13–14px is the standard range. Smaller feels too subtle; larger can make the bar too tall and push page content down.
  • Bar height: 36–42px is the standard range. Taller bars take up mobile screen space; shorter bars may clip text.
  • Emoji/icons: A single relevant emoji at the start of the message increases visual scan speed. 🚚 for shipping, 🆕 for new arrivals, ⚡ for flash sales, 🌟 for reviews. Use one emoji maximum — more than one looks cluttered in a narrow bar.
  • Close button: Consider whether to allow visitors to dismiss the bar. Dismissible bars have slightly lower visibility over a session; non-dismissible bars may slightly increase bounce rate on mobile if they take up too much space. The default is dismissible.

Step 6: Set Display Rules

Control exactly where and when your announcement bar appears. The most common configurations:

  • All pages: The default setting. Use for sitewide messages like free shipping thresholds or store-wide sales.
  • Homepage only: For welcome messages or first-time visitor promotions that aren't relevant to someone deep in a collection browse.
  • Collection pages only: For category-specific sales ("30% off all shoes — today only").
  • Product pages: For product-specific urgency messages or restocking announcements.
  • Exclude checkout: Always exclude the checkout page from promotional bars. At checkout, you want nothing distracting the customer from completing their purchase. A promo bar at checkout can cause customers to leave checkout to look for a discount code they didn't need.
  • Date range: Set a start and end date for time-limited promotions. The bar activates automatically at the start date and deactivates at the end — no manual toggling required.

Step 7: Enable and Preview on Mobile

Click Save, then toggle the bar to Active. Open your storefront on your phone (not just a browser emulator) and verify:

  1. The bar appears at the top of the page, above the header navigation.
  2. The text is fully legible without truncation on a 375px-wide screen (iPhone SE width — the narrowest common modern screen).
  3. If you have a rotating carousel, the rotation is smooth and each message is readable before the next slides in.
  4. The countdown timer (if enabled) displays correctly with the time remaining.
  5. Tapping a CTA link navigates correctly to the destination page.
  6. The close/dismiss button works if you have one enabled.
  7. The bar does not overlap or clip the header navigation below it.

What to Announce: Best Messages by Goal

The single most common mistake with announcement bars is leaving the default "Welcome to our store" message or never updating the bar after the initial setup. Match your bar message to your current top business priority:

  • Increase AOV: Free shipping threshold. "Free shipping on orders over $50" is the highest-ROI announcement bar message for most stores — it works 24/7/365 and directly motivates cart additions.
  • Run a sale: Sale dates + discount magnitude + urgency. "Summer sale — 25% off sitewide until Sunday."
  • Build trust with new visitors: Social proof + guarantee. "Rated 4.8 stars by 3,100+ happy customers. Free returns, always."
  • Drive traffic to a new product: New arrival announcement with direct link. "New: [Product Name] — limited stock. Shop now →"
  • International visitors: Shipping information. "We ship to 40+ countries — free international shipping over $75."

10 Real Announcement Bar Messages You Can Copy

These messages are proven formats. Replace the bracketed items with your store's specific values:

  1. 🚚 Free shipping on all orders over $[X] — no code needed.
  2. ⚡ Flash sale — [X]% off everything until midnight. Use code [CODE].
  3. 🆕 New collection just dropped: [Collection Name] — shop now →
  4. 🌟 Over [X,000] 5-star reviews. Free returns on every order.
  5. 📅 Sale ends [Day, Date] — save [X]% before it's gone.
  6. 🎁 [Holiday] deals — free gift with orders over $[X].
  7. 🚚 Order by [time] for same-day dispatch — [timer] left.
  8. 🔒 Secure checkout — all orders backed by our [X]-day money-back guarantee.
  9. ✅ Buy 2, get 1 free — mix and match anything in the store.
  10. 👉 Subscribe & save [X]% — cancel anytime, no commitment.

Announcement Bar Message Types Comparison

Message Type Best Timing Primary Goal Avg. Click-Through
Free shipping threshold Always on Increase AOV Low (informational)
Sale + discount code During sale periods Increase conversions 2–5%
Urgency + countdown timer Last 24–48 hrs of sale Drive immediate purchase 4–8%
New arrival announcement First 2 weeks after launch Drive collection traffic 3–7%
Social proof / trust When no active sale Reduce bounce rate Low (awareness)
Shipping cutoff timer Daily until cutoff time Convert high-intent buyers 5–10%

Frequently Asked Questions

What should I put in my Shopify announcement bar?

Lead with your single most valuable customer-facing message: your free shipping threshold, an active sale, or a trust-building claim. Rotate between free shipping + sale + social proof if you have multiple important messages. Avoid generic text like "Welcome to our store" — every word in the bar should give the visitor a reason to buy.

Is a Shopify announcement bar free?

Yes. Most Shopify themes include a basic static announcement bar at no cost. EA Announcement Bar provides a free plan with rotating messages, CTA links, countdown timer integration, and custom styling — significantly more capable than the built-in theme version. Paid plans add scheduling, A/B testing, and per-page targeting.

Can I have multiple announcement bars?

You can run multiple rotating messages in a single bar using EA Announcement Bar's carousel mode. You can also set up separate bars for different pages — a homepage bar with a welcome offer, a collection bar with a category sale, and a cart bar with urgency messaging. Manage all of these through the app's display rules and separate bar configurations.

How do I add a countdown timer to my announcement bar?

In EA Announcement Bar, select "Countdown" as the bar type in the editor, enter your sale end date and time, and write the message that wraps around the timer (e.g., "Sale ends in [timer] — save 25%"). The countdown displays inline with your text and updates in real time. This is the most effective announcement bar configuration for time-limited promotions.

Should I use an announcement bar on all pages?

Show it on all pages for sitewide messages. Use page-specific display rules for promotions that only apply to certain collections or products. Always exclude the checkout page — a promotional announcement bar at checkout can distract customers from completing their purchase or prompt them to leave to search for a discount code they don't have.

How do I change the color of my Shopify announcement bar?

In EA Announcement Bar, go to the Design tab. Update the background color hex value, text color, and link/CTA color. Use your store's primary brand color for the background with high-contrast white or dark text. Preview on mobile before saving — some color combinations look fine on desktop but are hard to read on a bright outdoor phone screen.

Add an Announcement Bar to Your Shopify Store

Free to install. 5-minute setup. Put your most important message in front of every visitor — on every page.

Install EA Announcement Bar — Free

Related Guides