fbpx
HIDE

Create Shopify product countdown timer without app

Boost your sales on Shopify with the countdown timer on the product page. No application used. Step by step tutorial.
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on pinterest
Shopify product countdown timer tutorial

Countdown timer is one of the most common features of any e-commerce websites. 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. 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.

Shopify countdown timer configure tag
Add this tag to product settings

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

countdown timer shopify tag product
You can change param of this tag

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:

countdown timer shopify code
Check if any section included in the file

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:

countdown timer shopify code

You can include the snippet file wherever you want. 

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

Conclusion

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

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

Still have questions?
Hannah Pham

Hannah Pham

Hannah is Content Lead at HappyPoints. She finds writing, designing, and developing all sorts of great content is her true passion. Hannah is the Marketer by day and the reader by night. Meet her on Linkedin.

Amazing!

I will get back to you within a day.

Have a nice time!