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:
{% 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.
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!
