Shopify Announcement Bar vs Cart Drawer Message

Quick answer: A Shopify announcement bar is the site-wide strip (theme block or bar app). A cart drawer message lives inside the bag. Use the site-wide bar for one store-level fact. Use the in-cart line for this bag ("$12 away"). If both quote shipping, they must rhyme. Autocomplete is "sticky," "moving," "scrolling," "liquid code," and "announcement bar covering cart" — those are CSS bugs, not a reason to run three banners. The drawer must sit above a sticky bar.

Header: "Free shipping over $50." Drawer: "Free shipping over $75." Checkout: $62 shipping. Three truths. Zero trust.

That is the whole article. The rest is how to pick the surface and not break mobile. Last checked August 20, 2026.

Three Surfaces People Confuse

A rewards progress bar is not an announcement. It is a live meter. You can have a one-line announcement and a rewards bar in the same drawer. Two different jobs. If both say "free shipping," they still rhyme.

How to Add an Announcement Bar in Shopify (Native, Free)

Dawn, Horizon, and nearly every Online Store 2.0 theme ship one. No app, no Liquid:

1. Online Store → Themes → Customize.
2. In the header group, select the Announcement bar section (Dawn has it by default; other OS 2.0 themes may call it "Announcements").
3. Add announcement blocks — one announcement bar section per theme, with up to 12 rotating blocks in it (Dawn's section schema caps max_blocks at 12; Shopify's help docs say the same). Each block gets text, an optional link, and a color scheme.
4. Save. Preview on mobile before publishing.

Because the section lives in the header group, it renders on every template by default. To drop it from a specific page type (say, checkout-adjacent policy pages), open that template in the editor and hide the section with the eye icon — the hide is per-template, which is also why "my bar disappeared" is often just a hide set on the template you happen to be viewing.

What the native bar cannot do: scheduling (it shows until you manually remove it), countdown timers, geo or page targeting, and live cart math ("$12 away"). If you need any of those, that is the line between the theme block and a bar app — Hextom's Quick Announcement Bar is the ranking app for scheduled/rotating/countdown bars; Oxify's free bar covers the same site-wide job. Pick one. And note twelve blocks is a capacity, not a goal — see the ceiling below.

Geo and Page Targeting

Two targeting jobs the theme block cannot do:

• Geo: "Free US shipping over $60" shown to a Berlin visitor is an anti-ad. If you sell in multiple markets, either keep the bar market-neutral or use an app that targets by country and quotes the market's threshold.
• Page: a shipping-threshold bar earns its pixel on collection and product pages, where the add-to-cart decision happens. A "sale ends tonight" bar on the returns-policy page is noise. Target by template when your app allows it.

The Rhyme Rule

Write the number once. Reuse it.

• Header: "Free shipping over $60"
• Drawer announcement: "You're $12 away from free shipping" on a $48 cart — math that matches $60
• Rewards rung 1: $60
• Shipping policy page: $60

If Markets change the threshold by country, the bar must follow Markets. A US $60 line on a /fr cart that ships free at 80 € is the same bug in another language. Pair with multi-currency and multi-language drawers.

We call it the rhyme rule because mismatched banners teach banner blindness. That is experience from installs, not a Baymard chapter title.

When to Use Which (Intent)

Use site-wide when:

• People who never add to cart still need the fact (store closed Sunday, duty notice, sale ends tonight)
• You want the shipping threshold visible on collection pages so they add a second item before the drawer

Banner blindness is real. The top strip is the most-ignored pixel row on the web — visitors have been trained by two decades of banners to skip it. A cart drawer message does not have that problem: the shopper just opened the drawer on purpose, the message sits next to their own items, and it can quote their own gap. For free-shipping messaging specifically, the drawer progress bar is where the money is — setup in the free shipping bar guide. Keep the header bar as the first announcement of the threshold; let the drawer do the persuading.

Use in-cart when:

• The sentence needs the current bag ("$12 away," "this item is final sale")
• You do not want the homepage looking like an airport departure board
• The message would be creepy or noisy on every page (personal gap, gift wrap)

Use both when: the site-wide line is the campaign, the in-cart line is the remaining gap. Same campaign. Two lengths.

Use neither extra bar when: the theme header already says it, and the rewards bar already says it. A third "FREE SHIPPING!!!" is not SEO. It is a tax on attention.

z-Index: The Bar Must Not Eat the Cart

Sticky announcement bars often use a huge z-index so they sit on top of the header. Then the cart drawer opens under the bar. Shoppers cannot tap Checkout. Shopify Community has years of this: "banner covers drawer cart."

Rule: cart drawer (and its overlay) above the announcement bar. If you pasted z-index: 99999 on the bar, that is the bug. Lower the bar or raise the drawer. Test mobile Safari. Test sticky bar + sticky header + drawer together.

Second bug: some themes size the drawer with --announcement-height. If you turn the bar from sticky to static (or hide it on a template), the drawer can leave a gap at the bottom. If the bag does not fill the screen after you restyle the bar, check that variable.

This is not an "exploit." It is CSS stacking. Fix it in theme custom CSS or by using a bar app that already plays with drawers. Do not stack a third-party bar on top of the theme bar "to be safe."

Timers, Motion, and Trust

Google's people-first / helpful-content guidance puts trust at the center of E-E-A-T. A looping 15:00 countdown that resets on refresh is a lie. Quality raters and shoppers both notice.

Inside the drawer, Oxify gives the announcement three types — Default, Carousel, and Moving Line — three heights (Slim, Normal, Thick), and a {{TIMER}} placeholder for a countdown in minutes. The honest setting is the last one: what happens when the timer ends. "Hide Announcement Bar" is the option that keeps the message true; a timer that resets on refresh is the one that gets screenshotted.

• Real deadline: sale ends at a timestamp. Clock hits zero. Bar goes away or changes copy.
• Fake urgency: skip it. Especially next to a terms checkbox or a warranty toggle. You cannot look like a casino and a contract on the same screen.

Keep the site-wide bar to one line on mobile. Two rotating messages is the ceiling. Five rotating messages is a news ticker. People came to buy a shirt.

We do not quote unsourced "8–15% conversion lifts" from popup vendors. If your bar has a job, you will see it in add-to-cart and in the rewards / upsell scorecard, not in a round number from someone else's deck.

How to Set It Up

1. Pick one site-wide sentence. Put it in the theme bar or in Oxify's free announcement bar, not both.
2. In the cart app, add an in-cart line only if it adds information (gap, cutoff, SKU warning).
3. Match numbers to reward rungs and to Shopify shipping settings.
4. Open the drawer on mobile. Confirm the bar does not cover Checkout. Fix z-index if it does.
5. Preview a second language. English header + Spanish drawer is still a clash.

Sticky, Moving, and "Covering the Cart"

Theme questions that rank: announcement bar size, font, custom CSS, liquid, sticky, moving/scrolling.

• Sticky: stays on scroll. Useful. Also the #1 cause of the bar covering the cart drawer. Lower the bar's z-index or raise the drawer's.
• Moving / scrolling: one extra message is fine. A ticker of five sales is noise. If you need motion, use the free Oxify announcement bar, not a second theme hack plus an app.
• Liquid / custom CSS: fine for a one-line theme bar. Do not paste a high z-index "to be safe."

Announcement Bar Not Showing? Check These Five

1. Section removed or hidden. In the theme editor, the Announcement bar section can be hidden (eye icon) per template. Check the template you are viewing, not just the homepage.
2. No blocks. The section renders nothing when every announcement block was deleted. Add one back.
3. Wrong theme. You edited a draft theme, not the published one. Check the theme name in the editor header.
4. App embed off. If the bar comes from an app, its embed toggle lives in Theme settings → App embeds. Installing the app is not enough; the embed must be on.
5. CSS collision. A custom display: none, a header app, or a popup layer can hide it. Test in an incognito window with other app embeds toggled off one at a time.

How This Compares to Ranking Bar Posts

Theme tutorials explain the Dawn header block. Bar-app listicles explain sliders and countdowns. Cart-drawer apps mention "announcement in the cart" as a feature bullet.

They rarely say:

• These are two products / two surfaces
• The numbers must match
• z-index will steal your checkout button
• Fake timers are a trust hit under current Google quality guidance

UpCart and Rebuy both ship in-cart announcements. Fine. The decision is still rhyme + stack order, not which logo is on the widget.

Frequently Asked Questions

What to Do Next

One sentence site-wide. One optional in-cart line that rhymes. Drawer above the bar. Real timer or no timer.

Theme block too weak? Use the free Oxify announcement bar (site-wide only). Gap copy and rewards belong in Oxify Cart Drawer & Upsells — that is the paid cart app, from $9.99/mo. Do not run the free bar plus the theme bar plus another slider.