Creating a countdown timer in Squarespace 7

Often when building a promotional website, you may have a feature or page that you are building up hype for.  You want your users to all come back when the page is launched in order to drive initial traffic to your new feature.  One common way to keep users engaged and assured that real content is coming, you may want to use a countdown clock.  For example, the countdown clock below (which we will teach you how to create), is counting down to the rebranding of Muno Space as a high fashion company.

The first thing we want to do is add jQuery to your overall site, if you haven't already done so with one of our other tutorials.  To accomplish this, the first thing you want to do is head to Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:


    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Next, we need to insert a Code Block on the page where you want your clock to appear.  Inside the code block, input the following HTML snippet.


<div id="clock"></div>

Now that we have the timer in there, we have to add the Javascript in order to make it actually work on the page.  Click the Settings gear of that page and then head to the Advanced tab.  Copy and paste the code below into your Page Header Code Injection:


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.1.0/jquery.countdown.min.js"></script> <script> $(document).ready(function() { $('#clock').countdown('2020/10/10').on('update.countdown', function(event) { var $this = $(this).html(event.strftime('<div class="timeBlock"> <h1>%-d</h1> <h3>day%!d</h3></div><span class="clockDots">:</span><div class="timeBlock"> <h1>%H</h1> <h3>hour%!H</h3></div><span class="clockDots">:</span><div class="timeBlock"> <h1>%M</h1> <h3>minute%!M</h3></div><span class="clockDots">:</span><div class="timeBlock"> <h1>%S</h1> <h3>second%!S</h3></div>')); }); }); </script>

Your clock should be working, but won't look quite right.  To fix that, we have add a little bit of Custom CSS.  From the main Squarespace menu, click Design → Custom CSS.  In the box, paste in the following code:


#clock { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; text-align: center; position: relative; } .timeBlock h1, .timeBlock h3 { margin: 0px; } #clock span { font-size: 2em; margin-top: 5px; }

Now you have a functioning countdown timer!!!  The sizes of the numbers and labels are determined by your h1 and h3 font sizes, respectively.  If the dots are a bit off, change the margin-top value until it looks right.  This clock can be highly customized, so if you need to change the width, colors, or anything else, the current CSS should be a great starting point  As always, feel free to comment below if you have any questions or comments.