Tips to Optimsie Your Site

Create Shopify product countdown timer without app

By Hannah on June 26, 2020 0 Comments

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.

Add this tag to product settings

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

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:


          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:

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:

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!

Leave a comment

Your email address will not be published. Required fields are marked *

Hello, let’s get in touch!

Leave your contact info below
and one of our consultants will be in touch with you shortly.

Holler Box