How to Add a Rotating Announcement Banner in Squarespace

An announcement bar is one of the easiest ways to get an important message in front of every visitor. Free shipping, a sale, a new launch, a holiday closing date, you name it.

The only catch? You usually have more than one thing to say. Squarespace has a built-in announcement bar, but it shows one message. If you want several messages that take turns, you need a little help from code.

Let’s build one together.

What we are building

• A slim bar across the very top of every page.
• Any number of messages that fade in and out, one after another.
• It pauses while someone hovers over it, so nobody loses their place mid sentence.
• For visitors who ask their device to reduce motion, the fade is switched off.

Where to put the code

Because the bar appears on every page, we will use Code Injection. This is a spot in your site settings where you can paste code that loads site wide. Menu names change over time, so if you cannot spot it, look under your website settings for something called Code Injection or Custom Code. It is also worth knowing that the availability of code features depends on your Squarespace plan.

The important detail: this script goes in the Footer box, not the Header box. The script needs the page to exist before it can add the bar, and the footer loads after the page content. Put it in the Header and nothing will happen.

1. Open your site settings and find Code Injection.
2. Scroll to the Footer field.
3. Paste in the code below and save.

The code

<style>
.sdl-bar { position: relative; z-index: 50; padding: 10px 16px; background: #1f1f1f; color: #ffffff; text-align: center; font-size: 14px; line-height: 1.4; }
.sdl-bar span { display: inline-block; transition: opacity 0.4s ease; }
.sdl-bar span.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sdl-bar span { transition: none; } }
</style>

<script>
(function () {
  var messages = [
    'Free shipping on orders over $50',
    'New: the spring collection is here',
    'Questions? We reply within one business day'
  ];
  var delay = 4000; // time each message stays, in milliseconds

  var bar = document.createElement('div');
  bar.className = 'sdl-bar';
  bar.setAttribute('role', 'status');
  var text = document.createElement('span');
  text.textContent = messages[0];
  bar.appendChild(text);
  document.body.insertBefore(bar, document.body.firstChild);

  var index = 0;
  var paused = false;
  bar.addEventListener('mouseenter', function () { paused = true; });
  bar.addEventListener('mouseleave', function () { paused = false; });

  setInterval(function () {
    if (paused) return;
    text.classList.add('is-hidden');            // fade out
    setTimeout(function () {
      index = (index + 1) % messages.length;
      text.textContent = messages[index];       // swap the words
      text.classList.remove('is-hidden');       // fade back in
    }, 400);
  }, delay);
})();
</script>

Changing your messages

Look for the list at the top of the script:

var messages = [
  'Free shipping on orders over $50',
  'New: the spring collection is here',
  'Questions? We reply within one business day'
];

Replace the words with your own, keep each one in quotes with a comma after it (except the last), and add as many as you like. Three or four is the sweet spot. Any more and people will not wait around to read them all.

A small tip: if your message contains an apostrophe, like We’re open, put a backslash in front of it or switch to double quotes around that message. Otherwise the code gets confused about where the message ends.

Customizing the look

Common problems

Nothing shows up

Check that the code is in the Footer box and not the Header box. Then open your live site and refresh. Code Injection does not run in the editor.

The bar is hiding behind my header

If your header is set to stay fixed at the top of the screen, it can sit on top of the bar, because a fixed header lifts out of the normal page flow. Every Squarespace template handles this a little differently, so there is no one line that fits all of them. The usual approach is to make the bar fixed as well: add position: fixed; top: 0; left: 0; right: 0; to the .sdl-bar style, then push your header and content down by the height of the bar. Test it on your own site, and check it on mobile too.

Someone wants to close it

This version stays put and has no close button. If you need extras like that, it is a good moment to look at the announcement bar plugin below.

Want more options?

Our Animated Announcement Bar plugin adds a marquee mode, a countdown timer, links inside messages, icons and automatic theme matching, all set up through a visual config generator. You will find it in the plugin collection.

Want more snippets like this one? Browse the Code Vault, our library of ready-to-paste Squarespace code, with one payment and lifetime access.

Why this post? It answers one of the questions Squarespace users ask most in the community forums. The code above is free to use and change, and every snippet was tested before we published it.