Get the Most Out of Your Squarespace Announcement Bar
Have you ever wanted to grab your visitors’ attention as soon as they land on your site? The announcement bar is one of Squarespace’s most underutilized tools, but it’s a fantastic way to highlight important updates, promotions, or news. Whether you’re showcasing a new blog post, announcing a sale, or promoting a podcast, the announcement bar ensures your message stands out.
In this guide, I’ll show you how to enable, customize, and style the announcement bar on your Squarespace site.
Watch the video
Check out the YouTube video below. 👇🏼
Why Use the Announcement Bar?
The announcement bar is perfect for drawing attention to timely or critical information. You can use it to:
Promote sales or special offers.
Highlight new content, like blogs or podcasts.
Share event announcements or important updates.
Direct visitors to specific pages with a clickable link.
Step-by-Step Guide to Setting Up Your Announcement Bar
Step 1: Enable the Announcement Bar
Go to your Squarespace dashboard and navigate to Pages.
Scroll down to the bottom menu to find Website Tools.
Select Announcement Bar and toggle it on. If it’s not visible on your site, this is likely because it’s currently disabled.
Step 2: Add Your Message
Once the bar is enabled, type in your announcement text. This could be something like:
"New blog post: How to Style Your Squarespace Site!"
"20% Off All Products—This Weekend Only!"
If you’d like, add a link to the bar. For example, you can link it to a specific page, blog post, or external site. Be sure to toggle the option to open the link in a new tab to keep your website open.
Step 3: Style Your Announcement Bar
A visible, eye-catching announcement bar is crucial to ensuring visitors notice it. Here’s how to style it:
Open the Styles Panel: Click the Paintbrush Icon in the upper right hand corner of your screen or go to Website > Styles in the menu on the left side of the screen.
Select the Right Color Palette: Your announcement bar will use one of your site’s predefined color themes. Click on your color palette and scroll down to locate the Announcement Bar section.
Adjust Colors for Visibility: Choose a background color that contrasts with your site header. For example:
If your header is dark, use a bright or light-colored background for the announcement bar.
Ensure the text color contrasts with the background for easy readability. A red background with white text often works well.
Pro Tips for Maximizing the Announcement Bar
Keep It Short and Sweet: Your message should be concise and compelling to grab attention quickly.
Use Action-Oriented Text: Encourage visitors to take action with phrases like “Shop Now,” “Learn More,” or “Subscribe Today.”
Test for Mobile Responsiveness: Ensure the announcement bar looks great on both desktop and mobile views.
Wrapping Up
The announcement bar is a simple yet powerful tool to make sure your most important updates don’t get overlooked. By enabling and styling it properly, you can effectively draw attention to promotions, news, and more.
📨 Join my mailing list to get Squarespace tips & tricks right in your inbox
Your Designer
I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
