Solved

Countdown timer/clock on password page

IdealDesign
Tourist
9 2 1

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

Accepted Solution (1)

IdealDesign
Tourist
9 2 1

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

View solution in original post

Replies 17 (17)

Hank
Shopify Staff
1102 128 187

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

IdealDesign
Tourist
9 2 1

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
Alexek
Visitor
1 0 0

How can i change the Release Date to a certain hour? Say April 1, 2021 plus a 24 hour format. So for example April 1, 2021, 18:00?

Thanks in advance

Alex

ecommerce360
Visitor
1 0 0

Date & TIme format: "Sep 25, 2021 09:00

mariocotomd
Shopify Partner
9 0 0

{% include 'shopifyexplorer-countdown-timer',
end_date: "Nov 27, 2020 18:00"
%}

BumApparel_Shop
Visitor
1 0 0

Hi. This did not work for me, I went step by step. Creating the snippet and adding the additional code to the password.liquid section.

Sam521
Visitor
3 0 0

Hello

 

Thanks for this - it's perfect!

However it doesn't scale with my theme, I'm using a responsive site - minimal but it doesn't scale for different devices.

I have queried this and someone mentioned using Media Queries however I do not know enough about CSS & HMTL to input it into the code.

Can you help? I would love any help from anyone!

Thanks

Alaina
Visitor
1 0 0

Where do I add this in password liquid? 
At the end or beginning?

MaileLacno
Visitor
1 0 0

Where is the password liquid is the code supposed to be added to? You didn't say @IdealDesign 

EVAKEN
Excursionist
26 1 6

@MaileLacno Just Put it in the "Password.liquid" somewhere in between "<html>" and "</html>"

EVAKEN
Excursionist
26 1 6

@IdealDesign is it possible to add the Countdown IN this Box? 

Or in the White Header?

Can´t find a solution for that.

EVAKEN_0-1649412779540.png

 

mariocotomd
Shopify Partner
9 0 0

if you can, only that you would have to modify the liquid of the slider to be able to place it, contact me and we will see it

nathaniel029
Visitor
1 0 0

How do I make the timer fit for mobile devices also?

mariocotomd
Shopify Partner
9 0 0

Hello my friend, I tell you that to adapt it to mobile, you would have to know css to be able to adapt it because if not you may not be able to but you can contact me if I could help you

sngmiko
New Member
5 0 0

Hi, ive do the same way but my countdown is at the bottom and not at the middle or top. Do you have any solution for it?Here you can see its on the footerHere you can see its on the footer

 

i want it here on the middle or at the topi want it here on the middle or at the top

 

Aleon
Shopify Partner
32 0 3

After many searches and coding too much code, I managed to find this APP that is helping me, it is also compatible with Android and IOS I recommend it, it gives you a code to place it where you want, center it or place it on the sides, you can also use the same code for products

 

https://apps.shopify.com/countdown-timer-by-elfsight?locale=es&search_id=b6e0cd45-086c-4094-8671-a2e...

 

 

 

EssentialApps
Shopify Partner
1 0 0

You can easily add a countdown timer on Password page using Essential Countdown Timer app.
Here is the detailed article on How to add a Shopify countdown timer on password page.

Here is a quick video going over all steps:

On the mission to build a suite of essential Shopify apps to help every merchant.