How to Add, Style and Use the Squarespace Announcement Bar

Do you need a way to promote something or make a statement on your Squarespace website, but think that a pop-up is just a little too “in-your-face”?

There are ways to make pop-ups less annoying and better for SEO, but how about using an announcement bar instead?

---

What is the Squarespace Announcement Bar?

The announcement bar is a simple rectangle or strip at the top of a web page. It’s usually done in an accent colour to catch visitors’ attention. On it you can add a short message and a link.

You’ve probably seen them around the internet (maybe even on this website). They look something like this:

---

How to add the Squarespace Announcement Bar to Your Website (Squarespace 7.1)

To use the announcement bar you need to be on the Squarespace Business plan or higher.

To add the announcement bar to your site:

1. From the Main Menu click Marketing

2. Choose Marketing Tools then click on Announcement Bar

3. Click the arrow (˅ ) next to Disable Announcement Bar and choose Enable Announcement Bar

4. Write your message and click Save

You can add a link in your message or make the whole bar clickable by adding a link in the Clickthrough URL area below the message area.

---

Style the Announcement Bar on Squarespace 7.1

When you add a Promotional Pop-Up in Squarespace you can write your message and style it in the same place. Unfortunately, they didn’t give the Announcement Bar the same setup, so you need to use your Site Styles instead.

Change the Font of the Announcement Bar

Changing the font style for the announcement bar is pretty straightforward.

1. Click on the Paintbrush icon to access your Site Styles

2. Choose Fonts

3. Scroll down and click on Assign Styles

4. Click on Announcement Bar

5. Change the Font and/or Size of the Font

6. Click Save

Change the Colour of the Announcement Bar

And now we’ve come to the reason why I think the styling for the announcement bar shouldn’t be in the Site Styles, but in the announcement bar section instead: changing the colour of the announcement bar. I find this a little more complicated than it should be.

To change the announcement bar colour (or text colour) in Site Styles you need to know which colour theme you want to edit. In Squarespace 7.1 every section has one of 10 different colour themes. Within the colour themes you can choose the colours for fonts, the section background and more.

The announcement bar belongs to the header or main navigation section, so we first have to find the colour theme for that section.

1. Click Edit

2. Hover over the header and click Edit Site Header

3. In the menu click Style

 There are 4 possible styles for your site header: Theme, Gradient, Solid and Dynamic.

If the style for your announcement bar is Theme:

You’ll see a pencil next to your chosen colour theme. You can now click on that theme and the Site Style options for that theme will appear on the right. Scroll down to find the Announcement Bar. Change the background and/or text colour and save.

If the style for your announcement bar is Solid or Gradient:

Before you can edit your announcement bar you will need to choose a theme.

1. Click on the dropdown with your chosen style and choose Theme

2. Click on one of the colour themes to choose (it will now have the pencil icon)

3. Take note of which theme it is (you will need that in a moment)

4. Click on the dropdown with and return to your chosen style

5. Save

Now you can edit your styles

1. Click on the Paintbrush icon to access your Site Styles

2. Choose Colors

3. Click on the theme you just chose

4. Scroll down to find Announcement Bar

5. Change the background and/or text colour and Save

If the style for your announcement bar is Dynamic:

If your header style is Dynamic, this means that the header becomes part of the first section of every page.  Exit the editor and go to Site Styles.

1. Click on the Paintbrush icon to access your Site Styles

2. Choose Colors

3. You will see the first section theme on your page

4. Choose that theme in the styles

5. Scroll down to find Announcement Bar

6. Change the background and/or text colour and Save

You may need to do this for several pages on your website as the announcement bar colour will change depending on the colour of the first section.

---

How to Use the Squarespace Announcement Bar

So what can do with your announcement bar?

Grow your Mailing List: Do you have a mailing list? The announcement bar is a way to encourage people to sign up by showing off your awesome freebie.

Use the Announcement Bar as a Vacation Notice: This is one of the ways that I like to use my announcement bar. I want people to know when I’ll be able to help them.

Display your Availability: If you are a service provider, the announcement bar provides a great way to let people know when you have room in your calendar for new clients.

Promote a New Product or Service: Get the news out about your latest product or service.

Announce a Discount Code, Sale or Limited Time Offer: This is a great way to give your visitors a reason to make a purchase now, instead of just thinking about it. Remember to add the discount code in the bar!

Share Important News: I know. I know. Make an announcement on an announcement bar – so obvious. But it has really been helpful in the chaos of the past few years.  I had quite a few clients who needed to add info to their sites during covid (safety protocols + opening). You can use it for happier news too!

---