The Squarespace announcement bar is switched on in the Announcement Bar panel (in the Home menu under Marketing, or type “announcement” into the Home menu search): turn on Enable Announcement Bar, type the message, attach a link if you want the whole bar clickable, and save. It appears above the header on every page except cover pages, and it needs a Core, Plus or Advanced plan. Styling lives somewhere else, in Site Styles, which is why most people can turn it on but cannot change its colour, and showing it on one page only takes a line of CSS. All three are below, with the wording that actually gets clicks.
How do you add an announcement bar on Squarespace?
- Open the Home menu and click Marketing, then Announcement Bar. If your account shows a different layout, use the search box at the top of the Home menu.
- Switch on Enable Announcement Bar.
- Type the text. You can bold or italicise words and add a text link inside the message.
- To make the whole bar a link, click Attach Link and choose a page, a file, an external URL or an email address.
- Click Save.
Squarespace’s own guide covers the same steps for the mobile app (More, Pages, Marketing tools, Announcement Bar). Visitors can close the bar with the X in the corner; if you close it yourself while logged in, a Reset Visibility button appears at the bottom of the panel to bring it back so you can keep testing.
How do you change the announcement bar colour and font?
This is the part the panel does not do. On version 7.1 the bar borrows its colours from the header’s colour theme, and its font from your site-wide fonts, so you change it through Site Styles:
| To change | Where | Steps |
|---|---|---|
| Font and size | Site Styles, Fonts | Open a page, click the paintbrush, then Fonts, then Assign Styles. Under Announcement Bar, click Text and pick a preset or Custom. |
| Background and text colour | Site Styles, Colors | Click the pencil on the colour theme your header uses. Under Announcement Bar, adjust Background and Text. |
| Version 7.0 | Site Styles | Scroll to the Announcement Bar tweaks: background colour, text colour and font are all there. |
One catch on 7.1: when the header is transparent, the bar follows the theme of the section below it, and when the header is hidden it follows the site’s default theme. If your bar is the “wrong” colour on one page, that is why; edit the theme that page’s first section uses.
How do you show the announcement bar on only one page?
Squarespace has no setting for this; the bar is site-wide. The workaround is CSS that hides it everywhere except the page you choose. Find the page’s collection ID (right-click the page, Inspect, and look for id="collection-... on the body tag, or use the free Squarespace ID Finder extension), then paste this into Design, Custom CSS:
/* hide the announcement bar everywhere */
.sqs-announcement-bar-dropzone { display: none; }
/* show it on one page only */
body#collection-YOUR-ID .sqs-announcement-bar-dropzone { display: block; }Swap the selectors to hide it on one page instead. The same block of CSS can also give the bar a gradient background or turn its link into a button, which is where the Squarespace CSS snippets in my tips post pick up.
What should the announcement bar say?
One sentence, one action, under about 60 characters so it does not wrap into two lines on a phone. The bar is the first thing a visitor reads, and it is also the easiest thing to ignore once it has been there for months, so change it when the message changes and turn it off when there is nothing to say. Messages that earn their space:
- Availability: “Now booking 2027 weddings: 6 dates left in June” (photographers, planners)
- An offer with an end: “Free shipping on orders over $75 until Sunday”
- Something new: “New: the 2026 pricing guide is out” linking to the guide
- A practical notice: “Closed 24 to 28 December; orders ship 29 December”
- Social proof: “As featured in Junebug Weddings” linking to the feature
What it should not say: “Welcome to our website”, anything that never changes, or a second navigation menu. Vague bars train visitors to close them.
Announcement bar or a popup?
The bar is polite and permanent: it does not interrupt, it stays visible, and it costs nothing in page speed. A popup interrupts and converts better for email sign-ups, at the price of annoying some visitors and being hidden by Google’s rules on intrusive interstitials on mobile. Use the bar for notices and offers with a link, the popup only for a sign-up with a real incentive, and never both saying the same thing. Squarespace’s promotional popup lives under the same Marketing menu.
Why is the announcement bar not showing?
| Symptom | Cause | Fix |
|---|---|---|
| Not visible to you | You closed it while logged in | Announcement Bar panel, click Reset Visibility |
| Not visible to a visitor | They closed it earlier; the browser remembers | Nothing to fix; it returns for everyone the next time you edit and save the bar |
| Enabled but blank | Text field empty or only a link attached | Type the message, save |
| Wrong colour on one page | Transparent or hidden header uses that page’s section theme | Edit that colour theme in Site Styles, or set the header to a solid style |
| No Announcement Bar panel at all | Site is on the Basic plan; the bar needs Core, Plus or Advanced | Upgrade, or use a text block at the top of the page |
| Hidden on all pages | Custom CSS from an old designer | Search Custom CSS for “announcement” and remove or adjust the rule |
If you are setting up the bar as part of a launch, it is one of the last items in the Squarespace SEO and launch checklist and something I switch on for every Squarespace website design client with a current offer or booking window.
Frequently asked questions
In the Home menu under Marketing, then Announcement Bar. Switch on Enable Announcement Bar, add your text and an optional link, and save. On the mobile app it is under More, Pages, Marketing tools.
On 7.1, open Site Styles, click Colors, then the pencil on the colour theme your header uses, and adjust the Announcement Bar background and text. Fonts are under Site Styles, Fonts, Assign Styles.
Not with a built-in setting. Add CSS in Design, Custom CSS that hides .sqs-announcement-bar-dropzone site-wide and shows it again for one page using that page’s collection ID.
If you closed it with the X while logged in, use Reset Visibility in the Announcement Bar panel. If a visitor closed it, their browser remembers until you edit and save the bar again.
Yes. In the Announcement Bar panel click Attach Link and choose a page, external URL, file or email. You can also add text links inside the message instead.
No. It is a small block of text that loads with the page; unlike a popup it needs no extra script.
