How to Add a Countdown Timer to Your Shopify Store Using Theme App Extensions

Want to add urgency and boost conversions on your Shopify store? A countdown timer is one of the most effective tools to create FOMO (Fear of Missing Out) and drive action from your customers.

In this tutorial, we’ll walk through building a customizable countdown timer using Shopify Theme App Extensions — no third-party apps required.

What You’ll Build

A reusable, configurable countdown timer block that can be embedded in any section of your theme. You’ll be able to:

• Set the countdown’s end date and time.
• Customize the heading text.
• Enable/disable it from Shopify’s Theme Editor.
• Easily deploy and manage it from your app.

Prerequisites

Make sure you have:

• Node.js and npm installed
• A Shopify Partner account
• The Shopify CLI installed
• A development store ready

Step 1: Scaffold a Shopify App

Use Shopify CLI to create your app with a Theme App Extension:

shopify app init
# Choose: Theme App Extension Only

After setup:

cd your-app-name

Step 2: Generate a Theme App Extension

Generate the countdown timer block:

shopify app generate extension
# Select: Theme App Extension
# Name it: Countdown Timer

Step 3: Code the Countdown Block

Open the file:
extensions/countdown-timer/blocks/countdown-timer.liquid

Replace with:

{% if block.settings.enable_timer %}
  <div id="countdown-{{ block.id }}" class="countdown-timer" data-expiry="{{ block.settings.expiry }}">
    <strong>{{ block.settings.heading }}</strong>
    <div class="timer-display"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const block = document.getElementById('countdown-{{ block.id }}');
      if (!block) return;

      const expiry = new Date(block.dataset.expiry).getTime();
      const display = block.querySelector('.timer-display');

      function updateCountdown() {
        const now = new Date().getTime();
        const distance = expiry - now;

        if (distance < 0) {
          display.innerHTML = 'Offer expired!';
          return;
        }

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

        display.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
      }

      updateCountdown();
      setInterval(updateCountdown, 1000);
    });
  </script>
{% endif %}

Step 4: Add Custom Settings

In the same directory, open:
blocks/countdown-timer.schema.json

Paste this schema:

{
  "name": "Countdown Timer",
  "target": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_timer",
      "label": "Enable timer",
      "default": true
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading text",
      "default": "Limited Time Offer"
    },
    {
      "type": "datetime-local",
      "id": "expiry",
      "label": "Countdown end date/time",
      "default": "2025-12-31T23:59"
    }
  ]
}

Step 5: Style It (Optional)

Add styles directly inside the block template or in an assets file:

<style>
  .countdown-timer {
    background: #fff3cd;
    padding: 10px;
    border: 1px solid #ffeeba;
    font-size: 1rem;
    text-align: center;
    margin: 10px 0;
  }
</style>

Step 6: Deploy the Extension

To push your changes to Shopify:

shopify app deploy

Then go to:

Shopify Admin → Online Store → Themes → Customize → App Embeds → Enable Countdown Timer

Bonus Tips

• Use product.tags to show timers only for specific products:

  {% if product.tags contains 'flash-sale' %}
    ...countdown...
  {% endif %}

• Style the timer differently based on page or product.

Conclusion

This lightweight approach avoids the need for bulky third-party apps. It’s fully native, fast, and tailored to your Shopify theme.