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 -%}



  

    
{{ block.settings.main_text }}
    

  



{%- 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