Countdown timer/clock on password page

Solved
Highlighted
Tourist
9 2 0

Hi, I use Debut theme and will release my homepage on 27/11 and I want to have a countdown timer on the password page? Does anyone know how to add that? I only want a countdown timer, not connected to any product or something like that, only a visual timer.

I hope someone know how to help me.

Regards Daniel

0 Likes
Highlighted
Shopify Staff
Shopify Staff
809 94 134

Hi, @IdealDesign,

Hank here from Shopify.

Having a countdown timer on your password page can build a lot of excitement for customers that come across your store, eager to see what lies beyond the password page!

A very popular app for this function is Coming Soon Page. They advertise on that page that the app can "Use attractive backgrounds and a countdown timer to get your audience excited about the big launch"!

There also may be other ways this may be written into the code for your theme, so if you were to share your store URL then, hopefully, someone with more technical skills in the community will come across this and be able to add some value to you here, but if not, your best bet might be to reach out to one of our Shopify Experts, who you can hire to do almost any custom work on your store.

If you were to reach out to them about this query, they would be able to resolve this issue for you.

I will also move this thread to a more applicable board which may offer more coverage for your post, but if you have any additional questions, let me know!

All the best,

Hank

Hank | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Tourist
9 2 0

This is an accepted solution.

I found how to fix it on this site: https://easycodeguide.com/how-to-add-a-simple-sales-countdown-timer-to-your-shopify-theme.html (I did some modification in the code.)

If someone also searching for this, here is how I did.

I created a new snippet and pasted this code:

{% if end_date != blank %}
<div class="timer">
  {% if title != blank %}
  <h4 class="timer__title">{{ title }}</h4>
  {% endif %}
  <div class="timer-display">
    <div class="timer-block">
      <span class="timer-block__num js-timer-days">00</span>
      <span class="timer-block__unit">Days</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-hours">00</span>
      <span class="timer-block__unit">Hours</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-minutes">00</span>
      <span class="timer-block__unit">Minutes</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-seconds">00</span>
      <span class="timer-block__unit">Seconds</span>
    </div>
  </div>
</div>
<br><br>
<style>
/* styles for timer */
  .timer {
    /*background: #f6fafd;*/
    padding: 10px;
    margin: 10px 0;
  }
 
  .timer--expired {
    display: none;
  }
 
  .timer__title {
    @extend .paragraph;
    text-align: center;
  }
 
  .timer-display {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 5px;
  }
 
  .timer-block {
    position: relative;
    width: 25%;
    padding: 0 10px;
 
    &:not(:last-child):after {
      content: ':';
      position: absolute;
      right: 0;
      top: 3px;
    }
  }
 
  .timer-block__num,
  .timer-block__unit {
    display: block;
    text-align: center;
    font-size: 32px;
    font-weight: 900;
  }
</style>
 
<script type="text/javascript">
  var second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;
 
  var countDown = new Date('{{- end_date -}}').getTime(),
      x = setInterval(function() {
      var now = new Date().getTime(),
          distance = countDown - now;
    document.querySelector('.js-timer-days').innerText = Math.floor(distance / (day)),
      document.querySelector('.js-timer-hours').innerText = Math.floor((distance % (day)) / (hour)),
    document.querySelector('.js-timer-minutes').innerText = Math.floor((distance % (hour)) / (minute)),
    document.querySelector('.js-timer-seconds').innerText = Math.floor((distance % (minute)) / second);
    }, second)
</script>
{% endif %}
And in the password.liquid I added this:
 
{% include 'shopifyexplorer-countdown-timer',
end_date: "Nov 27, 2020"
%}
Now I got the function I wanted, just some text and css left
Skärmavbild 2020-11-12 kl. 21.11.58.png
0 Likes