A countdown timer on your Shopify store can create urgency, encouraging customers to act fast during flash sales or limited-time offers. In this step-by-step tutorial, we’ll show you how to add a custom countdown timer using Liquid and JavaScript—no apps required. Perfect for boosting conversions!

Why Add a Countdown Timer to Your Shopify Store?

Increase Conversions: Urgency motivates quicker purchases.
Enhance Promotions: Highlight flash sales or expiring offers effectively.
Cost-Effective: Skip app subscriptions with custom code.
SEO Benefits: Engaged users improve dwell time, signaling quality to search engines.

For more Shopify customization ideas, visit our Shopify Sections Guide.

‍

Prerequisites

Before starting, ensure you have:

A Shopify account with admin access.
Basic knowledge of HTML, CSS, JavaScript, and Shopify’s Liquid.
A duplicated theme for safety (always back up before editing code).

‍

Step 1: Understand Countdown Timers in Shopify

A countdown timer displays the time remaining until a specified date or event, such as the end of a sale. We’ll create a reusable section that allows store owners to set the end date via the theme customizer and use JavaScript to update the timer in real-time.

Learn more about Liquid in Shopify’s Liquid Reference.

‍

Step 2: Access Your Shopify Theme Editor

Log in to your Shopify admin panel.
Navigate to Online Store > Themes.
Find your active theme, click Actions, then select Edit Code.

‍

Step 3: Create the Countdown Timer Section

We’ll build a custom section that displays a countdown timer with days, hours, minutes, and seconds.

‍

3.1: Create a New Section File

In the theme editor, locate the Sections folder.
Click Add a new section and name it countdown-timer.
Add the following Liquid code:

{% schema %}
{
  "name": "Countdown Timer",
  "settings": [
    {
      "type": "text",
      "id": "timer_title",
      "label": "Timer Title",
      "default": "Hurry! Sale Ends Soon"
    },
    {
      "type": "text",
      "id": "end_date",
      "label": "End Date (YYYY-MM-DD HH:MM:SS)",
      "default": "2025-12-31 23:59:59",
      "info": "Format: YYYY-MM-DD HH:MM:SS (24-hour format)"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f9f9f9"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#333333"
    }
  ],
  "presets": [
    {
      "name": "Countdown Timer",
      "category": "Promotional"
    }
  ]
}
{% endschema %}

<div class="countdown-timer" style="background-color: {{ section.settings.background_color }}; color: {{ section.settings.text_color }};">
  <div class="timer-container">
    {% if section.settings.timer_title != blank %}
      <h2 class="timer-title">{{ section.settings.timer_title }}</h2>
    {% endif %}
    <div class="timer-display" data-end-date="{{ section.settings.end_date }}">
      <div class="timer-block">
        <span class="timer-value days">00</span>
        <span class="timer-label">Days</span>
      </div>
      <div class="timer-block">
        <span class="timer-value hours">00</span>
        <span class="timer-label">Hours</span>
      </div>
      <div class="timer-block">
        <span class="timer-value minutes">00</span>
        <span class="timer-label">Minutes</span>
      </div>
      <div class="timer-block">
        <span class="timer-value seconds">00</span>
        <span class="timer-label">Seconds</span>
      </div>
    </div>
  </div>
</div>

<style>
  .countdown-timer {
    padding: 40px 20px;
    text-align: center;
  }

  .timer-container {
    max-width: 800px;
    margin: 0 auto;
  }

  .timer-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .timer-display {
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .timer-block {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 5px;
    min-width: 80px;
  }

  .timer-value {
    display: block;
    font-size: 28px;
    font-weight: bold;
  }

  .timer-label {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
  }

  @media (max-width: 768px) {
    .timer-display {
      gap: 10px;
      flex-wrap: wrap;
    }

    .timer-block {
      min-width: 60px;
    }

    .timer-value {
      font-size: 20px;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const timers = document.querySelectorAll('.timer-display');
    timers.forEach(timer => {
      const endDate = new Date(timer.dataset.endDate).getTime();

      function updateTimer() {
        const now = new Date().getTime();
        const timeLeft = endDate - now;

        if (timeLeft <= 0) {
          timer.innerHTML = '<p>Offer has ended!</p>';
          return;
        }

        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        timer.querySelector('.days').textContent = days.toString().padStart(2, '0');
        timer.querySelector('.hours').textContent = hours.toString().padStart(2, '0');
        timer.querySelector('.minutes').textContent = minutes.toString().padStart(2, '0');
        timer.querySelector('.seconds').textContent = seconds.toString().padStart(2, '0');
      }

      updateTimer();
      setInterval(updateTimer, 1000);
    });
  });
</script>

Save the file.

‍

Code Breakdown

Schema Settings: Allows customization of the timer title, end date, and colors via the theme customizer.
Liquid Structure: Outputs the timer’s HTML with a title and blocks for days, hours, minutes, and seconds.
CSS Styling: Creates a responsive, centered layout with styled timer blocks.
JavaScript Logic: Calculates time remaining and updates the display every second, stopping when the timer reaches zero.

‍

Step 4: Add the Timer to Your Store

In the theme editor, click Customize (or go to Online Store > Themes > Customize).
Select the page where you want the timer (e.g., Homepage or a specific product page).
Click Add Section in the sidebar.
Choose Countdown Timer under the Promotional category.
Set the end date (e.g., "2025-06-30 23:59:59") and customize the title or colors.
Click Save.

Alternative Method: To add it manually to a specific template, include this in the relevant Liquid file (e.g., index.liquid):

{% section 'countdown-timer' %}

‍

Step 5: Test Your Countdown Timer

Preview your store to ensure the timer displays and counts down correctly.
Verify that the timer stops and shows "Offer has ended!" when the end date is reached.
Test on mobile and desktop to confirm responsiveness.
Double-check the end date format in the customizer (YYYY-MM-DD HH:MM:SS).

‍

Step 6: Customize Further (Optional)

Add a CTA Button: Include a "url" schema field and <a> tag to link to a sale page.
Change Styling: Modify the background-color, font-size, or border-radius in the CSS to match your brand.
Track Performance: Use Shopify Analytics to measure conversion rates during the timer’s active period.

For more customization ideas, explore our Shopify Sections Guide.

‍

Troubleshooting Tips

Timer Not Starting? Ensure the end date is in the future and follows the correct format (YYYY-MM-DD HH:MM:SS).
Display Issues? Check the JavaScript selectors (e.g., .days, .hours) match the HTML classes.
Mobile Overlap? Adjust the gap or min-width in the CSS media query for better spacing.
Theme Conflicts? Test with a default Shopify theme like Dawn to isolate issues.

For additional help, refer to Shopify’s Theme Development Documentation.

‍

Conclusion

Adding a custom countdown timer to your Shopify store is a simple way to drive urgency and boost sales. With the Liquid and JavaScript code provided, you can create a dynamic timer without apps, keeping costs low and control high. Implement it now and watch your flash sales soar!

How to Add a Custom Countdown Timer to Shopify