Countdown Timer Custom Liquid for Shopify

Introduction

A countdown timer is a powerful way to create urgency and boost conversions on your Shopify store. Using this Custom Liquid snippet, you can easily add a visually appealing, responsive timer to any page, section, or product.

When to Use This

• Limited-time promotions

• Holiday sales or seasonal offers

• Product launches or pre-orders

• Flash sales and marketing campaigns

Code (Custom Liquid + CSS)

<!-- Countdown Section -->
<div id="countdownSection" style="text-align:center; font-family:sans-serif;">
  <h2 id="headlineText" style="margin-bottom:16px;">Limited Time Offer</h2>
  <div id="countdownWrapper" style="display:flex; justify-content:center; gap:12px;">
    <div class="timeBox" style="background:#333; border-radius:8px; padding:12px; width:70px; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center;">
      <div class="number" style="color:#fff; font-weight:600; font-size:24px;">00</div>
      <div class="label" style="color:#fff; font-size:12px;">Days</div>
    </div>
    <div class="timeBox" style="background:#333; border-radius:8px; padding:12px; width:70px; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center;">
      <div class="number" style="color:#fff; font-weight:600; font-size:24px;">00</div>
      <div class="label" style="color:#fff; font-size:12px;">Hours</div>
    </div>
    <div class="timeBox" style="background:#333; border-radius:8px; padding:12px; width:70px; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center;">
      <div class="number" style="color:#fff; font-weight:600; font-size:24px;">00</div>
      <div class="label" style="color:#fff; font-size:12px;">Minutes</div>
    </div>
    <div class="timeBox" style="background:#333; border-radius:8px; padding:12px; width:70px; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center;">
      <div class="number" style="color:#fff; font-weight:600; font-size:24px;">00</div>
      <div class="label" style="color:#fff; font-size:12px;">Seconds</div>
    </div>
  </div>
</div>

<script>
  const deadline = new Date("2026-01-05T23:59:59");
  
  function updateCountdown() {
    const now = new Date();
    const diff = deadline - now;
    if(diff <= 0){
      document.getElementById('headlineText').textContent = "Offer Ended";
      document.querySelectorAll('#countdownWrapper .number').forEach(n => n.textContent = "00");
      return;
    }
    const days = Math.floor(diff / (1000*60*60*24));
    const hours = Math.floor((diff % (1000*60*60*24)) / (1000*60*60));
    const minutes = Math.floor((diff % (1000*60*60)) / (1000*60));
    const seconds = Math.floor((diff % (1000*60)) / 1000);

    const numbers = document.querySelectorAll('#countdownWrapper .number');
    numbers[0].textContent = String(days).padStart(2,'0');
    numbers[1].textContent = String(hours).padStart(2,'0');
    numbers[2].textContent = String(minutes).padStart(2,'0');
    numbers[3].textContent = String(seconds).padStart(2,'0');
  }

  setInterval(updateCountdown, 1000);
  updateCountdown();
</script>

Preview

How to Use

1. Add the Code

   • Copy the HTML and JavaScript above.

   • Paste it into your Shopify Custom Liquid section or Wix Embed/Custom Code section.

2. Set the Deadline

   • Modify the deadline variable in the <script> tag:

const deadline = new Date("2026-01-05T23:59:59");

3. Preview the Countdown

   • Save the page and preview.

   • The numbers will update every second, and the headline will automatically change to “Offer Ended” when the countdown finishes.

4. Adjust Text Visibility (Optional)

   • If you want to hide the headline, simply remove or comment out the <h2 id="headlineText">...</h2> line.

Customizable Parameters

Parameter	Where to Change	Options / Example	Parameter
Headline Text	<h2 id="headlineText">Limited Time Offer</h2>	Any text you want, or leave empty to hide.	Headline Text
Deadline	const deadline = new Date("YYYY-MM-DDTHH:MM:SS");	Set your target date/time. Format must follow ISO string.	Deadline
Box Background Color	.timeBox { background:#333; }	Hex, RGB, or CSS color name. Example: #FF4D4F	Box Background Color
Number Color	.number { color:#fff; }	Any CSS color	Number Color
Label Color	.label { color:#fff; }	Any CSS color	Label Color

Pro Tips

• Use contrasting colors to make the countdown stand out.

• For multiple timers on a page, ensure unique IDs to avoid conflicts.

• Set a time zone consistent with your store audience to avoid confusion.

• Combine with promotional banners for maximum urgency.