How to create a countdown timer on Squarespace

Countdown timers are a great way to add urgency, boost engagement, and drive conversions on your Squarespace site. Whether you're promoting a limited-time offer, counting down to a product launch, or building anticipation for an event, adding a countdown timer can be an effective marketing tool.

In this tutorial, we'll guide you step-by-step on how to create a custom countdown timer on Squarespace using HTML, CSS, and JavaScript.

Table of Contents

• Why Add a Countdown Timer

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Add a Countdown Timer?

Adding a countdown timer can help you:

• Create urgency for time-limited promotions

• Encourage faster decision-making from visitors

• Build anticipation for launches or events

• Improve engagement and conversion rates

• Add interactive visual elements to your site

Complexity: Easy

---

Why Add a Countdown Timer

Step 1

On the page you want the counter timer to show, add a code block to insert the html code below.

<center>
    <div id="countDownTimer">
    </div>
</center>

---

Step 2

On the page menu, click on the page gear icon, the select ‘Advanced’ and copy and paste the code below.

<style>
#countDownTimer{
color:#000;
display:inline-block;
text-align:center;
font-size:1.5rem} 

#countDownTimer .text{
font-weight: bold;
display:inline-block;
color:#fff;
font-size:2rem} 

#countDownTimer>div{
padding:10px; 
background:#e5ac00; 
display:inline-block} 

#countDownTimer div>span{
padding:5px; 
display:inline-block}
</style>

<!--- Countdown timer on Squarespace --->
<!--- Copyright Primitius Consultancy [https://primitusconsultancy.co.uk] --->
<script>
// Set the date we're counting down to
let countDownDate = new Date("may 20, 2027 00:00:01").getTime();

// Update the count down every 1 second
let x = setInterval(function() {

// Get today's date and time
let now = new Date().getTime();

// Find the distance between now and the count down date
let countDifference = countDownDate - now;


let days = Math.floor(countDifference / (1000 * 60 * 60 * 24));
let hours = Math.floor((countDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((countDifference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((countDifference % (1000 * 60)) / 1000);
document.getElementById("countDownTimer").innerHTML = "<div><span class='text'>" + days + "</span><div>Days</div></div><div><span class='text'>" + hours + "</span><div>Hours</div></div><div><span class='text'>" + minutes + "</span><div >Minutes</div></div><div><span class='text'>" + seconds + "</span><div>Seconds</div></div>";
  if (countDifference < 0) {
    clearInterval(x);
 document.getElementById("countDownTimer").innerHTML = "<div><span class='text'>EXPIRED</span></div>";
  }
}, 1000); 
</script>
<!--- End Countdown timer on Squarespace  --->

---

Step 3

Note: Finally you will need to set the date for the count down. This is done within the section of the code below.

// Set the date we're counting down to
let countDownDate = new Date("January 20, 2027 00:00:01").getTime();

To say October
let countDownDate = new Date("October 09, 2027 00:00:01").getTime();

---

Step 4

Note: Copy the code below for the a different counter format..

<style>
#countDown{
color:#000;
display:inline-block;
text-align:center;
font-size:1.5rem} 

#countDown .text{
width:100%;
font-weight: bold;
display:inline-block;
color:#fff;
font-size:2rem} 

#countDown>div{
padding:10px; 
background:#e5ac00; 
display:inline-block} 

#countDown div>span{
padding:5px; 
display:inline-block}
</style>
<script>
// Set the date we're counting down to
let countDownDate = new Date("october 20, 2027 00:00:01").getTime();

// Update the count down every 1 second
let x = setInterval(function() {

// Get today's date and time
let now = new Date().getTime();

// Find the distance between now and the count down date
let countDifference = countDownDate - now;


let days = Math.floor(countDifference / (1000 * 60 * 60 * 24));
let hours = Math.floor((countDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((countDifference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((countDifference % (1000 * 60)) / 1000);
document.getElementById("countDown").innerHTML = "<div><span class='text'>" + days + "d </span></div><div><span class='text'>" + hours + "h </span></div><div><span class='text'>" + minutes + "m </span></div><div><span class='text'>" + seconds + "s </span></div>";
  if (countDifference < 0) {
    clearInterval(x);
 document.getElementById("countDown").innerHTML = "<span class='text'>EXPIRED</span>";
  }
}, 1000); 
</script>

---

Key Takeaways

• A countdown timer helps create urgency and improve conversions.

• You can implement it easily using HTML, CSS, and JavaScript in a Squarespace code block.

• The timer is fully customizable — you can change the text, colors, fonts, and more.

• Timers can be added to product pages, landing pages, or promotional banners.

FAQs

Can I use this on any page?
Yes. Add the code block wherever you want the timer to appear — in any section or on any page.

Can I show different timers on different pages?
Absolutely. Just duplicate the code and change the target date/time.

What if I want a circular or flip-style countdown?
That requires more advanced CSS and JS.

---

---

Conclusion

Countdown timers are a simple but powerful way to boost engagement and drive action. Whether you're running a sale or counting down to an event, adding a timer to your Squarespace site can help turn visitors into customers.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.