FREE Smart Promo Bar - Squarespace Ecommerce Plugin

Oct 20

Written By Toni Williams - 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: false, // Add 'True' to show countdown timer
    deadlineISO: '2025-12-31T23:59:59', // Add a 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 = '✕';

  wrap.prepend(msg);
  wrap.appendChild(cta);
  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));
  });

  // Optional countdown feature
  if (config.showCountdown) {
    const countSpan = document.createElement('span');
    countSpan.className = 'sgpb-count';
    wrap.append(' • Ends in ', countSpan);
    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);
  }
})();
</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; }
}

/* 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

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

Sale

Quick View

Genius Squarespace Filter Plugin

Featured

FREE Smart Promo Bar - Squarespace Ecommerce Plugin

How To Round The Corners on Squarespace Video Block

10 Squarespace Plugins I Cant Live Without

How to Add a Simple Squarespace Vertical Timeline

timeline squarespace

Toni Williams - 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