How to add Cart Countdown Timer on Shopify Store

A cart countdown timer is a marketing tool used by e-commerce stores to create a sense of urgency among customers and encourage them to complete their purchases. It is a timer that is displayed on the cart page of an online store, showing the amount of time left for the customer to complete their purchase before the offer or deal expires.

The countdown timer typically has a visually striking design and is accompanied by a message that emphasizes the urgency of the situation, such as “Hurry! Limited time offer!” or “Don’t miss out on this deal!”. The timer can be set for a specific period, such as 15 minutes or an hour, to create a sense of immediacy and urgency.

The purpose of a cart countdown timer is to persuade customers to make a purchase decision quickly, as they may be motivated to complete their purchase before the timer runs out and they lose the offer. This marketing technique can be effective in increasing conversion rates, reducing cart abandonment, and boosting sales for e-commerce stores.

Add Cart Countdown Timer Without App:

If you want to add a cart countdown timer to your Shopify store without using an app, you can do so by adding a custom code to your cart page. Here are the steps to do it:

1. Go to your Shopify admin panel and click on “Online Store” and then “Themes.”
2. Select the theme you want to add the cart countdown timer to, and click on “Actions” and then “Edit Code.”
3. Now you have to add the Snippet, from the left side, under the snippet option. Click on ADD NEW SNIPPET. Now create countdown.liquid file and insert the below code.

   {% if end_date != blank %}
   
   <div class="timer" style="background: #000; padding: 10px 10px 15px 10px; margin: 10px auto; color:#fff; border-radius: 10px; width: 50%; text-align: center;">
   {% if title != blank %}
   <h4 class="timer__title" style="@extend .paragraph; font-weight: 800; font-size: 20px; color: white;">{{ title }}</h4>
   {% endif %}
   <div class="timer-display" style="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;">
   <div class="timer-block" style="position: relative; 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="position: relative; 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>
   <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>
   {% endif %}

4. Now in the code editor, navigate to the “cart.liquid” file, which is located in the “Templates” folder. If the file does not exist, you have to select the file that contains the code of the CART page.
5. In the cart.liquid file, find the location where you want to add the countdown timer. This could be above the cart summary or below it, depending on your preference. Add the following code to create the countdown timer:

   {% include 'countdown',
   
   title: "Hurry! Limited time offer.",
   
   end_date: "Feb 12, 2023 01:59:00"
   
   %}

Add Cart Countdown Timer Using App:

To add a cart countdown timer on your Shopify store, you can follow these steps:

1. Install a countdown timer app: There are several Shopify apps available in the Shopify app store that can add a cart countdown timer to your store. Some popular options include Countdown Timer Bar, Hurrify ‑ Countdown Timer, and Countdown Timer Ultimate. Choose an app that suits your needs and install it on your store.
2. Set up the timer: Once the app is installed, you can set up the countdown timer according to your preferences. You can choose the duration of the timer, the message that appears with the timer, and the position of the timer on the cart page.
3. Customize the timer: You can also customize the appearance of the timer to match the branding of your store. Most apps offer options to change the color, font, and style of the timer.
4. Test the timer: Once the timer is set up and customized, test it to ensure that it is working correctly. Add a product to the cart and check if the timer is appearing on the cart page.
5. Monitor the results: Monitor the results of the cart countdown timer to see if it is having a positive impact on your sales. You can track the conversion rate of your store before and after adding the timer to determine its effectiveness.

By following these steps, you can easily add a cart countdown timer to your Shopify store and create a sense of urgency among your customers to complete their purchases before the timer runs out.