How to create a countdown timer on Squarespace

This tutorial will show you how to create a countdown timer on your Squarespace website. This is particularly useful if you have a product or service launch.

Complexity: Easy

---

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, 2021 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, 2022 00:00:01").getTime();

To say October
let countDownDate = new Date("October 09, 2022 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, 2022 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>

---

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.