Shopify Countdown Timer

About this module

A countdown section for launches and sales with days/hours/minutes/seconds boxes, set via a date setting.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-countdown, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-countdown` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <section class="mh-countdown" style="background: {{ section.settings.background }}" data-end="{{ section.settings.end_date }}">
     {% if section.settings.heading != blank %}
       <h2 class="mh-countdown-title">{{ section.settings.heading }}</h2>
     {% endif %}
     <div class="mh-countdown-grid">
       <div class="mh-cd-unit"><span class="mh-cd-num" data-unit="days">00</span><span class="mh-cd-label">Days</span></div>
       <div class="mh-cd-unit"><span class="mh-cd-num" data-unit="hours">00</span><span class="mh-cd-label">Hours</span></div>
       <div class="mh-cd-unit"><span class="mh-cd-num" data-unit="mins">00</span><span class="mh-cd-label">Minutes</span></div>
       <div class="mh-cd-unit"><span class="mh-cd-num" data-unit="secs">00</span><span class="mh-cd-label">Seconds</span></div>
     </div>
   </section>
   
   <script>
     (function () {
       var el = document.querySelector('.mh-countdown');
       if (!el) return;
       var end = new Date(el.dataset.end + 'T00:00:00').getTime();
       if (isNaN(end)) return;
       function pad(n) { return String(n).padStart(2, '0'); }
       function tick() {
         var diff = Math.max(0, end - Date.now());
         el.querySelector('[data-unit="days"]').textContent = pad(Math.floor(diff / 86400000));
         el.querySelector('[data-unit="hours"]').textContent = pad(Math.floor(diff / 3600000) % 24);
         el.querySelector('[data-unit="mins"]').textContent = pad(Math.floor(diff / 60000) % 60);
         el.querySelector('[data-unit="secs"]').textContent = pad(Math.floor(diff / 1000) % 60);
       }
       tick();
       setInterval(tick, 1000);
     })();
   </script>
   
   {% schema %}
   {
     "name": "MH Countdown",
     "tag": "section",
     "settings": [
       { "type": "text", "id": "heading", "label": "Heading", "default": "Sale ends soon" },
       { "type": "text", "id": "end_date", "label": "End date (YYYY-MM-DD)", "default": "2027-01-01" },
       { "type": "color", "id": "background", "label": "Background", "default": "#fafafa" }
     ],
     "presets": [{ "name": "MH Countdown", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.