How to create a Sales Countdown Timer in Shopify without app
Countdown timer is a popular featured appear on almost store. It is a powerful technique to push online shoppers into making faster decisions on purchases they are thinking about. However, it’s not something that Shopify enables you to implement out of the box. Therefore, the most efficient method to add a countdown timer in Shopify is to use an app. In this tutorial, I would like to show you how to add a simple Sale Countdown Timer to your Shopify theme. This is very easy and step by step detail:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Snippets directory, click Add a new snippet.
- Give your snippet the name huratips-countdown-timer and click Create snippet.
- After creating a new snippet, paste the following code into it and Save snippet file.12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879{% if end_date != blank %}<div class="timer">{% if title != blank %}<h4 class="timer__title">{{ title }}</h4>{% endif %}<div class="timer-display"><div class="timer-block"><span class="timer-block__num js-timer-days">00</span><span class="timer-block__unit">Days</span></div><div class="timer-block"><span class="timer-block__num js-timer-hours">00</span><span class="timer-block__unit">Hours</span></div><div class="timer-block"><span class="timer-block__num js-timer-minutes">00</span><span class="timer-block__unit">Minutes</span></div><div class="timer-block"><span class="timer-block__num js-timer-seconds">00</span><span class="timer-block__unit">Seconds</span></div></div></div><style>.timer {background: #f6fafd;padding: 10px;margin: 10px 0;}.timer--expired {display: none;}.timer__title {@extend .paragraph;text-align: center;}.timer-display {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;margin-top: 5px;}.timer-block {position: relative;width: 25%;padding: 0 10px;&:not(:last-child):after {content: ':';position: absolute;right: 0;top: 3px;}}.timer-block__num,.timer-block__unit {display: block;text-align: center;}</style><script type="text/javascript">var second = 1000,minute = second * 60,hour = minute * 60,day = hour * 24;var countDown = new Date('{{- end_date -}}').getTime(),x = setInterval(function() {var now = new Date().getTime(),distance = countDown - now;document.querySelector('.js-timer-days').innerText = Math.floor(distance / (day)),document.querySelector('.js-timer-hours').innerText = Math.floor((distance % (day)) / (hour)),document.querySelector('.js-timer-minutes').innerText = Math.floor((distance % (hour)) / (minute)),document.querySelector('.js-timer-seconds').innerText = Math.floor((distance % (minute)) / second);}, second)</script>{% endif %}
- Click on the product-template.liquid file located within the Sections folder or the product.liquid file located within the Templates folder. Now, include snippet file to anywhere you want it display.1234{% include 'huratips-countdown-timer',title: "Special Offer End In",end_date: "Dec 31, 2019"%}
- Click Save and you’re done.
Notice:
- You can change title param to any content you want.
- With end_date params, you must enter it with the correct format: Month (shorten) Date, Year and MUST be in future. For example, today is December 30, 2019, you can enter: Dec 31, 2019.
Actually, you can put it everywhere in your theme. Just remember to follow the correct structure and notice.
Hello! Thank you for the code, this has been really helpful for my website! Is there a way to countdown to a specific time of day? For example 6pm BST? Thanks
Hi Ellie,
Since this code uses the getTime() function, you have the ability to pass additional parameters into the function.
The author uses date:
end_date: “Dec 31, 2019”
So if you wanted to end at a specific time on that date, you could modify it to look like this:
end_date: “Dec 31, 2019 09:00:00” (aka, Dec 31, 2019 at 9AM).
Additionally, if you want this to work correctly in all timezones, you can append a GMT offset
end_date: “Dec 31, 2019 09:00:00 UTC-7” which would mean the timer ends at 9AM Mountain Standard Time.
I know this answers a bit late, but hopefully it can help a person of the future.
Best, and please let me know if any of the info I’ve provided is incorrect or assumes faulty logic – this approach seemed to work for me.
Hi, The code display days constantly as 41 – can you please help me asap
What is your site? Can I check it?
It’s there any way to set end date: to =today + 10 days?