How to create a countdown timer on Squarespace

This tutorial will show you how to create a countdown timer on your Squarespace website. This 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 and select the ‘Advanced’ selection. and cope 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, express 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.