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

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:

          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.

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!