Squarespace 7.1 — How To Add a Countdown Timer

Squarespace 7.1 — How To Add a Countdown Timer / Call-to-action

In this post, I will show you how I made a Squarespace Countdown Timer with just code [no need to buy a plug-in] to draw more attention to the Flash Sale on my website. Read on for the exact code to achieve this simple yet elegant call-to-action.

FLASH SALE LINK: DeGoogled Phones Flash Sale

Add Code On Your Page

Firstly, 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>

Add Code In Your Page Header

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

<!-- START TIMER CODE -->
<style>
#countDownTimer{
color:#89FF00;
display:inline-block;
text-align:center;
font-size:1.2rem} 

#countDownTimer .text{
font-weight: bold;
display:inline-block;
color:#89FF00;
font-size:3rem} 

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

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

<!--- Countdown timer on Squarespace --->
<!--- Copyright Primitius Consultancy [https://primitusconsultancy.co.uk] --->
<script>
// Set the date we're counting down to
// DAVID's Time To START :)
let countDownDate = new Date("august 8, 2023 08:00:00").getTime();
// DAVID's Time To END :)
//  let countDownDate = new Date("august 8, 2023 20:00:00").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  --->
<!-- END TIMER CODE -->

Edit Your Code Style

Obviously you can edit the target date and time in this section of the code below:

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

Looking for a New Website?

Great web design grabs your attention and gives you what you need without effort. THREE CATS small business web design packages with SEO, are strategically designed to drive more traffic to your website, converting visitors to customers.

Professional, Strategic, Australian Web Design!