FREE Smart Promo Bar - Squarespace Ecommerce Plugin

Oct 20

Written By Toni Hill - Founder of The Square Genius

Add a Smart Promo Bar Squarespace Ecommerce Plugin for More Sales & Visibility!

Looking for a way to boost your store sales and highlight key offers?
The Smart Promo Bar Plugin is a free and flexible Squarespace ecommerce plugin designed to help you promote discounts, events, or announcements across your site.

It adds a sleek, fully customisable promotional banner to the bottom of your pages — the perfect spot to catch customers’ attention just before they check out or leave your site.

Unlike the built-in Squarespace announcement bar, this free Squarespace plugin gives you full flexibility to show a second promotional banner at the bottom of your site. It’s sleek, modern, and completely customisable, one of the best free Squarespace plugins for creators who want to make announcements without relying on promotional pop-ups.

Step 1. Add the JAVA Script Code

Go to pages > scroll down to custom code > Code Injection - Then paste the below code in the FOOTER area.

<script>
/* === Smart Promo Announcement Bar by The Square Genius === */
(function(){
  const config = {
    id: 'sgpb-free',
    position: 'bottom',
    messageHTML: '💡 <span class="sgpb-strong">Smart Promo Bar:</span> Your free Squarespace promotional banner!',
    ctaText: 'Learn More',
    ctaHref: 'https://www.thesquaregenius.com/squarespace-plugins/p/squarespace-shop-plugins', // Add your link here
    showCountdown: true, // Add 'true' to show countdown timer
    deadlineISO: '2025-12-01T23:59:59', // Add a date if you wish to include the countdown timer
    rememberDismissDays: 7
  };

  const KEY = 'sgpb-dismissed-' + config.id;
  const dismissedUntil = localStorage.getItem(KEY);
  if (dismissedUntil && Date.now() < parseInt(dismissedUntil,10)) return;

  const bar = document.createElement('div');
  bar.className = 'sgpb-bar ' + (config.position === 'bottom' ? 'is-bottom' : '');
  bar.setAttribute('role','region');
  bar.setAttribute('aria-label','Site promotion');

  const wrap = document.createElement('div');
  wrap.className = 'sgpb-wrap';

  const msg = document.createElement('span');
  msg.className = 'sgpb-msg';
  msg.innerHTML = config.messageHTML;

  const cta = document.createElement('a');
  cta.className = 'sgpb-cta';
  cta.href = config.ctaHref;
  cta.textContent = config.ctaText;

  const close = document.createElement('button');
  close.className = 'sgpb-close';
  close.setAttribute('aria-label', 'Close promotion');
  close.innerHTML = '✕';

  // Build structure
  wrap.prepend(msg);
  wrap.appendChild(cta);

  // Optional countdown feature (desktop / tablet visible, mobile hidden via CSS)
  if (config.showCountdown) {
    const countWrap = document.createElement('span');
    countWrap.className = 'sgpb-countwrap';

    const countLabel = document.createTextNode(' • Ends in ');
    const countSpan = document.createElement('span');
    countSpan.className = 'sgpb-count';

    countWrap.append(countLabel, countSpan);
    wrap.appendChild(countWrap);

    const end = new Date(config.deadlineISO).getTime();
    const tick = () => {
      const diff = Math.max(0, end - Date.now());
      const s = Math.floor(diff / 1000) % 60;
      const m = Math.floor(diff / 60000) % 60;
      const h = Math.floor(diff / 3600000) % 24;
      const d = Math.floor(diff / 86400000);
      const pad = n => String(n).padStart(2, '0');
      countSpan.textContent = (d > 0 ? d + 'd ' : '') + pad(h) + ':' + pad(m) + ':' + pad(s);
      if (diff <= 0) bar.remove();
    };
    tick();
    setInterval(tick, 1000);
  }

  wrap.appendChild(close);
  bar.appendChild(wrap);
  document.body.appendChild(bar);

  if (config.position !== 'bottom') { 
    document.body.classList.add('sgpb-offset-top'); 
  }

  requestAnimationFrame(()=> bar.classList.add('is-show'));

  close.addEventListener('click', () => {
    bar.remove();
    const until = Date.now() + (config.rememberDismissDays * 24 * 60 * 60 * 1000);
    localStorage.setItem(KEY, String(until));
  });
})();
</script>

How To Customise the smart announcement bar:

This line of code is where you update your announcement bar text. (Text within span code will show on the next line.)

messageHTML: '💡 <span class="sgpb-strong">Smart Promo Bar:</span> Your free Squarespace promotional banner!',

This line changes the button text:

ctaText: 'Learn More',

You can also add a countdown feature onto your smart Squarespace announcment bar. Simply change this line to ‘True’

showCountdown: false, // Add 'True' to show countdown timer

Step 2. Add the CSS Code

Go to pages > scroll down to custom code > Custom CSS - Then paste the below code.

You can change the background and text colors to suit your brand. Look out for the grey prompts within the code for instructions.

/* PROMO ANNOUNCEMENT BAR */
/* === Promo Bar by The Square Genius === */

/* CUSTOMISATION GUIDE
--------------------------------------------------
You can update these colours and styles to match your brand.
Each line below controls a different part of the promo bar.
-------------------------------------------------- */
:root{
  --sgpb-bg:#111;           /* Background colour of the promo bar */
  --sgpb-fg:#fff;           /* Text colour inside the bar */
  --sgpb-accent:#ffd54d;    /* Button and highlight colour */
  --sgpb-height:48px;       /* Height of the bar (increase for larger text) */
  --sgpb-z:9999;            /* Layer position (higher = sits above more elements) */
  --sgpb-font:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; /* Font family */
}

/* Base container styling */
.sgpb-bar{
  position:fixed; left:0; right:0;
  display:flex; align-items:center; gap:.75rem;
  padding:0 .9rem; height:var(--sgpb-height);
  background:var(--sgpb-bg); color:var(--sgpb-fg);
  font:600 14px/1 var(--sgpb-font);
  z-index:var(--sgpb-z); transform:translateY(-100%);
  transition:transform .4s ease;
}

/* Keep this for a bottom-positioned bar (recommended for ecommerce) */
.sgpb-bar.is-bottom{ bottom:0; top:auto; transform:translateY(100%); }

/* Visible state (when the bar slides in) */
.sgpb-bar.is-show{ transform:translateY(0); }

/* Message area styling */
.sgpb-wrap{ 
  display:flex; align-items:center; gap:.65rem; 
  width:100%; justify-content:center; text-align:center; 
}
.sgpb-msg{ display:inline-flex; gap:.4rem; flex-wrap:wrap; align-items:center; }

/* Highlighted text (e.g., offer keywords) */
.sgpb-strong{ 
  color:var(--sgpb-accent); 
  font-weight:800; 
}

/* Call-To-Action (CTA) Button
--------------------------------------------------
Change colours or shape here:
- background: controls button colour
- color: controls button text
- border-radius: adjust to change shape (999px = pill)
-------------------------------------------------- */
.sgpb-cta{ 
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem; 
  border-radius:999px;       /* Change to 8px for square corners */
  background:var(--sgpb-accent); /* Button background colour */
  color:#111;                /* Button text colour */
  text-decoration:none; 
  font-weight:800; 
  white-space:nowrap;
}

/* Countdown styling (if enabled) */
.sgpb-count{ 
  font-weight:800; 
  letter-spacing:.02em; 
}

/* Close (X) button styling */
.sgpb-close{ 
  margin-left:.5rem; 
  border:none; 
  background:transparent; 
  color:var(--sgpb-fg); 
  cursor:pointer; 
  font-size:18px; 
  line-height:1; 
}

/* Accessibility focus outline */
.sgpb-close:focus-visible, 
.sgpb-cta:focus-visible{ 
  outline:2px solid var(--sgpb-accent); 
  outline-offset:2px; 
}

/* Keeps top page content visible if bar overlaps header */
body.sgpb-offset-top{ scroll-margin-top: var(--sgpb-height); }

/* Mobile view adjustments */
@media (max-width: 480px){
  .sgpb-bar{ height:44px; }       /* Reduce height for small screens */
  .sgpb-cta{ display:none; }      /* Hide button on mobile (optional) */
}

/* Disable slide animation for users with reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .sgpb-bar{ transition:none; }
}


@media (max-width: 480px){
  .sgpb-countwrap{
    display:none;
  }
}


/* END PROMO ANNOUNCEMENT BAR */

Why This Plugin Is Great for Ecommerce

The Smart Promo Bar acts as a strategic bottom-of-page call-to-action, helping Squarespace store owners convert more visitors.

Use it to:

Announce time-limited offers or discounts
Promote bundles or free shipping
Encourage newsletter sign-ups or product launches
Reinforce checkout CTAs for higher conversions

This Squarespace ecommerce plugin is lightweight, mobile-friendly, and designed to enhance your customer journey — not interrupt it.

By placing your promo bar at the bottom of the page, you can create a second call-to-action zone that reinforces your main offer and encourages more clicks.

It’s clean, customisable, and completely free — the perfect addition to any Squarespace online store.

Squarespace Shop Bundle

$39.99

Three powerful Squarespace shop plugins that will help increase sales and engagement on your website.

Take your Squarespace store to the next level with these premium Squarespace Shop Plugins – designed to help you promote products, highlight offers, and build customer trust. Each plugin adds its own spark to your ecommerce experience, helping you sell more beautifully, effortlessly.

What’s Included:

1. Image Hover Effect Plugin
Make your products pop by showcasing them with smooth hover effects that reveal extra details, or calls to action. This interactive touch turns browsers into buyers by showcasing your products in a more engaging way.

2. Sale Tag Announcement Bar Plugin
Draw attention to your sales, discounts, or new arrivals with a stylish image tag on your announcement bar. Perfect for promoting special offers or time-sensitive campaigns directly from the top of your site!

3. Social Proof Widget for Squarespace
Show off social activity – display recent purchases, reviews, or engagement that builds instant credibility. Turn curiosity into conversion by showing visitors that others already love what you sell.

These plugins are only compatible with Squarespace 7.1 sites.

Looking for a little extra sales push on your Squarespace shop?

Check out my Squarespace Shop Bundle for more powerful site add-ons.

What’s Included:

1. Image Hover Effect Plugin

2. Sale Tag Announcement Bar Plugin

3. Social Proof Widget for Squarespace

If you love this tool, explore the full range of premium Squarespace plugins from The Square Genius — designed to boost engagement, streamline design, and make your website work smarter.

Check out my Squarespace Premium Plugins

Squarespace Shop Bundle

$39.99

Three powerful Squarespace shop plugins that will help increase sales and engagement on your website.

What’s Included:

These plugins are only compatible with Squarespace 7.1 sites.

Quick View

Genius Squarespace Filter Plugin

$55.00

The easiest Squarespace filter plugin - smart filtering for portfolio pages, blogs, and events.

This filter plugin shows a simple and effective filtering system without over complicating the user. Its easy to install and comes with 4 different plugin types for portfolio pages, gallery blocks, event pages and blogs. No code knowledge required – just follow the guide - copy, paste, and customise!

Portfolio Filter Demo ➜

Event Filter Demo ➜

NEW Addition! Gallery Block Filter Demo ➜

Blog Filter Demo ➜

Key Features:

Simple to Install & Customise
4 x Plugin options for portfolio pages, gallery blocks, blog & events
Add as many filters as you like
Ideal for Squarespace sites needing more in depth filtering options with a simple UX

This plugin is only compatible with Squarespace 7.1 sites.

Featured

Where to Buy Squarespace Plugins (And What to Look For)

How to Create a Progress Bar Squarespace Plugin

timeline squarespace

Toni Hill - Founder of The Square Genius

Hi, I’m Toni. My mission is to create powerful websites for charities, non profits and purpose-led organisations dedicated to making a positive impact on the environment, communities, animal welfare and many more. I am also a CSS enthusiast and love to create cool plugins for Squarespace websites.

https://www.thesquaregenius.com/author-toni-williams