Create Shopify product countdown timer without app

The countdown timer is one of the most common features of any e-commerce website. It’s powerful in pushing online shoppers into making faster purchase decisions. Shopify product countdown timer is an ideal solution for this. Unfortunately, Shopify doesn’t support you to implement out of the box. Therefore, most of the merchants find a solution through a countdown timer Shopify app.

In today’s post, let me show you how to create a Shopify product countdown timer for your store without any app. This is surprisingly easy to do!

Create a countdown timer on Shopify for free

We’ll use the countdown timer Shopify code for this tutorial. And below is the end result:

Step 1: Configure tag in product settings

Use this tag Time_2021/03/09 20:25:00 to add to product settings.

Go to your Online Store > Products

Choose any product you want to apply countdown timer.

You can change the param for this tag as you wish. Check the following:

Step 2: Create a snippet for Shopify product countdown timer

From your Online Store > Themes > Actions > Edit code > Snippets > Add a new snippet.

Then, name your new snippet whatever you want. In this case, I name it “countdown”. Next, paste the following code into your snippet file:

{% capture time_check %}
{% for tag in product.tags %}
{%if tag contains 'Time_' %}
{% assign tag_time = tag | split : 'Time_' | last %}
{{ tag_time }}
{% endif %}
{%  endfor %}
{% endcapture %}
{% if tag_time %}
<div class="countdown_wrap">
  <div class="countdown_time" id="js_set_time" >
    <div class="timer-block">
      <span class="countdown_number js-days">00</span>
      <span class="countdown_title">Days</span>
    </div>
    <div class="timer-block">
      <span class="countdown_number js-hours">00</span>
      <span class="countdown_title">Hours</span>
    </div>
    <div class="timer-block">
      <span class="countdown_number js-minutes">00</span>
      <span class="countdown_title">Minutes</span>
    </div>
    <div class="timer-block">
      <span class="countdown_number js-seconds">00</span>
      <span class="countdown_title">Seconds</span>
    </div>
  </div>
</div>
<style>
  .countdown_time{
    margin-top: 30px;
        background: #efefef;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  .countdown_time .timer-block{
    width: 25%;
  }
  .countdown_time .timer-block span{
    display: block;
        text-align: center;
  }
</style>

<script type="text/javascript">
  var settime = "{{ tag_time }}";
  (function (){
    if(settime.length  > 0 ){
      var countDownDate = new Date(settime).getTime();
      var x = setInterval(function() { 
        // Get todays date and time
        var now = new Date().getTime(); 
        // Find the distance between now an the count down date
        var distance = countDownDate - now; 
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        if(days < 10 )
        {
          var days = '0' + days;
        }else{
          days = days;
        }
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        if(hours  < 10 )
        {
          var hours = '0' + hours;
        }else{
          hours = hours;
        }
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        if(minutes  < 10 )
        {
          var minutes = '0' + minutes;
        }else{
          minutes = minutes;
        }
        var seconds = Math.floor((distance % (1000 * 60)) / 1000); 
        document.querySelector('.js-days').innerText = days;
        document.querySelector('.js-hours').innerText = hours;
        document.querySelector('.js-minutes').innerText = minutes;
        document.querySelector('.js-seconds').innerText = seconds;
        if (distance < 0) {
          clearInterval(x);
          document.getElementById("js_set_time").innerHTML = "Out of date";
        }
      }, 1000);
    }
  })();
</script>
{% endif %}
          

Step 3: Check the product template

Check if the product template currently includes any section or not.

To do this, go to file product.liquid in the Templates directory.

Use Ctrl + F (on Windows) or Command + F (on Mac) to find for these characters:

{% section 

If there’s any section included, you need to go to that section to place the snippet.

Here is the product.liquid file on my Shopify store:

There’re 2 sections included: product template and product recommendation section.

Step 4: Include recently added snippet

• If you want to put the countdown timer associated with the product information, go with product-template.liquid. 
• But, if you want to add the countdown timer in the product recommendation section, go to product-recommendation.liquid file.

Now, I want the countdown timer to appear along with the product information, so I enter the product-template.liquid file in the Sections directory. 

Next, I put the following code at the place I want the countdown timer to appear.

{% include 'countdown' %} 

Now I want to have the countdown timer above the product title. This is how I do it:

You can include the snippet file wherever you want.

Notice: Make sure the param countdown is the same as the snippet name.

This article is a part of an ebook that provides a step-to-step guide to customize your Shopify theme, feel free to grab the full free eBook: Top 12 DIY Shopify customizations to drive sales

Conclusion

That’s all, you can see the instructions in the video here. I hope this detailed tutorial for the Shopify product countdown timer can help you a little in kicking your Shopify sales into high gear. 

We also have many other guides to help you edit or add elements to your Shopify store. So don’t hesitate to spend some time checking them and finding useful tips.

If you have any issues in trying this, feel free to talk to us!