How to Add Countdown Timer in Shopify Store for Free

/ Blog

A cart countdown timer is a powerful marketing tool that e-commerce stores use to create urgency, pushing customers to complete their purchases quickly. Displayed on the cart page, this timer shows the remaining time before a deal or offer expires, encouraging swift action from shoppers.

Adding a Cart Countdown Timer Without an App

If you prefer not to use an app, you can add a cart countdown timer to your Shopify store by inserting custom code directly into your theme:

  1. Access the Code Editor:
    • Go to your Shopify admin panel.
    • Navigate to “Online Store” > “Themes.”
    • Select the theme you want to modify and click “Actions” > “Edit Code.”
  2. Create a Snippet:
    • In the code editor, find the “Snippets” folder on the left side.Click on “Add New Snippet” and name it countdown.liquid.Insert the following code into the new snippet file:
{% if end_date != blank %}

<!-- Morosoft Technologies: Custom Countdown Timer Implementation -->
<!-- This timer creates a sense of urgency by displaying a countdown on the cart page, encouraging customers to complete their purchases quickly. -->

<div class="timer" style="background: #000; padding: 10px 10px 15px 10px; margin: 10px auto; color:#fff; border-radius: 10px; width: 50%; text-align: center;">
    
    <!-- Timer Title: Displayed if the 'title' variable is not blank -->
    {% if title != blank %}
    <h4 class="timer__title" style="font-weight: 800; font-size: 20px; color: white;">{{ title }}</h4>
    {% endif %}
    
    <!-- Timer Display: Contains minutes and seconds, styled for a sleek, modern look -->
    <div class="timer-display" style="display: flex; justify-content: space-between; margin-top: 5px;">
        <div class="timer-block" style="width: 50%; padding: 0 10px;">
            <span class="timer-block__num js-timer-minutes" style="display: block; text-align: center;">10</span>
            <span class="timer-block__unit" style="display: block; text-align: center;">Minutes</span>
        </div>
        <div class="timer-block" style="width: 50%; padding: 0 10px;">
            <span class="timer-block__num js-timer-seconds" style="display: block; text-align: center;">00</span>
            <span class="timer-block__unit" style="display: block; text-align: center;">Seconds</span>
        </div>
    </div>
</div>

<!-- JavaScript for Countdown Logic -->
<!-- This script calculates the remaining time and updates the timer display. Once the time is up, it refreshes the page. -->
<script type="text/javascript">
    var second = 1000,
    minute = second * 60;
    var countDown = new Date().getTime() + (minute * 10),
    x = setInterval(function() {
        var now = new Date().getTime(),
        distance = countDown - now;
        document.querySelector('.js-timer-minutes').innerText = Math.floor((distance % (minute * 10)) / (minute)),
        document.querySelector('.js-timer-seconds').innerText = Math.floor((distance % (minute)) / second);
        if (distance < 0) {
            clearInterval(x);
            location.reload();
        }
    }, second)
</script>

<!-- End of Morosoft Technologies Countdown Timer -->
{% endif %}
  1. Integrate the Snippet into Your Cart Page:
    • Still in the code editor, locate the cart.liquid file in the “Templates” folder.If cart.liquid doesn’t exist, find the appropriate file that contains your cart page code.Add the following code to the location where you want the countdown timer to appear:
{% include 'countdown',

title: "Hurry! Limited time offer.",

end_date: "Sep 12, 2024 01:59:00"

%}

Watch the Tutorial

Related Posts