How to Add a Countdown Timer in Squarespace Website – Free Plugin Tutorial

Jan 10

How to Add a Countdown Timer in Squarespace Website 7.1 – Free Plugin Tutorial

00
Days
00
Hours
00
Minutes
00
Seconds

Countdown timers are a proven way to capture attention and motivate visitors to take action. By displaying the remaining time in a visually appealing format, you can create urgency and highlight important deadlines.

This tutorial is beginner-friendly and works perfectly with Squarespace version 7.1.

Features of This Countdown Timer Plugin

Fully responsive and works on all devices.
Easy to integrate into Squarespace with minimal effort.
Customizable colors, fonts, and layout.
Displays time in days, hours, minutes, and seconds.
Completely free to download and use.

Step-by-Step Guide to Adding a Countdown Timer

Follow these simple steps to integrate the countdown timer into your Squarespace website.

Step 1: Log In and Edit Your Page

Log in to your Squarespace account.
Navigate to the page where you want the countdown timer to appear.
Click Edit to open the page editor.

Step 2: Add a Code Block

Select the section where you'd like the timer to display.
Click the + icon to add a content block.
Choose Code from the available options.

How to Add a Countdown Timer in Squarespace Website – Free Plugin Tutorial

Step 3: Paste the HTML, CSS & JS

Copy and paste the following code into the Code Block:

The best Squarespace Countdown Timer plugin for website

<!-- Add this HTML where you want the timer to appear -->
<div class="countdown-container">
    <div class="countdown-box">
        <div id="countdown-days" class="flip-number">00</div>
        <div class="label">Days</div>
    </div>
    <div class="countdown-box">
        <div id="countdown-hours" class="flip-number">00</div>
        <div class="label">Hours</div>
    </div>
    <div class="countdown-box">
        <div id="countdown-minutes" class="flip-number">00</div>
        <div class="label">Minutes</div>
    </div>
    <div class="countdown-box">
        <div id="countdown-seconds" class="flip-number">00</div>
        <div class="label">Seconds</div>
    </div>
</div>

<style>
.countdown-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.countdown-box {
    text-align: center;
}

.flip-number {
    background-color: #333;
    color: white;
    padding: 20px;
    border-radius: 8px;
    font-size: 2em;
    min-width: 60px;
}

.label {
    margin-top: 10px;
    font-size: 1.2em;
    color: #333;
}
</style>

<script>
// Wrap in IIFE to avoid global scope pollution
(function() {
    // Function to update the countdown
    function updateCountdown() {
        // Set your target date here
        const targetDate = new Date('2025-12-31T23:59:59').getTime();
        
        function update() {
            const now = new Date().getTime();
            const difference = targetDate - now;
            
            if (difference < 0) {
                // If past target date, show zeros
                ['days', 'hours', 'minutes', 'seconds'].forEach(unit => {
                    const element = document.getElementById('countdown-' + unit);
                    if (element) element.textContent = '00';
                });
                return;
            }
            
            // Calculate time units
            const days = Math.floor(difference / (1000 * 60 * 60 * 24));
            const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((difference % (1000 * 60)) / 1000);
            
            // Update DOM elements if they exist
            const units = {
                'days': days,
                'hours': hours,
                'minutes': minutes,
                'seconds': seconds
            };
            
            Object.entries(units).forEach(([unit, value]) => {
                const element = document.getElementById('countdown-' + unit);
                if (element) {
                    element.textContent = value.toString().padStart(2, '0');
                }
            });
        }
        
        // Initial update
        update();
        
        // Update every second
        return setInterval(update, 1000);
    }
    
    // Function to initialize the countdown
    function initializeCountdown() {
        if (document.readyState === 'complete') {
            updateCountdown();
        } else {
            window.addEventListener('load', updateCountdown);
        }
    }
    
    // Start the initialization
    initializeCountdown();
})();
</script>

Step 5: Customize the Timer

Change the Target Date: Update the targetDate in the JavaScript code to match your event.
Style Adjustments: Modify the .flip-number or .label CSS classes to change the font, colors, or layout.

Preview and Publish

Once you've added the code, preview your page to ensure the countdown timer appears and functions correctly. When you're satisfied with the result, publish your changes.