How to Add a Squarespace Announcement Bar: Step-by-Step
Are you a Squarespace website owner seeking how to draw attention to a new development on their site?
If that’s the case, it might be time for you to consider adding an announcement bar.
An announcement bar is a great way to ensure your website visitors know any current or upcoming events, deals, and other important information. And best of all, it’s relatively easy to add and style with Squarespace.
In this post, I’ll guide you through creating and customising a Squarespace announcement bar. My name is Sam, and I’m a competent Squarespace website designer. Contact me today if you need a compelling website featuring a professional-looking announcement bar in no time.
Now, let’s get started!
Why Add/Use a Squarespace Announcement Bar?
Adding an announcement bar to your website is one of the quickest and easiest ways to ensure visitors know your latest news, promotions and updates. This can help you build trust with customers, provide new ways for them to engage with your business, and let them know about any timely offers.
Plus, Squarespace’s intuitive design layout makes it easy to customise your announcement bar’s look and feel. You can choose from various font styles, add links to the content, style the text in bold or italics — you name it! In essence, you can create an announcement explicitly tailored to match your website design.
The announcement bar appears at the top of every page on your website, ensuring anyone who visits always sees it. And if you keep your site updated regularly with fresh content, you can ensure visitors always have something new to discover.
Tip: You may also include a minimal search bar on your Squarespace website to help users easily navigate your site content.
What Do You Put On an Announcement Bar?
Your content on an announcement bar largely depends on your business goals and what you want to communicate to your customers.
Here are some examples of what you can put on an announcement bar:
1. Promotions
If you have an ongoing promotion, such as a sale or discount, you can use the announcement bar feature to promote it.
For example:
“Get 20% off on all products this weekend.”
“Free shipping on all orders over $50.”
2. New Products/Services
If you’ve recently added a new product or service to your store, you can use the announcement bar to showcase it.
For example:
“New Arrival: Introducing our latest collection.”
“Check out our new line of organic skincare products.”
3. Company News
If you have important news to share with your customers, such as a change in business hours or a new store opening, you can use the announcement bar to communicate it.
For example:
“Our new store is now open in Liverpool.”
“We’ll be closed on Memorial Day.”
4. Call-To-Actions (CTAs)
You can use the announcement bar to encourage customers to take a specific action, such as signing up for your newsletter or following you on social media.
For example:
“Join our newsletter for exclusive discounts.”
“Follow us on Instagram for daily inspiration.”
5. Urgent Messages
If you have a pressing message, such as a shipping delay or a website outage, you can use the announcement bar to alert customers.
For example:
“We’re experiencing technical difficulties; please bear with us.”
“Due to unexpected weather conditions, shipping may be delayed.”
How to Use an Announcement Bar on Squarespace in Three Steps
Adding an announcement bar to your Squarespace website is relatively easy to do. However, remember that this feature is only available on the Business and Commerce plans. This guide outlines how to upgrade your Squarespace subscription.
Here’s how to add an announcement bar on Squarespace in three simple steps:
Step #1:
Open the Announcement Bar panel on your computer by navigating to “Marketing” >>> “Announcement Bar” from your website dashboard.
Step #2:
Once you’ve selected the “Enable Announcement Bar” option from the drop-down menu, you can enter the text for your announcement bar in the provided field. You can customise the text by making it bold, italicised, or adding links to relevant pages or content.
Step #3:
To make the announcement bar clickable, enter a web address in the “Clickthrough URL” field or click the “Gear” icon to set up other links.
And that’s about it!
Alternatively, you can access the “Announcement Bar” panel on the Squarespace mobile app by tapping the “Settings” icon and selecting “Site Settings.”
Under “Marketing”, you’ll find the “Announcement Bar” option. You can turn it on by tapping the “Show” toggle and customising the text in the provided field.
It’s worth noting that while the announcement bar is a helpful tool, it should be used sparingly to avoid overwhelming visitors with too much information.
Tip: If you’re a DIY website designer that likes to try out creative stuff, consider checking out my Squarespace website design toolkit.
How to Style the Squarespace Announcement Bar for Maximum Visibility: A Six-Step Guide
You can customise an announcement bar on Squarespace to match your website’s overall style by following the below steps:
Open the page where you want to style the announcement bar and click “Edit.”
Click “Site Styles” (the brush icon) on the screen’s left side, and select “Fonts.”
Under “Global Text Styles,” click on “Assign Styles.”
Under “Announcement Bar,” select “Text.”
Select a preset style and size, or choose “Custom” to customise the font style and size.
Click on “Save.”
If you’re feeling adventurous, you can check out this guide on how to get two different text sizes on the same line in Squarespace.
Six Tips for Styling the Squarespace Announcement Bar
When customising your announcement bar on Squarespace, you want to ensure it’s visible and stands out. That way, visitors to your site won’t miss your important message.
Here are six helpful tips on how to achieve maximum announcement bar visibility:
Choose a bold colour.
Use simple typography.
Create balance.
Use it wisely.
Test it out.
Don’t forget mobile optimisation.
#1. Choose a bold colour.
The announcement bar should have a bold background against the page’s other elements. Consider using a bright and contrasting colour that will draw attention, such as bright pink or yellow. However, ensuring that your chosen colour is consistent with your brand and website design is essential.
#2. Use simple typography.
Regarding typography, choose legible fonts and set them at a relatively large font size. This will ensure that your visitors easily read and quickly understand your message. Also, try to keep things simple by using just one font for the entire announcement bar.
Tip: This guide outlines how to upload custom fonts to Squarespace.
#3. Create balance.
While you want the announcement bar to be eye-catching, you also want to ensure it doesn’t overwhelm the page by taking up too much space. To create balance, add padding around all edges of the announcement bar to help it fit more naturally into the page layout.
#4. Use it wisely.
The announcement bar should only be used for important information you want visitors to see. Avoid using it for just anything, or it’ll lose its impact. In essence, be strategic about what you display in the announcement bar, and update it regularly.
#5. Test it out.
Once you’ve styled the announcement bar, preview it on different devices to ensure it looks good on all ends. Test it on desktops, laptops, tablets, and mobile devices to ensure it’s easily visible and legible on all screen sizes.
#6. Don’t forget mobile optimisation.
As more and more people browse the internet on their mobile devices, ensuring that your announcement bar looks good and functions well on smaller viewports is vital. Test it on different mobile screen sizes to ensure it’s easy to read and interact with.
How to Add Links to Squarespace Announcement Bar in Three Steps
Adding a Squarespace announcement bar button or link can help you drive traffic to important pages on your website, promote special offers or events, and increase engagement with your audience.
In this section, I’ll guide you through how to add links to a Squarespace announcement bar in three simple steps.
Open the announcement bar editor.
Add a link.
Preview and save.
Step #1: Open the announcement bar editor.
Log in to your Squarespace account dashboard and navigate to “Marketing” >>> “Announcement Bar.” This is where you can always edit your Squarespace announcement bar.
Step #2: Add a link.
Once you’ve opened the announcement bar editor, you can bold or underline the texts according to your preferences.
Highlight a text and click the “Link button” in the pop-up options to add a URL to the announcement bar. This will open a window where you can enter the page URL or file you want to link to.
Step #3: Preview and save.
Once you’ve added the link and customised its appearance, preview the announcement bar to ensure it looks and works as intended. If everything looks good, save the changes to publish the announcement bar to your website.
6 Tips for Crafting the Perfect Squarespace Announcement Bar Message for Your Customers
So you’ve added your announcement bar—what next? The message is just as important as styling it. After all, it’s the message that your customers will read! Here are some tips to help you craft the perfect message for customers:
Keep it short and sweet.
Include a compelling call-to-action (CTA).
Only add relevant content.
Use attention-grabbing language.
Use key phrases to highlight urgency.
Don’t forget to test and refine.
#1. Keep it short and sweet.
The message displayed in your announcement bar should be short and to the point. Avoid lengthy paragraphs or too many details. You should aim to grab your customers’ attention with a clear and concise message. Keep it between 3 and 4 sentences, and use simple language that’s easy to understand.
This is because customers are more likely to skim through longer messages. If your message is too long, customers may lose interest and not even engage with your content. By keeping it short and sweet, you can communicate your message effectively and encourage customers to take action.
#2. Include a compelling call-to-action (CTA).
Your announcement bar message should have a strong call-to-action (CTA) that drives customers to take action. The CTA is the part of the message that tells customers what you want them to do. It should be clear, specific, and compelling.
For example, if you’re promoting a new product, your CTA might be “Shop Now” or “Learn More.” If you’re offering a discount, your CTA might be “Get 20% Off Today” or “Claim Your Discount Now.”
Whatever your CTA is, it should be action-oriented and encourage customers to take the next step. It’s also a means to reinforce your Squarespace header button CTA.
#3. Only add relevant content.
The content displayed in your Squarespace announcement bar should be relevant to your customers. This means understanding your audience and tailoring your message to their interests and needs. If promoting a new product or service, highlight its features and benefits; if you’re running a promotion, clarify the terms and conditions.
Relevance is essential because it shows customers you understand their needs and provides valuable information. One way to ensure this is to include relevant keywords in your announcement bar message — this Squarespace SEO plugin can help you with high-ranking keywords tailored to your niche. If your message isn’t relevant to your customers, chances are they won’t even engage with your content or take action.
#4. Use attention-grabbing language.
Your announcement bar message should use catchy language that stands out. This means using bold, compelling language that attracts readers. Use power words/phrases like “Exclusive,” “Limited Time,” “New Arrival,” or “Last Chance” to create a sense of urgency.
By using attention-grabbing language, you can capture customers’ attention and encourage them to take action. However, be careful not to overdo it. Too much hype or exaggeration can come across as insincere and turn customers away.
#5. Use key phrases to highlight urgency.
If your announcement bar message is time-sensitive, it’s essential to highlight the urgency. This means emphasising a limited time to take advantage of your offer or promotion. Use phrases like "Ends Soon" or "Limited Time Offer" to create a sense of urgency and encourage customers to act quickly.
By highlighting the urgency, you can create a sense of FOMO (Fear Of Missing Out) and motivate customers to take action before it’s too late.
#6. Don’t forget to test and refine.
Once you’ve created your announcement bar message, it’s essential to test and refine it. This means monitoring your open and click-through rates (CTR) to see how customers engage with your content. If your message isn’t getting the desired results, adjust and try again.
It’s important to understand that testing and refining is an ongoing process. You should experiment with different messages and CTAs to find what works best for your audience and improve your overall engagement rate.
Frequently Asked Questions on Squarespace Announcement Bar
What is an announcement bar on Squarespace?
The Squarespace announcement bar is a feature that appears as a thin bar above your website’s navigation. It’s a great way to display important updates, promotions, or other announcements to your website visitors.
How do I get the announcement bar on Squarespace?
You need a Business or Commerce plan to get an announcement bar on Squarespace. Once you’ve purchased any of these plans, navigate to “Marketing” >>> “Announcement Bar” and enable the feature. You can then input your desired text and add an optional clickable link as CTA.
Wrapping It Up
Squarespace announcement bars enable you to convey crucial information to your visitors and drive them to take action. You can use the announcement bar to notify visitors about a new sale or highlight an upcoming event.
So far, I’ve explicitly explained how you can add an announcement bar to your Squarespace website and customise it to your liking. However, if you’re still feeling left out or simply want more for your website in terms of design, feel free to book a call with me to help you with your Squarespace website designs. Check out my Squarespace website design portfolio for a glimpse of what you’re signing up for.
📩 Join the inner circle to get exclusive code updates
Your designer
I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.