How Do You Add a Countdown Timer for Squarespace?

To add a countdown timer for Squarespace, add a Code block to the page and paste a short HTML and JavaScript snippet with your launch date in it; the one below is complete, free, and styled to match your fonts. Squarespace has no countdown block of its own for pages. It does have a built-in timer at checkout on Plus and Advanced plans, which holds items in the cart for a set number of minutes, but that is a different thing from a launch or sale countdown. This post gives you the code block method with the snippet, the widget and plugin routes for anyone who prefers no code, the checkout timer, and how to put a countdown in the announcement bar.

How do you add a countdown timer for Squarespace with a code block?

1. Edit the page, click Add Block, then Code. Code blocks exist on every plan, but the JavaScript in this snippet needs the Core plan or higher.
2. Delete the placeholder and paste the snippet below. Change the date in the deadline line; the format is year, month, day, hour, minute (the ISO date format JavaScript reads), and the time is the visitor’s local time zone unless you add a zone.
3. Click outside the block, then Save. The timer runs immediately in the editor preview.

<div class="cd" id="cd">
  <span><b id="cd-d">0</b>days</span>
  <span><b id="cd-h">0</b>hours</span>
  <span><b id="cd-m">0</b>minutes</span>
  <span><b id="cd-s">0</b>seconds</span>
</div>
<style>
.cd{display:flex;gap:24px;justify-content:center;font-family:inherit;text-align:center}
.cd span{font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.cd b{display:block;font-size:40px;line-height:1;margin-bottom:6px}
</style>
<script>
(function(){
  var deadline = new Date("2026-11-01T09:00:00").getTime();
  function tick(){
    var t = deadline - Date.now();
    if (t <= 0){ document.getElementById("cd").innerHTML = "<span>We are live</span>"; return; }
    document.getElementById("cd-d").textContent = Math.floor(t/864e5);
    document.getElementById("cd-h").textContent = Math.floor(t%864e5/36e5);
    document.getElementById("cd-m").textContent = Math.floor(t%36e5/6e4);
    document.getElementById("cd-s").textContent = Math.floor(t%6e4/1e3);
    setTimeout(tick, 1000);
  }
  tick();
})();
</script>

To fix the deadline to one time zone regardless of where the visitor is, write the date as "2026-11-01T09:00:00+00:00" (UK in winter; +01:00 during British Summer Time) or "2026-11-01T09:00:00-05:00" (US Eastern). Change the “We are live” text to whatever should show when the timer ends, and edit the sizes in the <style> section to suit; the Squarespace CSS cheat sheet has the mobile media query pattern if the numbers need to shrink on phones.

How do you add a countdown timer without code?

The widget and plugin routes still need the Core plan or higher, because they run JavaScript on the page.

What is the built-in checkout countdown timer?

On Plus and Advanced plans, on 7.1 sites, Squarespace can reserve items in a shopper’s cart and show a countdown banner until the reservation expires. It is set in the Cart panel (search “Cart” in the Home menu if your Commerce menu is arranged differently): under Cart to checkout flow, switch on Reserved cart & countdown timer and choose 5, 10, 15 or 20 minutes. It applies store-wide, covers physical and service products, does not restart when the shopper changes quantities, and is meant for limited-stock drops and ticketed events rather than as a page countdown. Squarespace’s checkout timer guide lists the eligibility details.

How do you put a countdown in the announcement bar?

The announcement bar accepts text only, so the timer is injected with JavaScript that rewrites its text every second. Add this under Website, Website Tools, Code Injection, Footer:

<script>
(function(){
  var deadline = new Date("2026-11-01T09:00:00").getTime();
  function tick(){
    var el = document.querySelector(".sqs-announcement-bar-text p");
    if(!el){ setTimeout(tick, 500); return; }
    var t = deadline - Date.now(); if(t <= 0){ el.textContent = "Sale is on"; return; }
    el.textContent = "Sale starts in " + Math.floor(t/864e5) + "d " + Math.floor(t%864e5/36e5) + "h " + Math.floor(t%36e5/6e4) + "m";
    setTimeout(tick, 60000);
  }
  tick();
})();
</script>

Keep the announcement bar switched on with placeholder text so the element exists for the script to find. Updating once a minute is enough for a bar; seconds would look frantic in a strip that small.

Where should a countdown go, and when should it not?

• Launch pages: above the fold, with the sign-up form directly under it. This pairs well with a private or coming-soon site when the launch is the whole site.
• Sales and course enrolment: near the price and the button, not in the hero on its own.
• Events: on the event page with the booking link; ticket deadlines are the one case where seconds matter.
• Not on the home page permanently. A timer that resets weekly, or counts to nothing in particular, trains visitors to ignore it, and fake urgency is the fastest way to lose trust on a Squarespace site.
• Not in a popup on arrival. A popup with a timer inside is two interruptions at once.

Why is the countdown not working?

Frequently asked questions