Can we talk about the announcement bar for a minute?
It's that little strip right at the very top of a website. You've probably seen hundreds of them without even thinking about it... "Free delivery over £50!" or "Now booking for 2027!"
And it's one of my favourite little Squarespace features.
It sits above everything else on all of your webpages, so it's the first thing people see. It takes about five minutes to set up. And you can change it whenever you like, so it's perfect for anything time-sensitive.
So in this post I'm going to show you how to add one, give you some ideas of what to actually put on it, and show you how to change the font and colour so it matches the rest of your website.
How to add an announcement bar in Squarespace
First things first, the announcement bar is available on the Core and Plus plans. So if you're on the Basic plan, you won't see it I'm afraid!
Here's how to turn it on:
Log in and go to Website, then Pages.
Scroll right down to Marketing Tools and click Announcement Bar. (Little shortcut: you can also just type "announcement bar" into the search in your dashboard.)
Switch on the Enable Announcement Bar toggle.
Type your message. You can make words bold or italic, and add a link to part of the text.
Want the whole bar to be clickable? Click Attach Link and choose the page, file or web address you want it to go to.
Click Save.
And that's it, it'll now show at the top of every page on your website!
A couple of little things to know:
It shows on every page except cover pages, and you can't choose to show it on certain pages only.
Visitors can close it with the little X. If you update the message and save, it'll pop back up for everyone.
If you close it yourself while you're logged in, there's a Reset Visibility button at the bottom of the panel to bring it back.
What to actually put on your announcement bar
This is the bit people get stuck on! So here are some ideas to get you started.
Opening hours and closures
"We're closed 23rd December to 2nd January. Last orders 15th December!"
"Now open on Saturdays!"
Offers and launches
"Gift vouchers now available, the perfect Christmas present!"
"New autumn menu out now, take a look"
Bookings and availability
"Now booking weddings for 2027"
"Only 2 spaces left for January!"
Events
"Join me at my next website workshop, book your place here"
"Find us at the Christmas market this Saturday!"
Freebies and newsletters
"Grab my free guide to getting found on Google"
"Sign up to my newsletter for monthly tips"
A few little tips:
Keep it short. One sentence is plenty, especially on a phone screen.
Link it to something. If you're telling people about an offer, make it easy for them to click straight through to it.
Keep it up to date! An old offer still showing in March makes your website look a bit forgotten about.
Use it for one thing at a time. If everything's important, nothing stands out.
How to change the font and colour of your announcement bar
There aren't any style options in the announcement bar panel itself. Instead, it all happens in your Site Styles (the little paintbrush icon).
Changing the font and size
Open Site Styles and click Fonts.
Click Assign Styles.
Under Announcement Bar, click Text.
Choose one of your font presets, or pick Custom to set your own font and size.
Click Save.
I'd usually keep it the same font as your body text, or a slightly smaller version of it. It should feel like part of your website, not something stuck on top!
Changing the colour
This is the slightly trickier one, because the announcement bar takes its colours from your colour themes. By default it matches your header. So you'll need to edit the colour theme your header uses.
Open Site Styles and click Colors.
Click the little pencil icon on the colour theme your header uses.
Scroll down to Announcement Bar.
Change the Background and Text colours.
Click Save.
Not sure which theme your header uses? Click Edit, hover over your header, click Edit Site Header, then Style. It'll tell you there.
One little thing to watch out for: if your header is transparent, the announcement bar matches the first section on each page instead. So it might look a bit different from page to page.
My top tip for colour? Pick one of your brand colours that contrasts with your header. You want it to stand out, but still look like it belongs. And make sure the text is easy to read!
Over to you!
So there you go, a little five-minute job that can make a big difference.
If you'd rather someone else sorted it (along with all those other website bits you keep meaning to get round to...), my Expert Day might be just what you need. It's 6 hours of me working on your existing Squarespace website. You can find out more here.
Are you going to add an announcement bar to your website? Let me know what you put on it!