Creating A Countdown Timer In Squarespace

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 to come back when the page is launched 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 SquareStash as a high fashion company.

JS
<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.

HTML
<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:

Jquery
<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('2019/01/01').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:

CSS
    #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.