Welcome to CodeCrew Infotech

shape shape
Shape Shape Shape Shape

How to Add or Custom Countdown timer on Shopify

The countdown timer is one of the most common features of any e-commerce website. It’s powerful in pushing online shoppers into making faster purchase decision. Shopify product countdown timer is an ideal solution for this.

In today’s post, let me show you how to create a Shopify product countdown timer for your store without any app. This is surprisingly easy to do!

Add countdown timer using code

Go to Shopify admin > Themes > Edit code


Create new Snippet file with name :- shopify-countdown-timer


Then paste the following code into it and click Save.

{% 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 class="timer-block">
      <span class="timer-block__num js-timer-hours">00</span>
      <span class="timer-block__unit">Hours</span>
    <div class="timer-block">
      <span class="timer-block__num js-timer-minutes">00</span>
      <span class="timer-block__unit">Minutes</span>
    <div class="timer-block">
      <span class="timer-block__num js-timer-seconds">00</span>
      <span class="timer-block__unit">Seconds</span>
/* styles for timer */
  .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__unit {
    display: block;
    text-align: center;
<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)
{% endif %}


Put recently added snippet to product page(main-product.liquid) as per your position requirments.

{% include 'shopify-countdown-timer',
  title: "Special Offer End In",
  end_date: "Sep 30, 2021"

Note:- Different theme have different product detail file