Best Way to Add a Countdown Timer Above the Add to Cart Button?

[williamjoe2]

Hi, I’m looking to add a countdown timer just above the “Add to Cart” button on my product pages to create urgency (Checkout). What’s the best way to do this—custom code or an app? I’d prefer a lightweight solution that doesn’t slow down the site. Any suggestions or tutorials would be appreciated!

[devcoders]

Hello @williamjoe2
Okay, please send me store access. I’ll implement it and update you properly once it’s done.

[TheScriptFlow_1]

Hey @williamjoe2 ,

If you want to show the countdown timer on the product page above the cart button then the best solution is custom code. Because we can customize it based on your requiments.

Would you like to share the store url so that based on I can provide you solution code and show you on how to implement it in your store.

[Elfsight.Marketing]

Hey!
I see no one mentioned this yet, but using an app can also be a great solution - especially if you want something lightweight and easier to manage than custom code.

Apps give you:

• A visual editor to customize the look and behavior of the timer

• Easier placement (like right above the Add to Cart button)

• Automatic updates without needing to touch the theme every time

You can check out a few options in the Shopify App Store — one example is our Countdown Timer by Elfsight, but there are plenty of others too depending on your style and needs.

Might be a faster path if you’re not looking to dive into theme code directly.

Cheers,
Elfsight Team

[aditya58singh]

<!-- Countdown Timer Section -->
<section id="countdown-section" style="position: relative; display: flex; justify-content: center; align-items: center; padding: 20px; background: #222; border-radius: 10px; overflow: hidden;">
  <canvas id="particle-canvas" style="position: absolute; top: 0; left: 0; z-index: 1;"></canvas>
  <div style="text-align: center; background: rgba(0, 0, 0, 0.5); padding: 40px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.2); z-index: 2;">
    <h2 style="font-family: 'Montserrat', sans-serif; font-size: 2em; margin-bottom: 20px; color: #fff;">Countdown to New Year</h2>
    <div id="timer" style="font-family: 'Roboto Mono', monospace; font-size: 3em; color: #ffd700;">Loading...</div>
  </div>
</section>

<script>
  // Target date
  const targetDate = new Date("Jan 1, 2026 00:00:00").getTime();

  // Update countdown every second
  const countdown = setInterval(() => {
    const now = new Date().getTime();
    const distance = targetDate - now;

    if (distance < 0) {
      clearInterval(countdown);
      document.getElementById("timer").innerHTML = "🎉 Happy New Year! 🎉";
      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);

    document.getElementById("timer").innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
  }, 1000);

  // Particle animation
  const canvas = document.getElementById('particle-canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  let particles = [];

  function Particle(x, y, size, color, speedX, speedY) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.speedX = speedX;
    this.speedY = speedY;
  }

  Particle.prototype.update = function() {
    this.x += this.speedX;
    this.y += this.speedY;

    if (this.size > 0.2) this.size -= 0.1;
  }

  Particle.prototype.draw = function() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }

  function createParticles() {
    for (let i = 0; i < 100; i++) {
      let x = Math.random() * canvas.width;
      let y = Math.random() * canvas.height;
      let size = Math.random() * 3 + 1;
      let color = 'rgba(255, 215, 0, 0.5)';
      let speedX = Math.random() * 2 - 1;
      let speedY = Math.random() * 2 - 1;
      particles.push(new Particle(x, y, size, color, speedX, speedY));
    }
  }

  function animateParticles() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < particles.length; i++) {
      particles[i].update();
      particles[i].draw();
      if (particles[i].size <= 0.2) {
        particles.splice(i, 1);
        i--;
      }
    }
    requestAnimationFrame(animateParticles);
  }

  createParticles();
  animateParticles();

  window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    particles = [];
    createParticles();
  });
</script>

Hi, There are lot of apps available for this, but if you want to add through the liquid then you can custom code for this.

You can customize the CSS according to your need.

[WilliamNie]

Hi there!

I think our app, PageUni Countdown Timer, might be exactly what you’re looking for.

We offer a “Product Page Timer” type that lets you easily add a countdown timer right above the Add to Cart button.

Our app includes 200+ ready-to-use templates (including BFCM-themed designs), extensive customization options to match your store’s style, and advanced targeting features (for example, showing the timer only to customers based on their total spent).

And the best part — all of this is included in our free app.

You can check out our Demo Store to see what the app can do, and below are some of our template previews. Hope this helps !

[devcoders]

Hi @WilliamNie

I’ll implement it using custom code. Please send me the store URL, collaborator code, and also share the design.