Squarespace Announcement Bar: Setup and Styling

Want a clean, high‑visibility way to share shipping updates, promos, or store hours? The announcement bar in Squarespace sits at the very top of your site and gets seen on every page. This guide shows you how to enable it, style it well, and keep it accessible—plus quick fixes if it doesn’t show up. If you need timed promos or closable messages, also consider using a popup; see our guide to creating a promotional banner as a popup in Squarespace Popups.

You’ll find practical steps and a few tasteful CSS tweaks for the typical announcement bar Squarespace flow—setup first, styling second. We’ll keep it simple. No coding required to get started.

Squarespace calls this feature an announcement bar, but you’ll also hear it called a squarespace notification bar, announcement banner squarespace, or even a hello bar squarespace. Whatever you call it, it should be short, readable, and on brand.

For deeper design control, a tiny CSS touch-up can go a long way; if you’re comfortable with that, see the examples below and our primer in Squarespace Custom CSS.

Overview

The Squarespace announcement bar places a slim strip at the top of your site for a single message and an optional link (for example: Free shipping over $50, Store closed this Friday, Spring sale ends Sunday). It’s ideal for:

  • Promotions — Launches, discounts, free‑shipping thresholds.
  • Operational updates — Hours, fulfillment delays, holiday notices.
  • Storewide nudges — New collection drops, preorders, or waitlist links.

By default it’s site‑wide and always on when enabled. You can keep the built‑in styling or lightly customize it to match your brand. For platform specifics, see the official docs: Squarespace: Using an announcement bar.

Edit your announcement bar instantly with MicroEdits

You don’t have to dig through settings every time you want to tweak the message or color. MicroEdits lets you change any live site by describing what you want in plain English. Say Make the announcement bar dark blue with white text and link to /sale and it just… does it. No code. No hunting for theme options.

  • Update copy, colors, links, and alignment fast.
  • Set page‑level visibility rules (site‑wide on desktop, homepage only on mobile, etc.) without wrestling CSS selectors.
  • Preview changes and share a link before you publish so your team can sign off.
  • Revert anytime if a campaign ends or a message needs to roll back.
  • Works on any existing Squarespace site—nothing to rebuild or migrate.

enter any Squarespace site

Enable and configure

Follow this setup once; you can refine the message anytime.

  1. Open the Announcement Bar
    • Go to Home > Design > Announcement Bar (path can vary slightly by version).
  2. Turn it on
    • Toggle Show Announcement Bar.
  3. Write your message
    • Keep it tight—aim for 45–80 characters. Lead with value: Free returns for 30 days, Book a free consult, Shipping delays this week.
  4. Add a link (optional)
    • Point to a promo collection, a policy page, or a booking page. Use a short, clear CTA like Shop now or Learn more.
  5. Choose where it appears
    • The bar is site‑wide by default. If your version offers page targeting, use it. If not, limit visibility with a small CSS rule (below) or let MicroEdits set page‑level rules for you.
  6. Timing your campaigns
    • If you need start/end dates, pair the bar with a calendar reminder, or run time‑boxed promos using a popup (which supports scheduling). See Set up a Promo Popup.
  7. Save and test
    • Check desktop and mobile. Click the link to confirm it routes correctly.

Styling tips and mobile behavior

Good styling is about clarity and restraint. The bar’s job is to inform, not shout.

  • Color and contrast
  • Typography
    • Minimum 16–18px on mobile; 18–20px on desktop. If you set ALL CAPS, increase letter‑spacing (0.02–0.05em) for readability.
  • Weight and spacing
    • Medium/Semibold weights read well at small sizes. Keep the message to one line on desktop whenever possible.
  • Sticky vs. static
    • If you make it sticky, ensure it doesn’t cover your navigation. Confirm that header spacing accounts for the bar’s height.
  • Layering
    • The bar should sit above content but not block dropdown menus. Adjust z‑index thoughtfully.

Here are small, safe CSS overrides you can paste into Design > Custom CSS. Adjust colors and sizes to match your brand. See also Custom CSS tips.

/* Tweak colors and type */
.sqs-announcement-bar,
.AnnouncementBar {
  background-color: #111827; /* brand background */
  color: #f9fafb; /* brand text */
  font-size: 18px;
  letter-spacing: 0.02em;
}

/* Make links stand out */
.sqs-announcement-bar a,
.AnnouncementBar a {
  color: #f9fafb;
  text-decoration: underline;
  font-weight: 600;
}

/* Optional: keep the bar visible while scrolling */
.sqs-announcement-bar,
.AnnouncementBar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* If sticky, ensure the header doesn't get covered */
header,
.site-header,
.Header {
  scroll-margin-top: 48px; /* roughly the bar's height */
}

If your header shifts on mobile, consider reducing the bar’s font size slightly on small screens:

@media (max-width: 480px) {
  .sqs-announcement-bar,
  .AnnouncementBar {
    font-size: 16px;
  }
}

For developers curious about sticky behavior, see MDN’s reference for position: sticky.

A/B ideas and messaging

Short copy wins. Try one angle at a time:

  • Value‑first: Lead with the benefit. Free shipping over $50, 10% off your first order.
  • Urgency with clarity: Sale ends Sunday, Order by Dec 18 for holiday delivery.
  • Threshold nudges: Spend $10 more for free shipping.
  • Friction reducers: Free returns for 30 days, Chat with a specialist.
  • Social proof: Trusted by 10,000+ customers (use sparingly).

Keep it to one link. If you need more content, that’s a job for a popup or a landing page.

Troubleshooting

If the bar isn’t behaving, check these in order:

  • It’s off (really). Confirm the toggle in Design > Announcement Bar is enabled. Then hard refresh your browser.
  • Template or CSS conflicts. Some templates and custom CSS hide or overlap the bar. Temporarily comment out custom CSS to isolate conflicts. If specificity is the issue, strengthen your selectors. Reference: MDN: CSS specificity.
  • Z‑index and menus. Dropdown menus can appear behind the bar. Raise the bar’s z‑index slightly (e.g., 1000–1100) and ensure menus are higher if needed.
  • Mobile only issues. Check that the bar doesn’t push the header offscreen. Reduce font size on small screens and test in iOS Safari and Android Chrome.
  • Link isn’t clickable. An overlapping element may be on top. Inspect the area and lower that element’s z‑index or add pointer-events: none to decorative overlays.
  • Remove announcement bar Squarespace. Turn off the toggle in Design > Announcement Bar. If you used custom CSS, remove it too.
  • You can’t find the setting. Paths sometimes vary. See the official guide: Using an announcement bar.

FAQ

How do I remove the announcement bar in Squarespace?

Open Home > Design > Announcement Bar and toggle it off. That immediately removes it site‑wide. If you added any custom CSS for styling, remove those rules as well so nothing reserves space at the top. Clear your browser cache and check a private window to confirm the change. This addresses most remove announcement bar squarespace cases.

Can I show the bar only on certain pages?

By default, the Squarespace announcement bar is site‑wide. Some versions expose page targeting; if yours doesn’t, use a tiny CSS rule to hide it on specific pages or let MicroEdits set visibility rules for you without touching code. For time‑boxed or audience‑specific messages, consider a scheduled popup instead—see our guide to Squarespace Popups.

How do I make the bar sticky without covering the nav?

Make it sticky and then give the header a small offset so content doesn’t jump. In Custom CSS, set the bar to position: sticky; top: 0; and add scroll-margin-top on the header roughly equal to the bar’s height. Test on mobile where headers are taller and menus are full‑screen. Reference: position: sticky.

Can I style only the bar’s text and link, not my global fonts?

Yes. Target the bar’s selectors in Custom CSS so you don’t touch global typography. For example, increase letter‑spacing, bump font size, or underline the link just inside the bar. Keep contrast strong (WCAG 2.1 AA) and limit it to one line. For broader font choices, see Change Fonts in Squarespace.

Is there a built‑in close (X) for the announcement bar?

No—unlike popups, the announcement bar doesn’t ship with a dismiss button. It’s meant to be persistent while a message is relevant. If your campaign needs a close action or per‑visitor targeting, use a promotional popup instead. You can match its style to your brand and schedule it for specific dates.

How can I track clicks from the bar?

Use a link with UTM parameters (e.g., ?utm_source=announcement-bar) and watch campaign reports in your analytics tool. This works well without custom scripts. If you’re using third‑party tools (Calendly, booking, surveys), link directly to those with tagged URLs so you can see downstream conversions.