Layout & UtilitiesJS: Business Plan+

Countdown Timer for Squarespace

Squarespace does not ship a countdown timer block, and most third party widgets charge a monthly fee for what is really a page of JavaScript. This snippet is the whole thing in one code block: set your launch date in a single data attribute and you get live days, hours, minutes, and seconds, with tabular numerals so the digits do not jump around as they change. When the date passes, the timer swaps to a finished message you can customize. No plugin, no external service, no recurring cost.

The Code

htmlHTML + JavaScript (Code block on your page)
<!-- Set your target date in data-date, format YYYY-MM-DDTHH:MM:SS
     (interpreted in each visitor's local time zone) -->
<div class="countdown" id="countdown" data-date="2026-12-31T23:59:59">
  <div class="countdown-unit">
    <span class="countdown-value" id="cd-days">0</span>
    <span class="countdown-label">Days</span>
  </div>
  <div class="countdown-unit">
    <span class="countdown-value" id="cd-hours">00</span>
    <span class="countdown-label">Hours</span>
  </div>
  <div class="countdown-unit">
    <span class="countdown-value" id="cd-mins">00</span>
    <span class="countdown-label">Minutes</span>
  </div>
  <div class="countdown-unit">
    <span class="countdown-value" id="cd-secs">00</span>
    <span class="countdown-label">Seconds</span>
  </div>
</div>

<script>
(function () {
  var wrap = document.getElementById('countdown');
  if (!wrap) return;
  var target = new Date(wrap.getAttribute('data-date')).getTime();

  function pad(n) { return n < 10 ? '0' + n : String(n); }

  function update() {
    var diff = target - Date.now();
    if (diff <= 0) {
      /* Change the finished message here */
      wrap.innerHTML = '<p class="countdown-done">We are live!</p>';
      clearInterval(timer);
      return;
    }
    var s = Math.floor(diff / 1000);
    document.getElementById('cd-days').textContent = String(Math.floor(s / 86400));
    document.getElementById('cd-hours').textContent = pad(Math.floor((s % 86400) / 3600));
    document.getElementById('cd-mins').textContent = pad(Math.floor((s % 3600) / 60));
    document.getElementById('cd-secs').textContent = pad(s % 60);
  }

  var timer = setInterval(update, 1000);
  update();
})();
</script>
cssCSS (Design > Custom CSS)
.countdown {
  display: flex;
  justify-content: center;
  gap: 24px;
  text-align: center;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  min-width: 70px;
}

.countdown-value {
  font-size: 2.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums; /* digits keep a fixed width */
}

.countdown-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.countdown-done {
  text-align: center;
  font-size: 1.5rem;
}

How to Install It

  1. 1Edit the page, add a Code block where the timer should appear, and paste the HTML and JavaScript block.
  2. 2Change the data-date attribute to your target date and time in YYYY-MM-DDTHH:MM:SS format.
  3. 3Paste the CSS into Design > Custom CSS and adjust sizes and colors to match your design.

Compatibility and Plan Requirements

Squarespace 7.1. The date is interpreted in each visitor's local time zone. JavaScript in a code block requires the Business plan or higher.

This snippet uses JavaScript, which Squarespace only runs through code injection or code blocks on the Business plan or higher. On Personal plans the script will not execute.

Want This Done For You?

If you would rather not touch code, or you need something bigger than a snippet, I build custom Squarespace features for clients every week: widgets, search and filter tools, integrations, and full sites.

Squarespace Development Services Get in Touch