liquify.

How to add an announcement bar in Shopify

An announcement bar is the thin strip across the top of every page, the classic place for "Free shipping on orders over $50" or a sale countdown.

Almost every Shopify theme has one built in, so this is usually a two-minute job.

1. Use your theme's announcement bar

  1. Go to Online Store > Themes and click Customize.
  2. In the left sidebar, look at the header area at the top. In Dawn and most free themes there's an Announcement bar section there. If it's missing, click Add section in the header area and choose it.
  3. Add an Announcement block, type your message, and optionally add a link.
  4. Choose a color scheme so it stands out from your header, then save.

Want several messages that rotate? Many themes let you add more than one announcement block and will cycle through them.

2. Customize it beyond the settings

  1. In your Shopify admin, go to Online Store > Themes. On your theme, click the ... menu and choose Duplicate, so you have a backup. Then on the theme you're editing, open the ... menu and choose Edit code.
  2. Open the announcement bar section (often sections/announcement-bar.liquid) to change its markup, for example adding an icon or a countdown.
  3. Add styles in the section's own stylesheet or your theme's main CSS file for things the settings don't cover, like custom fonts or a gradient.

3. Or ask Liquify in one sentence

Liquify is an AI theme editor for Shopify. Type the change in plain words and it edits your theme for you, on a draft copy, with a live preview. Nothing changes on your store until you publish.

“Add an announcement bar at the top saying free shipping on orders over $50”

Try it free on a sample store

Free plan, no credit card. Connect a real store whenever you're ready.

Questions

Can the announcement bar show different messages on different pages?

Not with the default settings in most themes, since it's shared across the store. It takes a small code change to show a message only on certain pages.

How do I make the announcement bar stick when scrolling?

Some themes have a sticky header setting that includes it. Otherwise it's a CSS change to the header area.

More guides