Announcement Bar Generator

Create attention-grabbing announcement bars with optional countdowns, dismiss buttons, and sticky positioning.

Why this matters

Announcement bars are the highest-visibility real estate on your site. They drive urgency for sales, highlight shipping promotions, and announce events. A countdown timer adds scarcity that converts browsers into buyers.

<!-- Announcement Bar -->
<div id="sqs-announcement-bar" style="position:fixed;top:0;left:0;right:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:12px 20px;background:#000000;color:#ffffff;font-family:sans-serif;font-size:14px;text-align:center;">
  <span>Free shipping on all orders over $50!</span>
  <button onclick="this.parentElement.style.display='none';sessionStorage.setItem('sqs-bar-dismissed','1');" style="background:none;border:none;color:#ffffff;font-size:18px;cursor:pointer;padding:0 0 0 16px;line-height:1;opacity:0.7;" aria-label="Dismiss">&times;</button>
</div>
<script>
(function() {
  if (sessionStorage.getItem('sqs-bar-dismissed') === '1') {
    var bar = document.getElementById('sqs-announcement-bar');
    if (bar) bar.style.display = 'none';
  }
})();
</script>
<script>
(function() {
  var bar = document.getElementById('sqs-announcement-bar');
  if (bar && bar.style.display !== 'none') {
    document.body.style.paddingTop = bar.offsetHeight + 'px';
  }
})();
</script>

How to add this to Squarespace

1. Copy the code above.
2. Go to Settings → Advanced → Code Injection.
3. Paste into the Footer field.
4. If you used a countdown, update the date string in the code to your actual end date.
5. Click Save and preview your site.