How To Add Countdown Timer on Product and Cart – Shopify

Adding a countdown timer on your product and cart pages can significantly increase urgency and encourage customers to buy. In this video, I show you how to add a countdown timer to your Shopify store using the Liquid template language.

Adding a countdown timer on your product and cart pages can significantly increase conversions by adding urgency and scarcity. In this video, I’ll show you how to add a countdown timer on Shopify.

Add New Snippet

Add a new snippet called “countdown.liquid” and add following code:

{% 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>
    <!-- code by websensepro.com -->
    <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>
/* styles for timer */
  .timer {
    background: #000;
    padding: 10px 10px 15px 10px;
    margin: 10px 0;
    color:#fff;
    border-radius: 10px;
  }
  .timer--expired {
    display: none;
  }
  .timer__title {
    @extend .paragraph;
    text-align: center;
    color:white;
    font-weight: 800;
    font-size: 20px;
  }
  .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 %}

Add code in main-cart-items.liquid file

Add the following code in the main-cart-items.liquid file on line no.45

{% include 'countdown',

  title: "BLACK FRIDAY SALE ENDS SOON! Order Now with Discounted Pricing",

  end_date: "Nov 12, 2022 20:00:00"
  
%}

Add code in main-product.liquid file

Add the following code in your main-product.liquid file on line number 31 and make sure to update “your-product-handle” value as per your product handle.

{% if product.handle == "your-product-handle" %}
{% include 'countdown',

  title: "BLACK FRIDAY SALE ENDS SOON! Order Now with Discounted Pricing",

  end_date: "Nov 12, 2022 20:00:00"
  
%}

{% endif %}