How to add an announcement bar on Squarespace

There are so many ways to promote your offerings on a website and one of the places that you can use on your Squarespace website is the announcement bar.

In this video, I teach you how to add an announcement bar on your Squarespace website and I'll also give you a bit of code at the end so you can keep it from being closed or dismissed by users.

My discount code to receive 10% off your first website:

PARTNER10 Use the Code HERE: http://bit.ly/get10offsquarespace

Sign up for a free trial HERE: http://bit.ly/freesquarespcetrial

What is the Squarespace Announcement Bar?

The Squarespace announcement bar is a bar located at the top of your website and is best used for short but sweet notes to your website users.

Much like a promotional pop-up, it features really prominently on your website and it’s a great way to get communicate things that are going on like promos, specials, or places you want to direct them to.

what-is-an-announcement-bar-squarespace.jpg

How to add an announcement bar on your Squarespace website 7.0

To get access to the announcement bar follow these steps;

In the back end of your website click on

  • Marketing > Announcement Bar> Enable Announcement Bar 

Once you Enable the Announcement Bar, you will see a preview of what it will look like show across the top of your site.

Enter your amazing offer, link it to the right place, and then hit Save

 
announcement bar squarespace.png
 

How to customise the announcement bar on Squarespace 7.0

To customise the announcement bar follow these steps;

In the back end of your website click on

  • Design> Site Styles> Click on your announcement bar on your website to select it

  • From here you can choose your colour and font

From here you can choose your background colour, text colour and font

customise announcement bar squarespace.png

How to customise the announcement bar on Squarespace 7.1

To customise the announcement bar font follow these steps;

In the back end of your website click on

  • Design > Fonts

  • Global Text Styles > Assign Styles

  • Under Announcement Bar > Text

  • Click Save

 
announcement bar 7.1 fonts.png
 

To customise the announcement bar colours follow these steps;

In the back end of your website click on

  • Design > Colours

  • Section Theme

  • Take note of what section theme you are using for your announcement bar, you can see what section you are using by looking at the announcement bar and matching it with the section theme name

  • Select the section theme

  • Scroll until you find the announcement bar colour settings

section themes.png
Screen Shot 2021-02-03 at 4.29.40 PM.png

Code to keep the announcement bar open

Squarespace allows users to close the announcement bar to hide your message but sometimes you want to keep it open.

Follow these steps to keep the announcement bar from being close.

  • Copy the code below> Paste the code in Design> Custom CSS

/* remove close button on announcement bar */
.sqs-announcement-bar-close { display: none !important }
 
keep the announcement bar from being closed squarespace.png
 

Let’s work together

Got an amazing business idea you need help bringing to life? Time to refresh your existing brand? Ready to get serious and connect with your customers with a stunning Squarespace site?


 

PIN ME!

 

Previous
Previous

How to create a FAQ Drop Down in Squarespace

Next
Next

How to Design Popping Pinterest Pins on Canva