Squarespace 7.1 Tool

Countdown Timer Generator

Build a real-time countdown timer for product launches, events, or limited offers. Customize the look, then paste the code into Squarespace.

Target Date & Time

Style

Colors

Background#000000
Numbers#ffffff
Labels#e63946

Show Units

Live Preview

00Days
00Hours
00Minutes
00Seconds

Generated Code

<!-- Countdown Timer -->
<style>
.sqs-countdown { display:flex; justify-content:center; gap:16px; align-items:center; font-family:sans-serif; padding:32px 16px; }
.sqs-ct-unit { text-align:center; background:#000000; border-radius:8px; padding:20px 24px; }

.sqs-ct-num { display:block; font-size:48px; font-weight:700; color:#ffffff; line-height:1; letter-spacing:-1px; }
.sqs-ct-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:2px; color:#e63946; margin-top:8px; }

</style>
<div class="sqs-countdown">
    <div class="sqs-ct-unit">
      <span class="sqs-ct-num" id="sqs-ct-days">00</span>
      <span class="sqs-ct-label">Days</span>
    </div>
    <div class="sqs-ct-unit">
      <span class="sqs-ct-num" id="sqs-ct-hours">00</span>
      <span class="sqs-ct-label">Hours</span>
    </div>
    <div class="sqs-ct-unit">
      <span class="sqs-ct-num" id="sqs-ct-minutes">00</span>
      <span class="sqs-ct-label">Minutes</span>
    </div>
    <div class="sqs-ct-unit">
      <span class="sqs-ct-num" id="sqs-ct-seconds">00</span>
      <span class="sqs-ct-label">Seconds</span>
    </div>
</div>
<script>
(function(){
  var target = new Date("2026-03-31T00:00:00").getTime();
  var units = ["days", "hours", "minutes", "seconds"];
  function pad(n){ return n < 10 ? "0" + n : n; }
  function tick(){
    var now = Date.now(), diff = target - now;
    if(diff <= 0) diff = 0;
    var d = Math.floor(diff / 86400000);
    var h = Math.floor((diff / 3600000) % 24);
    var m = Math.floor((diff / 60000) % 60);
    var s = Math.floor((diff / 1000) % 60);
    var vals = { days: d, hours: h, minutes: m, seconds: s };
    units.forEach(function(u){
      var el = document.getElementById("sqs-ct-" + u);
      if(el){
        var v = pad(vals[u]);
        if(el.textContent !== String(v)){
          el.textContent = v;
        }
      }
    });
  }
  tick();
  setInterval(tick, 1000);
})();
</script>

How to add this to Squarespace

  1. Configure your countdown timer above and click Copy Code.
  2. In your Squarespace editor, add a Code Block where you want the timer.
  3. Paste the code and toggle off "Display Source".
  4. Alternatively, paste into Settings → Advanced → Code Injection → Footer for site-wide display.
  5. Publish and preview your site to see the live countdown.

Why this matters

Countdown timers create urgency and boost conversions for launches, sales, and events. Squarespace does not include a built-in timer, so this tool generates lightweight, dependency-free code you can drop into any page. The timer runs in pure HTML, CSS, and JavaScript with no external libraries.

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →