Squarespace announcement bars are a great feature to have on your website. If you’re not sure what they are, they are the thin bars that span the full width of a page at the very top of your website.

Here’s what mine looks like:

You can choose to enable the announcement bar for a set amount of time or always have it visible. And they serve many different purposes:

Announce limited spots left in your 1:1 services
Promote a sale in your shop
Draw attention to a freebie or lead magnet
Showcase a free upcoming webinar or livestream

Here are the quick and easy 3 step directions for adding an announcement bar inside Squarespace for both 7.0 and 7.1.

1. Go to Marketing - Announcement Bar

Refer to the photos below for guidance. You can find Marketing under the main panel of your website.

2. Insert the content

Inside the announcement bar settings, you need to do 3 things.

Click the dropdown to enable the announcement bar.

It will automatically be defaulted to disabled.

Write our your content and call to action

This area isn’t meant to be a paragraph — instead, make it short and sweet. You don’t want your announcement bar to go over 2 lines.

Include a statement and end with a call to action to click for more information or sign up, register, etc.

Note: The only style change you can control here is bolded or regular text.

Add the link

If you click on the gear icon next to the link, you’ll notice different options:

a web address (external pages or blog posts)
page (internal pages or blog categories/tags)
email
phone number
file (for PDFs)

For web address or page, you have the option to open the page in a new window when a site visitor clicks on it. It’s common for internal pages to open up in the same window and external links to open up in a different one.

Squarespace website designer - free guide and checklist (1).jpg

3. Style it to match your brand colors and fonts

Now we’re going to change the styling options for the announcement bar.

Squarespace 7.0

Go back to the main panel and go to Design - Site Styles.

Click on the announcement bar and you’ll see its options pop up.

Here, you can change:

bar background color

bar text color
bar font, weight, size, letter spacing, and text transformation (uppercase, lowercase)

Squarespace 7.1

You’ll notice that this newer version of Squarespace has slightly different styling settings. The color and font settings are separated.

To change the font:

Click Design
Click Fonts
Click the gear icon in the top one (might say custom if you made a custom font pairing)
Click Advanced
Click Announcement bar text (default to paragraphs)
Use the dropdown menu to change the paragraph size or choose custom

Squarespace announcement bar design (1).png

Squarespace announcement bar fonts custom.png

Squarespace announcement bar advanced.png

Squarespace announcement bar fonts advanced settings.png

To change the colors:

Click Design
Click Colors
Click on the section that your header is using
Scroll down to announcement bar to change the text color and bar background color to match your branding