There are many ways to add a countdown timer to Squarespace.
Here I will share the free way using code from Codepen, but editing will be a bit difficult. To make editing style, layout, text, and numbers easier, you can use
- Countdown Timer Widget (it has a free version)
#1. Use this code to Custom CSS box
/* Countdown CSS */ .tpcontainer{ & { color: #333; margin: 0 auto; text-align: center; } h1 { font-weight: normal; letter-spacing: .125rem; text-transform: uppercase; } li { display: inline-block; font-size: 1.5em; list-style-type: none; padding: 1em; text-transform: uppercase; } li span { display: block; font-size: 4.5rem; margin-bottom: 20px; } @media screen and (max-width:767px) { div#countdown ul { padding: 0px !important; display: flex; flex-direction: column; }}}
#2. Use this code to Code Injection > Footer
<script> (function () { const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24; //I'm adding this section so I don't have to keep updating this pen every year :-) //remove this if you don't need it let today = new Date(), dd = String(today.getDate()).padStart(2, "0"), mm = String(today.getMonth() + 1).padStart(2, "0"), yyyy = today.getFullYear(), nextYear = yyyy + 1, dayMonth = "10/30/", birthday = dayMonth + yyyy; today = mm + "/" + dd + "/" + yyyy; if (today > birthday) { birthday = dayMonth + nextYear; } //end const countDown = new Date(birthday).getTime(), x = setInterval(function() { const now = new Date().getTime(), distance = countDown - now; document.getElementById("days").innerText = Math.floor(distance / (day)), document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)), document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)), document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second); //do something later when date is reached if (distance < 0) { document.getElementById("headline").innerText = "It's my birthday!"; document.getElementById("countdown").style.display = "none"; document.getElementById("content").style.display = "block"; clearInterval(x); } //seconds }, 0) }()); </script>
#3. Edit the page where you want the Countdown Timer to appear > Add a Code Block > Paste this code.
<div class="tpcontainer"> <h1 id="headline">Countdown to my birthday</h1> <div id="countdown"> <ul> <li><span id="days"></span>days</li> <li><span id="hours"></span>Hours</li> <li><span id="minutes"></span>Minutes</li> <li><span id="seconds"></span>Seconds</li> </ul> </div> </div>
#4. Save and preview the page to see the result.
#5. To change the Month/Date, you can find this line
To change the size of the Number/Day, find this line (CSS code)