How to Add Countdown Timers to Squarespace

Heads up: this post may contain affiliate links. In other words, if you make a purchase using my link, you won’t pay a dime more but I’ll earn a small commission. My chips and salsa fund thanks you from the bottom of its heart… er stomach?

Adding countdown timers to your sales page can be an effective way to boost conversion during holiday sales or any other time you’re running a special promotion in your business.

In this tutorial, I’ll show you how you can easily add countdown timers to Squarespace. We’ll use a super cool tool that comes with a plethora of different widgets that can enhance your website. And the best part is that you can use most of the widgets for free or for a super affordable fee.

How to Use Elfsight Apps to Add Countdown Timers to Squarespace

For the purpose of this tutorial, I’ll be using a simple demo website with one of the default Squarespace templates. Let's pretend that our imaginary musician wants to drive urgency and promote the new album so she is running a limited time sale. For that, she needs a countdown timer. And the app, or rather website, that we’ll use for that is Elfsight Apps.

This website has a collection of different apps that you can add to your Squarespace website to make it more feature rich.

They have a ton of different apps, like an Instagram feed, Google reviews, countdown timers, testimonial sliders, Facebook reviews, cookie consent apps, even Yelp reviews, Airbnb reviews, and more.

And they are constantly adding to it, so they're usually my go to when I need to add something to a Squarespace website, and it does not have that feature built in. So what I want to show you today is how you can use the countdown timer to add it to your site. You can watch the video tutorial below or you can scroll down for the written version of the tutorial.

SUBSCRIBE FOR MORE VIDEOS LIKE THIS

Create An Account With Elfsight Apps

The first thing you’ll need to do is go to Elfsight Apps and sign up for an account. Creating an account is free and easy and once you’ve signed up, you can choose which widgets you want to use.

Choose Your Countdown Timer Widget

Countdown timers are pretty great to use during holiday sales, Black Friday sales, or really any time when you want to run a sale on your website. You have several different styles to choose from, as you can see. You can choose between a five minute countdown timer, a launch timer, retirement countdown, which is useful if you're retiring a product or something like that. There’s also a scarcity timer if you have a limited amount of products that you're selling, and of course, there are regular countdown timers.

For this purpose, I'm going to go with a Black Friday sale banner.

Set Up The Countdown Timer Widget

Once you've selected your countdown timer template, click on the button that says continue with this template, and now you can customize it. You can choose the type of the timer: whether it's start to finish, remaining time counter per visitor, or start to finish number counter.

I'll select the start to finish timer which then lets me configure the start time and the end time. Let's say we're running a Halloween sale, so I'm going to select October 25th and we are going to end it on October 31st.

And then you can also configure the time zone to make sure that your timer is displaying correctly.

Choose The Install Location

Now, once you've set up your timer, you can choose where you want to install the banner. If you set install to required position, this will essentially place it wherever you place the code for the widget on your website. This is useful if you want to show it in the middle of your page, for example, for tripwire pages or even sales pages.

Alternatively, you can choose to have it as a static top banner, floating top banner, or floating bottom banner.

I’ll choose the floating top banner for demo purposes.

Customize The Countdown Timer Banner

Once you’ve selected your install locaton, you can customize how the banner looks. This includes customizing the message that displays, the actual counters, as well as what happens when the timer runs out. You can hide the timer, you can show a message that the sale is over, or you can redirect them to a different page on your website. So I'm going to set to hide timer.

If you want to customize the colors of your countdown timer banner, you can do so under counters and labels. Click on the appearance tab in the sidebar and you can choose a different style. There are several to choose from. You can customize the color. You can choose a different theme. You can even animate the counters if you want, or you can leave it as none.

If you’re code-savvy, you can even enter custom CSS if you want to tweak the design even more.

Finally, for the button, you can choose to show a button or hide it, like so. And then you can customize where the link takes them. This would be your sales page or your shop page. You can customize the text on the button and choose whether the link opens up in a new tab and whether the entire timer is clickable. If you set this to no, or if you toggle it off, then only the button is clickable. When you're happy, click on publish.

Choose Your Plan

Once you’ve published your timer widget, you'll be able to choose your countdown timer pricing plan. They do have a free plan, which is available for testing purposes and usually it's limited to only 200 views.

Plus, it carries their branding. So I would not recommend this if you're using this on your website, but their plans start at $5/mo, which is pretty affordable and definitely worth it. This price applies if you pay annually. If you choose the month-to-month option, it will cost you $6/mo.

You can also choose to buy the entire pack of all the apps that they offer, which will cost you $15/mo on an annual plan, or $18/mo if you choose to pay month to month.

So, choose the plan that works for you and then you’ll be ready to install the countdown timer on your Squarespace website.

Install Countdown Timer On Your Squarespace Website

Once you’ve selected your plan, go to your Elfsight Apps dashboard and under My Apps, click on install. This will give you the code that you need. I want to mention that if you click on Squarespace, they will give you a brief rundown of how to install it, but you don't need that because that’s why you’re reading this tutorial 😉.

Copy the code and then go to your Squarespace website. So if you want the countdown timer banner to show on your entire website, then go to website > website tools > code injection. Paste it into the header of your website.

Click save and the banner will show up on any page of your website.

If you don't want to show it on the entire website but you need it on only one specific page, then go to website and then locate the page where you want the banner to show up.

For this tutorial, I’ll choose the new album page. Click the cogwheel icon to access the page settings, then click on advanced, and then paste the code into the header for that specific page. Then click save. This will make the banner visible on that specific page and if you go to any other page on your website, your visitors won’t be able to see it on those pages.

Final Thoughts

And that's essentially how you can add the countdown timer to your Squarespace website with Elfsight Apps. If you want more tips, I have more tutorials linked for you down below and if you’re looking for a step-by-step walkthrough of how to launch your Squarespace website, I have a free Squarespace launch roadmap that you can download. All you have to do is click the image below and I’ll send it to your inbox ASAP.