How to Add an Announcement Bar to Your Website

Think of it as one sentence and one link in a thin strip above the header. Squarespace has a native Announcement Bar panel; on Wix you add a strip or text box at the top of the header; on WordPress you edit the header template part; in HTML it is a short block placed before the header.

Good and weak announcement bar copy
WeakBetter
Welcome to our website!Free delivery on orders over $50 until Sunday
Check out our new productsNew: winter menu served from 5 pm. See dishes
Important noticeClosed Dec 24 to 26. Online orders ship Dec 27

Updated

An announcement bar is the least intrusive way to tell every visitor something time-sensitive: a sale, holiday hours, a shipping delay, a new location. Because it does not cover content, it is also the pattern Google's interstitial guidance recommends over full-screen promotions.

Add an announcement bar on We.Inc, WordPress, Wix, Squarespace or plain HTML

We.Inc

  1. Type the exact message and link into the AI chat, for example 'add a thin bar above the header saying Closed Monday for the holiday, linking to the hours page'.
  2. Say whether it should have a close button and stay put while scrolling.
  3. Preview it at phone width to check it fits on one line.
  4. Publish; ask the AI to remove it when the date passes.

There is no announcement bar add-on; the AI chat edits your site to add it, which uses credits on a paid plan.

WordPress

  1. Go to Appearance > Editor and open the Header template part.
  2. Insert a Group block above the existing header row.
  3. Add a Paragraph block with your message and link, and set the group's background colour.
  4. Save the template part.

These steps are for block themes. Classic themes need a plugin or the theme's own top-bar setting.

Wix

  1. In the Editor, select the header and make room at its top.
  2. Add a strip or text element with your message across the full width.
  3. Link the text using the Link icon if needed.
  4. Check the mobile editor, where header elements may need rearranging.

Wix has no dedicated announcement bar setting in the help pages we checked, so this is built from ordinary header elements.

Squarespace

  1. Open the Announcement Bar panel.
  2. Switch on the Enable Announcement Bar toggle.
  3. Type your message, formatting or linking words as needed, or use Attach Link to make the whole bar clickable.
  4. Save, then style its colours in Site styles.

The announcement bar is available on the Core, Plus and Advanced plans.

Plain HTML

  1. Add the snippet below as the first thing inside <body>.
  2. Style it with a background colour and centred text.
  3. Hide it with a stored flag once the visitor closes it.

A dismissible bar in plain HTML

Bar with a close button

Change the stored key whenever you publish a new message, otherwise visitors who closed the last one will never see it.

<div id="notice" role="region" aria-label="Announcement" style="background:#111;color:#fff;text-align:center;padding:8px 40px;position:relative">
  Free delivery over $50 until Sunday. <a href="/shop" style="color:#fff">Shop now</a>
  <button aria-label="Close announcement" style="position:absolute;right:8px;top:4px;background:none;border:0;color:#fff;font-size:20px" onclick="this.parentElement.remove();localStorage.setItem('noticeClosed','1')">×</button>
</div>
<script>if (localStorage.getItem("noticeClosed")) document.getElementById("notice").remove();</script>

Sources

Every announcement bar source here was checked on October 28, 2026.

  • Squarespace help on adding an announcement bar: https://support.squarespace.com/hc/en-us/articles/205815318-Add-an-announcement-bar
  • Google Search Central recommending small banners over interstitials: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials

Where it sits in the layout

The bar should be the first element inside the body, before the header, so screen readers reach it early and it does not overlap anything. Mark it as a region with a short label if it contains links.

If you pair it with a sticky header, test the scrolled state carefully; our sticky header guide covers the CSS involved.

How it works

  1. Write the message in under about 80 characters so it fits on one line on phones.
  2. Add an optional link to the page with details.
  3. Place the bar above the main header so it pushes content down instead of covering it.
  4. Add a close button if the message will stay up for weeks.
  5. Remove it when the offer ends; an expired sale bar looks neglected.

Tips

  • Use enough contrast between text and background to pass WCAG AA (4.5:1 for normal text).
  • If your header is sticky, decide whether the bar sticks too. Two stacked sticky bars eat a lot of phone screen.
  • On Squarespace, 'Reset Visibility' only resets the bar for you while logged in; to show it again to visitors who closed it, edit and save the bar.
  • Do not rotate several messages automatically. Moving text is hard to read and can fail accessibility checks unless it can be paused.

Frequently asked questions

Can I show the Squarespace announcement bar on only one page?

No. Squarespace shows it on every page except cover pages, with no option to limit it to particular pages. For a single page, use a section or banner block on that page instead.

Should the announcement bar be dismissible?

For anything that stays up more than a few days, yes. Remember the choice with a cookie or local storage so it stays closed on the next page.

Does an announcement bar affect SEO?

A small bar does not hide content, which is what Google's guidance on interstitials is concerned with. Keep it short so it does not push your main heading far down on phones.

Related: Sticky headers, Add a popup, Call to action examples, Accessible colour palette generator.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Guides

Product

Who It's For

Features

Resources

Company

View Sitemap