How to Add a Free Countdown Timer to Squarespace (Easy!)

The “fear of missing out,” or FOMO, can be a powerful marketing tool. You can use it to entice customers to buy your products or convert on your landing pages.

Here’s an interesting stat – did you know that 60% of Millennials say they’ve bought something online after experiencing FOMO?

You can use FOMO on your Squarespace site by adding a countdown timer. This is really easy to do – all you need is a snippet of custom code.

Here’s how to add a countdown timer to Squarespace in 60 seconds!

Guide to adding a free countdown timer for Squarespace

Step 1: Add a code block

Go to the page you want to add your countdown timer to and click Edit.

Scroll to the section you want to add your countdown timer to and click the blue plus (+) button.

Choose Code from the block menu.

Step 2: Add your code

Paste the following code into your code block. Make sure the block is in HTML mode and Display Source Code is toggled off.

// Styling and font size
<div id="countdown" style="text-align: center; font-size: 40px; color: #000000;"></div>

<script>
// Set the date we're counting down to
var targetDate = new Date("Dec 31, 2026 23:59:59").getTime();

// Update the countdown every 1 second
var countdownFunction = setInterval(function() {
    // Get today's date and time
    var now = new Date().getTime();
    
    // Find the distance between now and the target date
    var distance = targetDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    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);
    
    // Display the countdown
    document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
    
    // When the countdown ends
    if (distance < 0) {
        clearInterval(countdownFunction);
        document.getElementById("countdown").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

You’ll get something that looks like this:

Don’t worry if you can’t see the countdown timer straight away – you can preview it in safe mode or take a look once you save and exit your page.

Step 3: Edit your code

Now that your basic code is up and running, you can tweak it to suit your needs.

Start by amending the date and time you want your countdown timer to run down to. You can do this by amending this section of code:

You can also style the size, color, and justification of your timer by amending the code at the top.

If you want to amend the hex code that controls the color, this guide will help.

Step 4: Customize your countdown timer with Spark Plugin

Now you know how to add a countdown timer to Squarespace. But let’s look at even more ways you can transform it.

Spark Plugin has over 100 code-free customizations to help you transform the look and feel of your content blocks.

Here are three of my favorite ways to make your countdown timer pop!

Add an animation

Want to make your free countdown timer for Squarespace stand out even more? Why not add an animation?

You can make your countdown timer hover, shake, or even spin around 360 degrees!

Hide your block on mobile

There might be times that you want your timer to appear on desktop and be hidden on mobile.

This cool customization lets you hide specific blocks on mobile to create a neater, more responsive experience.

Insert a gradient background

Do you want a fabulous background for your countdown timer to sit on? Give this animated gradient background a try.

Choose the colors you want your background to cycle through, add your timer, and you’ve got a brilliant page to get your visitors’ attention.

Looking for more ways to get your Squarespace site the way you want it? Check out Spark’s Palette – the blog that talks about everything Squarespace!