Black Friday / Cyber Monday Countdown Install

Installing doesn't require an app installation. Just enter your email to get the code for Black Friday / Cyber Monday countdown timer:

Black Friday Instructions

Open your theme code editor
Under the "Sections" folder, click "Add new section"
Name the section "black-friday"
Paste the code below and save
Open your theme editor
Visit homepage and click "Add new section", choose "Black Friday Countdown"

<div class="novo-banner" data-size="{{ section.settings.size }}">
  <div class="novo-text">
    <div class="novo-content">
      <h2>
        <span>Black</span>
        <span>Friday</span>
      </h2>
      <p>
        <span>Countdown</span>
      </p>
    </div>
  </div>
  <div class="novo-counter novo-black-friday">
    <div class="novo-content">
      <div class="novo-time-card">
        <span class="novo-title">Days</span>
        <span class="novo-time novo-days"></span>
      </div>
      <div class="novo-time-card">
        <span class="novo-title">Hours</span>
        <span class="novo-time novo-hours"></span>
      </div>
      <div class="novo-time-card">
        <span class="novo-title">Minutes</span>
        <span class="novo-time novo-minutes"></span>
      </div>
      <div class="novo-time-card">
        <span class="novo-title">Seconds</span>
        <span class="novo-time novo-seconds"></span>
      </div>
      <h3 class="novo-after-countdown">
        {{ section.settings.after_countdown}}
      </h3>
    </div>
  </div>
</div>

var $section = document.querySelector('#shopify-section-' + {{ section.id | json }});

var $days    = $section.querySelector('.novo-days'),
          $hours   = $section.querySelector('.novo-hours'),
          $minutes = $section.querySelector('.novo-minutes'),
          $seconds = $section.querySelector('.novo-seconds'),
          $counter = $section.querySelector('.novo-counter');

function setTime() {
        var day = (1000 * 60 * 60 * 24),
            hour = (1000 * 60 * 60),
            minute = (1000 * 60);
            second = (1000);

var msToGo = saleTimer - nowTimer,
            daysToGo = Math.floor(msToGo / day),
            hoursToGo = Math.floor((msToGo % day) / hour),
            minutesToGo = Math.floor((msToGo % hour) / minute),
            secondsToGo = Math.floor((msToGo % minute) / second);

if (msToGo > 0) {
          $days.innerText     = daysToGo;
          $hours.innerText    = hoursToGo;
          $minutes.innerText  = minutesToGo;
          $seconds.innerText  = secondsToGo;
          $counter.setAttribute('data-complete', 'false');
        } else {
          $counter.setAttribute('data-complete', 'true');
        }

nowTimer += 1000;
      }

setTime();
      setInterval(setTime, 1000);
    })();
</script>

{% schema %}
{
  "name": "Black Friday Countdown",
  "settings": [
    {
      "type": "text",
      "id": "sale_date",
      "label": "Sale Date",
      "default": "2019/11/29"
    },
    {
      "type": "select",
      "id": "size",
      "label": "size",
      "default": "Medium",
      "options": [
        {
          "value": "Small"
        },
        {
          "value": "Medium"
        },
        {
          "value": "Large"
        }
      ]
    },
    {
      "type": "textarea",
      "id": "after_countdown",
      "label": "After Coutdown Message",
      "default": "Happening Now!"
    }
  ],
  "presets": [
    {
      "name": "Black Friday Countdown"
    }
  ]
}
{% endschema %}

Cyber Monday Instructions

Open your theme code editor
Under the "Sections" folder, click "Add new section"
Name the section "cyber-monday"
Paste the code below and save
Open your theme editor
Visit homepage and click "Add new section", choose "Cyber Monday Countdown"

<div class="novo-banner" data-size="{{ section.settings.size }}">
  <div class="novo-text">
    <div class="novo-content">
      <h2>
        <span>Cyber</span>
        <span>Monday</span>
      </h2>
      <p>
        <span>Countdown</span>
      </p>
    </div>
  </div>
  <div class="novo-counter novo-cyber-monday">
    <div class="novo-content">
      <div class="novo-time-card">
        <span class="novo-title">Days</span>
        <span class="novo-time novo-days"></span>
      </div>
      <div class="novo-time-card">
        <span class="novo-title">Hours</span>
        <span class="novo-time novo-hours"></span>
      </div>
      <div class="novo-time-card">
        <span class="novo-title">Minutes</span>
        <span class="novo-time novo-minutes"></span>
      </div>
      <div class="novo-time-card">
        <span class="novo-title">Seconds</span>
        <span class="novo-time novo-seconds"></span>
      </div>
      <h3 class="novo-after-countdown">
        {{ section.settings.after_countdown}}
      </h3>
    </div>
  </div>
</div>

var $section = document.querySelector('#shopify-section-' + {{ section.id | json }});

function setTime() {
        var day = (1000 * 60 * 60 * 24),
            hour = (1000 * 60 * 60),
            minute = (1000 * 60);
            second = (1000);

nowTimer += 1000;
      }

setTime();
      setInterval(setTime, 1000);
    })();
</script>

{% schema %}
{
  "name": "Cyber Monday Countdown",
  "settings": [
    {
      "type": "text",
      "id": "sale_date",
      "label": "Sale Date",
      "default": "2019/12/02"
    },
    {
      "type": "select",
      "id": "size",
      "label": "size",
      "default": "Medium",
      "options": [
        {
          "value": "Small"
        },
        {
          "value": "Medium"
        },
        {
          "value": "Large"
        }
      ]
    },
    {
      "type": "textarea",
      "id": "after_countdown",
      "label": "After Coutdown Message",
      "default": "Happening Now!"
    }
  ],
  "presets": [
    {
      "name": "Cyber Monday Countdow"
    }
  ]
}
{% endschema %}

Log in

Register

Black Friday / Cyber Monday Countdown Install

Black Friday Instructions

Cyber Monday Instructions

Get deals and updates