How to add an announcement bar to your Squarespace website (& why you should)
Are you struggling to get those ever-important subscribers to your email list? Or perhaps you’ve created an awesome product that’s just not selling?
To you, it could be the best thing since sliced bread—a product or freebie that you’ve put hours into creating. But if your audience isn’t taking the bait, then something needs to change.
Drum roll please… the Announcement Bar!
It’s probably not the be-all-end-all to get your sales or sign-ups from zero to hero. But, if you can do it well, this Squarespace feature can get your promotions noticed. It’s a slick way to highlight the best parts of your offering and ensure your audience sees what’s right in front of them.
Plus, this promotional banner works with Squarespace versions 7.0 and 7.1, as well as every single template. So there’s no reason to not give it a go!
What is the Squarespace Announcement Bar?
You’ll find the Squarespace Announcement Bar at the top of the screen, often brightly colored to contrast from the rest of the page. It’s a thin banner, used to display a short amount of text and usually contains a link. It’s designed to get the visitors attention. For example, you may see an announcement bar like the example below that offers some sort of discount or sale message:
The main purpose of the announcement bar is to encourage your visitor to do something. It's prime real estate on your website, so it's likely that most visitors will notice it.
You could use it to promote and encourage sales, inform visitors of discounts or offers that might otherwise go unnoticed, link your newsletter sign up, or promote your free course, and tons of other things.
This feature appears on all pages of your site, which means you can only use one announcement at a time. However, your website visitors can exit the announcement bar, which gives them the freedom to interact or remove from view.
What To Promote On Your Website Announcement Bar
Let’s face it, promoting discount codes or opt-in freebies are the obvious choices when featuring an announcement bar on your Squarespace website.
Discount codes are useful when placed in the announcement bar, as they could help push the purchase over the line. When customers are on the fence, this is a brilliant way to increase conversions.
Opt-in Freebies are great to promote your email list. While you could use the announcement bar to directly promote your products, it might be more worthwhile in the longterm to aim for email subscribers. You probably already know why you absolutely NEED an email list, but having the focus of your announcement bar to convert website visitors into email subscribers can be beneficial because:
You’re not pushing the direct sale to visitors who accidentally land on the site, don’t have awareness of your brand, and are possible not ready to buy from you yet
Instead, you can collect these individuals to your email list, build your relationship and sell to them later
Email converts at 42% higher than social channels like Facebook. So once they’re on the list, you’re much more likely to get that sale!
You could also post and promote other things in your announcement bar like:
News updates
and even recruitment notices!
For example, FoodForLife is a UK-based company who have used the Announcement Bar feature to keep their customers updated with changes to their pre-planned activities. It is effective as it’s a very easy way to quickly inform customers:
Similarly, companies who are looking to bring on staff might choose to advertise this in a promotional banner/announcement bar on their website. “We’re Hiring!” plus a link to a web form or internal online application could really help spread the message about your opening.
Basically, whatever you want the most people to get their eyes on, is what you want to put in your announcement bar.
Creating Your Announcement Bar in Squarespace
Implementing the promotional banner is actually pretty easy, and luckily it’s the same whether you’re using Squarespace 7.0 or 7.1.
Just log into your site editor, then in the sidebar 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 your site.
Enter your chosen text and any formatting and links, then hit Save
Or, if you’re looking to make the whole bar linked (instead of just the text), enter an address to the Clickthrough URL field. In this field you can add a ton of different links like links to specific pages around your site, links to other websites, or even files to automatically download. If you click on the COG/GEAR Icon, this will open your Link Editor panel where you can choose your link and link settings.
When you’re done, hit Save in the top left corner.
Note: this will create a standard announcement bar with your chosen brand colors, fonts, and styles. To customize this, read the personalization instructions below. Just ensure you know which version of Squarespace your site runs on.
Styling Your Announcement Bar
Squarespace allows you to customize your site in all aspects, which is great for ensuring your branding is smooth across every page. But in the case of a promotional popup, you’ll likely want to go slightly off-brand to make your announcement bar stand out. Using these tips, you’ll be able to personalize the background color, text color and font styles at the very least.
In Squarespace 7.1
To change the announcement bar font
Go to your Home Menu > Design > Fonts
Under Global Text Styles > Assign Styles
Under Announcement Bar > Text
Either choose a preset style and size or hit Custom and edit this however you like. This will update the font styles in the announcement bar.
Click Save
To change the announcement bar colors
Design > Colors > Section Themes
You will need to know which theme you’re using for the header of your pages, as this theme will control the announcement bar. If you’re using multiple themes in your headers, you will need to do this process for each theme you’re using.
Click the Pencil Icon to edit
Under Announcement Bar > Background edit the colors however you like
Under Announcement Bar > Text edit the colors however you like
Click Save
In Squarespace 7.0
Go to your Home Menu > Design > Site Styles
Search or scroll down to Announcement Bar
Edit the feature you’d like to change
Hit Save
Examples of Great Promotional Banners
Example 1: Sprout Law
One of the best things about the promotional bar on this website is the fact that it stands out, while still being on-brand. Those who visit the website are immediately drawn to the top bar due to the color contrast, which in this case is promoting a freebie. With “FREE” being the first word on the page, the announcement bar is likely to truly hook in the reader.
Example 2: Fast Spring
The above announcement bar is a testimonial-style promotion, aiming to build trust with the audience to grow the authority of the business. This is effective as they focus on a very strong statistic, which would convert even the strongest skeptic. Not only that, but they are using this feature to promote a freebie in exchange for email collection.
Are you noticing a pattern?
Once this information is collected, the website visitor will be contacted via email so that the company can build a rapport. This creates a stronger environment for sale—an effective use of the announcement bar!
Example 3: NOVA SQUARESPACE TEMPLATE KIT
Again, this one’s promoting a freebie—but we had to throw one of our own designs in because it’s super cute! We used bright the accent color around the template sparingly, so when it came to the announcement bar it was a perfect color and contrast to catch the attention of visitors.
Announcement Bar vs Other Promotional Pop-Ups
When you log into your Squarespace account, you’ll see plenty of options for promoting your content, including:
A promotional pop-up message
Sale labels in your shop
Form Blocks for newsletter sign-ups or opt-ins
So, why choose the announcement bar over other Squarespace promotional features?
It’s quite simple: where pop-ups convert at approximately 3%, announcement bars tower over this at a rate of 20% more.
The announcement bar is a much more subtle method of promotion, which is likely to lead to a lower exit rate or bounce rate when compared to messages which pop-up to block the screen.
Although these larger promotional features can be effective, there are several reasons why I prefer to use the announcement bar. This is because they:
Prevent other actions from occurring before you click away from the pop-up, which can be frustrating for the user’s experience
Take up a large proportion of the screen, blocking the view of what the user intended on viewing
Can harm your SEO if you do not set the timing to 45 seconds (or later) after the visitor lands on your site
The announcement bar is also more user-friendly for the mobile experience, whereas a pop-up or welcome mat might easily frustrate users.
There you have it, your very own announcement bar! Super simple, right?
Whether you use this to promote your freebies, discounts, or something else altogether, make sure you track metrics such as conversions and bounce rate to figure out exactly what a difference it makes. If it’s not working as well as you’d hoped? Maybe try out one of the other promotional methods Squarespace offers!
Want more? Check out some of our favorite tips below!
The 5 must-haves on your sales page
Creating an "as featured in" Logo Bar on Squarespace
How to add a chatbox to your Squarespace site (for free!)
How to add a drop down menu in Squarespace
How to add a pop-up in Squarespace
If you liked this post, Pin it to Pinterest! 👇🏻
