How to Add an Announcement Bar to Squarespace (2 Ways)

Squarespace already has a built-in announcement bar, which is usually the fastest way to show an important message across your site.

You can use it for:

• Free shipping on orders over $75
• Summer Sale: Get 20% off this weekend
• September bookings are now open
• Early bird tickets end Friday

The setup takes only a few minutes and does not require any code.

But Squarespace’s built-in bar has one main limit: it appears across your site and cannot be controlled for individual pages.

If you need a different announcement for certain pages or visitors, you can use WiserNotify instead.

Here are both ways.

How to Add Built-in Announcement Bar in Squarespace

For a simple site-wide announcement, use Squarespace’s own feature.

Step 1: Open Announcement Bar

Log in to Squarespace and open your site.

Go to:

• Pages > Marketing Tools > Announcement Bar

Squarespace currently places the Announcement Bar under Marketing Tools in the Pages panel.

Step 2: Turn It On

Select:

• Enable Announcement Bar

This opens the message field.

Step 3: Add Your Message

Enter the message you want visitors to see.

For example:

• Free shipping on orders over $75

or:

• 20% off this weekend. Shop now

Keep it short so visitors can understand it quickly.

Squarespace also lets you make parts of the text bold or italic and add text links.

Step 4: Add a Link

If the announcement promotes a page, product, event, or offer, add a Clickthrough URL.

For example:

• New collection is live. Shop now
• can link directly to your collection page.
• Adding a Clickthrough URL makes the whole announcement bar clickable.

Step 5: Save

• Click Save.
• Your announcement bar is now live.

Squarespace displays it across your site except on cover pages.

That’s it.

For most simple announcements, you do not need anything else.

How to Add an Announcement Bar to Squarespace With WiserNotify

Squarespace’s built-in bar works well for one site-wide message. But if you want to show an announcement on specific pages or to specific visitors, WiserNotify gives you more control.

Here’s how to set it up.

Step 1: Copy the WiserNotify Pixel Code

Log in to your WiserNotify account.

Go to the Install Pixel page and click Copy Code.

You will add this code to your Squarespace site.

Step 2: Add the Pixel to Squarespace

Log in to Squarespace and open your website.

Go to:

Settings > Advanced > Code Injection

Paste the WiserNotify pixel code into the Header field.

Click Save.

You only need to add the pixel once.

Step 3: Publish Your Squarespace Site (Important)

After saving Code Injection:

Make sure your Squarespace site is published or updated live.

WiserNotify will not detect the pixel on an unpublished or preview-only setup.

Step 4: Verify the Pixel

Go back to the Install Pixel page in WiserNotify.

Click Verify Pixel Installation.

If the setup is correct, you should see:

Pixel Active

If it is not detected, open your live Squarespace site, refresh the page, and verify again.

Step 5: Create an Announcement Bar

In WiserNotify, go to:

Create Notification > Announcement Bar

Choose an announcement bar template.

Now add your message, such as:

Free shipping on orders over $75

or:

Summer Sale: 20% off through Sunday

You can also add a CTA like Shop Now, Book Now, or Learn More and link it to the right page.

Step 6: Customize the Design

Adjust the announcement bar to match your Squarespace site.

You can edit:

• Message
• Font
• Text and background colors
• CTA button
• Link
• Position
• Set Timing Rules

Use the preview to check how it looks.

Click Save and Next when done.

Step 7: Set Display Rules

Open the Display settings.

Choose where and who should see the announcement.

For example:

• All pages or specific pages
• New or returning visitors
• Location-based targeting
• Desktop or mobile only
• UTM-based targeting

For a simple announcement bar, keep it set to all pages + all visitors.

Click Next.

Step 8: Activate the Notification

Click Preview to test your announcement bar.

Then click Activate to make it live.

Without activation, the bar will not appear on your Squarespace site.

Step 9: Final Check on Live Site

Open your live Squarespace site in an incognito window.

Confirm:

• Announcement bar is visible
• CTA works correctly
• Design matches your site
• It appears on the correct pages

Best Places to Display an Announcement Bar

Squarespace includes a built-in announcement bar that sits above the main header at the top of your site.

This prime placement makes it one of the first things visitors see when landing on your page. By default, it appears across all standard pages, but you can control where and how it shows up with some tweaks.

1. Display Across All Pages

This is the default behavior and works best when you want your message to reach everyone who visits your site. It’s ideal for:

• Site-wide promotions or discount codes
• Store policies or return updates
• Shipping notices, seasonal changes, or delivery delays
• Business-wide service changes or holiday hours

By displaying it across all pages, you maintain consistency and ensure that every visitor sees the same message, no matter where they land on your site.

2. Homepage Only

Sometimes, your most important message is best delivered on the homepage, where many visitors land first.

A homepage-only bar is perfect for:

• Welcoming new visitors
• Introducing a new collection or feature
• Highlighting an ongoing campaign or time-limited offer

How to show it only on the homepage:

• First, hide the bar globally using Custom CSS.
• Then, use inline CSS or a code block on the homepage to re-enable it.
• This keeps the rest of the pages clean and focused while giving your main page a strong callout.

3. Product or Landing Pages

When pushing a product launch or promoting a specific landing page, it’s smart to show an announcement bar only on that page. This keeps the user experience focused and relevant.

Use cases include:

• Flash sales for one product
• Special download or lead magnet promotion
• Event registration reminders

This keeps your CTA sharp and improves your click-through rate without adding distractions on unrelated pages.

4. Sticky Bar While Scrolling

To maximize visibility, keep your announcement bar fixed at the top as users scroll down the page. This is great for time-sensitive offers or messages you want visitors to always have in view.

Add this CSS to enable stickiness:

.sqs-announcement-bar-dropzone {
position: sticky;
top: 0;
z-index: 9999;
}

The sticky effect works well on product pages, blog posts, and long-form content where users may scroll more than once.

5. Timed or Scheduled Bars

While Squarespace doesn’t offer scheduling natively, you can use third-party tools or add custom JavaScript/CSS to display announcement bars at specific times or dates. This is helpful for:

• Launch countdowns
• Flash sales with a start/end time
• Event announcements that expire automatically

With tools like Zapier or by embedding custom HTML blocks with JavaScript, you can control when a message appears without needing to update your site manually every time.

Also see: 9 Killer announcement bar examples

Common Mistakes to Avoid When Using Announcement Bars

• Too much text: Keep the message short and easy to scan.
• Wrong link: Send visitors directly to the offer, product, or page mentioned.
• Pixel not verified: Always verify the WiserNotify pixel after adding it to Squarespace.
• Ignoring mobile: Check that the bar looks good and does not cover important content.
• Expired offers: Set an end date so old promotions do not stay live.

Conclusion

If your Squarespace announcement bar is already set up, you don’t need to start from scratch.

Just update the text, add a link if you want, and save your changes.

If you need more flexibility like showing different messages on different pages or targeting specific visitors, you can use WiserNotify through Squarespace Code Injection and manage everything from there.

Pick the option that fits how much control you want.