How to Create Effective Announcement Banners in Squarespace
A Squarespace announcement bar is one of the simplest ways to share important updates, highlight a promotion, or guide visitors to a specific page the second they land on your site.
Because it sits quietly at the very top of your page, it captures attention without disrupting the user experience or cluttering your design.
Here is a straightforward, step-by-step guide to enabling, styling, and writing an effective announcement bar in Squarespace—no custom coding required.
How to enable the announcement bar in Squarespace
Squarespace has tucked this setting away in the backend utilities menu. Follow these exact steps to turn it on:
Log into your Squarespace dashboard and open your website.
In the left-hand menu, click Website (or Pages).
Scroll down to the Utilities section and click Website Tools.
Click Announcement Bar.
Toggle the switch to Enable Announcement Bar.
Type your message into the text box and add a click-through URL if you want to link to a page.
How to style your Squarespace announcement bar
To make sure your banner aligns with the rest of your brand typography and color palette, you need to customize it within your Site Styles.
1. Changing the Fonts
Open the Site Styles menu (the paintbrush icon in the top right corner).
Click on Fonts, then scroll down and select Assign Styles.
Under the Announcement Bar section, click Text.
Choose your preferred font style, weight, and size, then click Save.
2. Changing the Colors
Open Site Styles and click on Colors.
Find the specific color theme your header is currently using and click the Pencil (Edit) icon.
Scroll down to the Announcement Bar section.
Customize both the Background color and the Text color to create a clean, high-contrast look.
Click Save.
Copywriting tips: How to write a high-converting banner
Because space is heavily limited—especially on mobile screens—your message needs to be brief and direct.
Stick to a strict word count: Aim for 5 to 10 words maximum. Anything longer will wrap onto multiple lines on mobile and ruin your header layout.
Be direct and action-oriented: Use clear action verbs like Shop the Collection, Book a Consultation, or Read the Journal.
Create gentle urgency: If you are running a limited-time offer, state exactly when it ends (e.g., "Free shipping ends Sunday").
Keep the link relevant: If your banner promises a specific discount or update, make sure the link takes the user directly to that exact landing page, not just your generic homepage.
Simple mistakes to avoid before you publish
Before you click save and go live, take two minutes to review the layout:
Check the mobile layout: Toggle the mobile preview button in Squarespace. Ensure the text isn’t cut off and that it doesn't push your actual website navigation too far down the screen.
Test the link: Open your site in an incognito window and click the banner to ensure the link actually works and opens correctly.
Don't overcomplicate it: Avoid using multiple emojis or all-caps text, which can look cluttered and lower the premium feel of your design.
By keeping your announcement bar minimal, clear, and highly focused, you can easily direct your traffic exactly where it needs to go next.