How to create a countdown timer in Squarespace
Are you planning a product launch? Counting down to a special event? Or maybe you're creating some excitement for an upcoming sale? Today I'm going to show you how to add something SUPER useful to your site: a fully customizable countdown timer!
Let's face it – Squarespace doesn't have a built-in countdown feature, but that doesn't mean we can't create one ourselves. The good news is that it's way easier than you might think!
Quick heads-up before we dive in: This tutorial requires a JavaScript code block, which means you'll need to be on a Squarespace plan that's more advanced than the Basic plan. If you're on Business or higher, you're all set to go!
A countdown timer creates a sense of urgency and excitement on your website. It's perfect for:
Product launches or pre-orders
Flash sales or limited-time offers
Event registrations
Webinar signups
Coming soon pages
Plus, it's just plain fun to watch those numbers tick down! 😉 There's something psychologically satisfying about seeing a live countdown that makes people want to take action.
To add this free countdown timer plugin to your Squarespace site, check out the video to see how it works, and follow the steps below to grab the code and start counting ⏰
Step 1: Add a Code Block
First things first, let's get that code block on your page:
Click "Edit" on your page
Select "Add Block"
Search for and add a "Code" block
Place it wherever you want your countdown to appear
Step 2: Add the Code
Now comes the fun part! In the code block, delete any placeholder code and paste in this JavaScript countdown timer code:
<div class="timer-background">
<div class="countdown-wrapper">
<div class="countdown-item">
<span id="days">00</span>
<span>Days</span>
</div>
<div class="countdown-item">
<span id="hours">00</span>
<span>Hours</span>
</div>
<div class="countdown-item">
<span id="minutes">00</span>
<span>Minutes</span>
</div>
<div class="countdown-item">
<span id="seconds">00</span>
<span>Seconds</span>
</div>
</div>
</div>
<script>
function updateCountdown() {
const target = new Date('December 31, 2025 23:59:59 PST-0000').getTime();
function update() {
const now = new Date().getTime();
const diff = target - now;
document.getElementById('days').textContent = Math.floor(diff / (1000 * 60 * 60 * 24));
document.getElementById('hours').textContent = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
document.getElementById('minutes').textContent = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
document.getElementById('seconds').textContent = Math.floor((diff % (1000 * 60)) / 1000);
}
update();
setInterval(update, 1000);
}
updateCountdown();
</script>
<style>
.timer-background {
min-height: 300px; /* Adjust this value to control background height */
background-color: #f5f5f5; /* Light gray background - change as needed */
display: flex;
align-items: center;
justify-content: center;
}
.countdown-wrapper {
display: flex;
justify-content: center;
gap: 20px;
font-family: var(--body-font-font-family);
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 80px;
}
.countdown-item span:first-child {
font-size: 2.5rem;
font-weight: bold;
color: #333;
}
.countdown-item span:last-child {
font-size: 0.875rem;
color: #666;
text-transform: uppercase;
margin-top: 5px;
}
</style>Step 3: Customize Your End Date and Message
Let's make this countdown YOUR countdown! Here are the key parts to update:
Change the "Times Up" message - Find the line that says
<div id="times-up-message">TIMES UP!</div>and replace "TIMES UP!" with whatever message you want to display when the countdown is complete.Set your countdown date and time - Look for this line:
var countDownDate = new Date("Dec 31, 2025 23:59:59 PST").getTime();Update it with your own target date using this format:
Month (three letters): Jan, Feb, Mar, etc.
Day: 1-31
Year: Full four digits
Time: In 24-hour format (23:59:59 = 11:59:59 PM)
Time Zone: Use the standard abbreviation (PST, EST, etc.)
Step 4: Style It to Match Your Brand
This is where the fun really happens - making it look like it belongs on YOUR site!
Find the CSS section (everything between the <style> tags) and customize these elements:
Background color: Change
background-color: #f7f7f7;to match your site's color schemeNumber style: Update the
.countsection:Font size:
font-size: 48px;(bigger or smaller as you prefer)Font weight:
font-weight: 700;(higher numbers = bolder text)Color:
color: #000;(use your brand colors here!)
Label style: Update the
.labelsection:Font size:
font-size: 16px;Color:
color: #666;
"Times Up" message: Customize the
#times-up-messagesection:Font size:
font-size: 48px;Color:
color: #ff0000;(red by default, but change it to match your site!)
Step 5: Save and Test
After you've made all your customizations:
Click "Save"
Exit the editor
Watch your countdown timer come to life!
Super Important Tip: Test your countdown with a date that's already passed to make sure your "Times Up" message displays correctly. Then change it back to your actual countdown date when you're satisfied!
Troubleshooting Tips
If your countdown isn't showing up correctly, check these common issues:
Date format: Make sure you've formatted the date correctly (Month Day, Year Hour:Minutes:Seconds TimeZone)
Code block settings: Double-check that you're using a Code Block, not a Markdown block
Plan type: Remember that JavaScript requires a Business plan or higher on Squarespace
Go Wild with Customization!
The code I've provided is just a starting point! You can customize this countdown timer in countless ways:
Add a gradient background instead of a solid color
Add a border or drop shadow to make it pop
Include a call-to-action button below it
Don't be afraid to experiment and make it your own. That's what makes your site unique!
What Will You Count Down To?
I'd love to know how you're planning to use your new countdown timer! Drop me a comment below or tag me on Instagram @thinkinsidethesquare to show me your creation.
