How to Edit and Style Your Squarespace Announcement Bar
Want to announce something important to your site visitors, like a sale, a promo code, or a change to your shop opening hours?
A Squarespace announcement bar is the perfect way to do this. This bar appears on every page of your site and is an eye-catching way to get visitors’ attention.
Plus, like the rest of your Squarespace site, it’s optimized for both desktop and mobile.
Want to get started with an announcement bar in Squarespace? I’ll show you how to add one, how to style it, and how you can use Spark Plugin to make your announcement bar really pop!
The Squarespace announcement bar: everything you need to know
How to add an announcement bar in Squarespace
Click Marketing in the Squarespace menu.
Next, click on Marketing Tools. In the full-screen menu that appears, choose Announcement Bar.
Click the drop-down menu and change Disable Announcement Bar to Enable Announcement Bar.
Click Save to finish.
To turn the announcement bar off, select Disable Announcement Bar.
Important note: The Squarespace announcement bar is only available on the Business and Commerce plans.
You also have to have the same style of announcement bar across your whole website, you can’t customize it on a page-by-page basis.
How to edit your Squarespace announcement bar
To edit your Squarespace announcement bar, follow the directions above (Marketing / Marketing Tools / Announcement Bar.)
You’ll have the option to change the announcement bar text.
You can also add a URL if you want your bar to be clickable.
Click the cog to open the link editor panel if you want to make additional changes to how your link looks and functions. For example, if you want your announcement bar to link to a phone number or email address instead.
Your announcement bar will match the general font and header theme color for your site.
(However, keep reading to learn how to change the color of the announcement bar on Squarespace.)
How to style your Squarespace announcement bar
How to change the color of the announcement bar on Squarespace
Go into edit mode on any page of your website. Choose Site Styles, the paintbrush icon at the far right-hand side of the page.
Click the Colors box and choose the theme that your site header uses.
If you’re not sure what theme this is, click out of the Site Styles section and click on your page header. Click Edit, go to Colors, and you’ll see a pencil next to the color theme that’s in use.
Scroll down until you get to the Announcement Bar section, and change the background and text color.
How to change the font of the announcement bar on Squarespace
Go into edit mode on any page of your website and choose Site Styles.
Click Fonts.
Choose Assign Styles, and under Announcement Bar, choose the font and text size you want to use.
(Not sure which font to choose? Here are some great ones to get you started!)
Bonus! Five awesome styles for your announcement bar using Spark Plugin
While you can change the font, bar color, and add a link using the standard Squarespace settings, there’s not much else you can do to customize your announcement bar.
Unless, of course, you use Spark Plugin!
As well as over 100 awesome customizations, you get access to some fantastic announcement bar tweaks.
For example, with the animated announcement bar customization, you can enhance your bar to draw the eye and encourage viewers to take in your message.
Choose from:
Scroll – watch your text smoothly move from left to right
Gradient – choose two colors and watch your announcement bar fade from one to another
Fade – see your text blink off and on, a surefire way to get people’s attention!
Jelly – watch your text bounce and jump around
Flip – check out your text as it flips horizontally
You can even combine these customizations to create an announcement bar that’s truly yours, for example, by pairing the gradient with the text animation of your choice.
Check out the brilliant customizations on offer and see why Spark Plugin is the perfect choice for your Squarespace site!
Top tips for creating a Squarespace announcement bar that stands out
An announcement bar is a brilliant way to share your latest news and encourage customers to convert.
Here are some of additional tips and tricks for getting the most out of your Squarespace announcement bar.
Make your message clear, simple, and engaging. Think about what you want visitors to do as soon as they view your announcement bar
Pick an announcement bar color that stands out from the rest of your site. Use the color wheel to pick a color on the opposite side of the wheel for maximum impact
Remember to keep your announcement bar accessible — ensure there’s adequate contrast between your background and text color
Implement the fear of missing out (FOMO) to encourage visitors to take action as soon as possible. For example, you can offer a discount code that only works for the first 50 users
Emojis are great for getting attention but use them carefully. Avoid using too many of them, and don’t use them as a substitute for words, just in case site visitors have emojis disabled
Pair your announcement bar with a site (or promotional) popup to ensure everyone on your website sees your message
Experiment with different messages, colors, and destination pages to see which your website visitors like best!
A Squarespace announcement bar is a fantastic addition to your website. Why not give it a try today?
