How to Create a Custom Countdown Bar Section in Shopify (ZHD Countdown Bar)

A countdown bar is one of the simplest and most effective ways to boost urgency and increase conversions in your Shopify store. In this tutorial, you’ll learn how to create a custom “ZHD Countdown Bar” section — a fully editable, sticky countdown banner you can add to any Shopify theme.

By the end, you’ll have a beautiful, responsive countdown timer with custom text, colors, sticky behavior, and even expiration messages — all manageable from the Shopify theme editor.

🧰 What You’ll Need

• A Shopify theme with access to Edit Code (e.g., Dawn or Horizon)
• Basic familiarity with Shopify’s Liquid templates
• About 10 minutes!

⚙️ Step 1: Create the Section File

1. From your Shopify admin, go to Online Store → Themes → Edit Code.
2. Inside the Sections folder, click “Add a new section”.
3. Name it:
   

   zhd-countdown-bar.liquid

🧩 Step 2: Paste the Countdown Section Code

Paste the following complete code into your new file:

{%- for block in section.blocks -%}
  {%- case block.type -%}
      {% when 'fancy-countdown' %}
          {% render "zhd-countdown" %}
  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "ZHD Countdown bar",
  "settings": [],
  "blocks": [
    {
      "type": "fancy-countdown",
      "name": "fancy-countdown",
      "limit": 1,
      "settings": [
        { "type": "color", "id": "color_bar_bg", "label": "Background color", "default": "#000000" },
        { "type": "color", "id": "ct_content_color", "label": "Content color", "default": "#ffffff" },
        { "type": "text", "id": "main_text", "label": "Main Text", "default": "Hurry! Sale ends soon" },
        { "type": "checkbox", "id": "sticky_enable", "label": "Sticky countdown bar?", "default": true },
        { "type": "range", "id": "countdoownbar_position", "min": 0, "max": 100, "step": 1, "unit": "px", "label": "Sticky Position (Desktop)", "default": 10 },
        { "type": "range", "id": "countdoownbar_position_mobile", "min": 0, "max": 100, "step": 1, "unit": "px", "label": "Sticky Position (Mobile)", "default": 10 },
        { "type": "text", "id": "days_show_text2", "label": "Show Days?", "default": "yes", "info": "Type 'yes' or 'no'" },
        { "type": "text", "id": "custom_date", "label": "Date", "default": "Dec 31, 2025" },
        { "type": "text", "id": "timer", "label": "Timer", "default": "23:59:59" },
        { "type": "text", "id": "timer_end_text", "label": "Offer end text", "default": "Expired!" }
      ]
    }
  ],
  "presets": [
    {
      "name": "ZHD Countdown bar",
      "category": "ZHD Sections",
      "blocks": [{ "type": "fancy-countdown" }]
    }
  ]
}
{% endschema %}

This sets up a dynamic Shopify section with fully customizable options like colors, text, date/time, and sticky behavior.

🎨 Step 3: Add the Styling and Timer Logic

Below your schema, paste the following CSS and JavaScript code:

{%- for block in section.blocks -%}
<style>
/* General layout styling */
.zhd-fancy-countdown {
  min-height: 65px;
  display: block;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: {{ block.settings.color_bar_bg }};
}

.zhd-fancy-countdown .alert-bar {
  color: {{ block.settings.ct_content_color }};
  padding: 10px;
}

/* Sticky positioning */
{% if block.settings.sticky_enable %}
.alert-bar-sticky {
  position: fixed;
  top: {{ block.settings.countdoownbar_position }}px;
  width: 100%;
  z-index: 1000;
  background: {{ block.settings.color_bar_bg }};
}
@media (max-width: 767px) {
  .alert-bar-sticky {
    top: {{ block.settings.countdoownbar_position_mobile }}px !important;
  }
}
{% endif %}
</style>

<div class="zhd-fancy-countdown" id="section__{{ section.id }}">
  <div class="alert-bar" id="alert-bar">
    <h3 style="color:{{ block.settings.ct_content_color }}">{{ block.settings.main_text }}</h3>
    <div id="selectCountdown"></div>
  </div>
</div>

<script>
  var FNtimeEndText = `{{ block.settings.timer_end_text }}`;
  var FNtimeCustom = `{{ block.settings.custom_date }} {{ block.settings.timer }}`;
  var FNdateShowText2 = `{{ block.settings.days_show_text2 }}`;
  var FNcountDownDate = new Date(FNtimeCustom).getTime();

  var x = setInterval(function() {
    var now = new Date().getTime();
    var FNdistance = FNcountDownDate - now;

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

    if (FNdistance < 0) {
      clearInterval(x);
      document.getElementById("selectCountdown").innerHTML = FNtimeEndText;
      return;
    }

    document.getElementById("selectCountdown").innerHTML =
      (FNdateShowText2 === 'yes'
        ? `${days}d : ${hours}h : ${minutes}m : ${seconds}s`
        : `${hours}h : ${minutes}m : ${seconds}s`);
  }, 1000);
</script>
{%- endfor -%}

🧠 Step 4: Add the Countdown to Your Theme

1. Go to your Theme Editor (Customize).
2. Click Add section → find ZHD Countdown bar.
3. Customize:
   • Background color
   • Text color
   • Countdown date/time
   • Sticky position (optional)
   • “Show Days?” toggle

🧲 Step 5: Test and Preview

Hit Save and Preview your store. The countdown should appear where you added it. If “Sticky” is enabled, it will follow as you scroll.

🧡 Optional Enhancements

• Add a “Shop Now” button inside the bar
• Use gradient backgrounds
• Change font size for mobile
• Automate date/time using metafields

✅ Final Result

You now have a fully functional, customizable Shopify countdown bar — reusable across themes and pages. It’s fast, flexible, and perfect for flash sales or limited-time promotions.

Pro Tip: Save this section as your own reusable snippet to offer clients as part of your Shopify service packages!

Written by Zahidul Islam | Shopify Custom Design Tutorials