Nothing creates urgency like a ticking clock. Whether you are running a flash sale, launching a new product, or promoting an event, a countdown timer pushes visitors to act now rather than later. Studies consistently show that countdown timers can increase conversion rates by 8-10% on landing pages.
Squarespace does not have a native countdown timer block, but you can add one easily with a Code Block. Here is how.
Step 1: Add the Countdown Code
In the Squarespace editor, add a Code Block where you want the timer to appear. Paste this complete code:
<div class="countdown-timer" id="countdown">
<div class="countdown-unit">
<span class="countdown-number" id="days">00</span>
<span class="countdown-label">Days</span>
</div>
<div class="countdown-separator">:</div>
<div class="countdown-unit">
<span class="countdown-number" id="hours">00</span>
<span class="countdown-label">Hours</span>
</div>
<div class="countdown-separator">:</div>
<div class="countdown-unit">
<span class="countdown-number" id="minutes">00</span>
<span class="countdown-label">Minutes</span>
</div>
<div class="countdown-separator">:</div>
<div class="countdown-unit">
<span class="countdown-number" id="seconds">00</span>
<span class="countdown-label">Seconds</span>
</div>
</div>
<style>
.countdown-timer {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 40px 20px;
font-family: inherit;
}
.countdown-unit {
text-align: center;
min-width: 80px;
}
.countdown-number {
display: block;
font-size: 48px;
font-weight: 700;
color: #1a1a1a;
letter-spacing: -1px;
line-height: 1;
}
.countdown-label {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: #999;
margin-top: 8px;
}
.countdown-separator {
font-size: 36px;
font-weight: 300;
color: #ccc;
margin-top: -16px;
}
@media (max-width: 480px) {
.countdown-number { font-size: 32px; }
.countdown-unit { min-width: 60px; }
.countdown-separator { font-size: 24px; }
}
</style>
<script>
(function() {
// SET YOUR TARGET DATE HERE
var targetDate = new Date("2026-04-30T23:59:59").getTime();
function updateCountdown() {
var now = new Date().getTime();
var distance = targetDate - now;
if (distance < 0) {
document.getElementById("countdown").innerHTML =
"<p style='font-size:20px;font-weight:600;text-align:center'>This offer has ended!</p>";
return;
}
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").textContent = days.toString().padStart(2, "0");
document.getElementById("hours").textContent = hours.toString().padStart(2, "0");
document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0");
document.getElementById("seconds").textContent = seconds.toString().padStart(2, "0");
}
updateCountdown();
setInterval(updateCountdown, 1000);
})();
</script>Step 2: Set Your Target Date
Find this line in the code and change the date to your deadline:
var targetDate = new Date("2026-04-30T23:59:59").getTime();The format is YYYY-MM-DDTHH:MM:SS. The timer uses the visitor's local time zone.
Customization Options
Here are quick tweaks you can make:
- Dark background: Add
background: #1a1a1ato.countdown-timerand change the number color to#fff - Boxed numbers: Add
background: #f5f5f5; padding: 20px; border-radius: 8pxto.countdown-unit - Accent color: Change the number color to your brand color (e.g.,
color: #e63946) - Expired message: Edit the "This offer has ended!" text in the JavaScript
Where to Place Your Countdown Timer
One last tip: Do not fake scarcity. If your countdown resets every time someone visits, people notice and it destroys trust. Use real deadlines for real events.
Want a countdown timer without touching code? Our generator lets you pick your date, choose colors and style, preview it live, and copy the finished code — all from a visual interface.
