Countdown timer on password page

[Jaded-republic]

I would like to add a countdown timer to my sites password page. right now my site is password protected so anyone who goes to my site, is unable to enter without a password. I want to add a countdown timer to users who visit the site while its password protected can see the timer to when the site will officially launch. Does anyone know how to do this??

[GemPages]

Hello @Jaded-republic 

I would like to give you the recommendation to support you so kindly follow steps below:

1. Go to your Online store > Themes > Edit code
2. Open your password.liquid file
3. Paste the below code : https://prnt.sc/opFuZjtWSPeH

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

I hope the above is useful to you.
Best regards,
GemPages Support Team

[Tmw321]

Would you mind explaining how to center the timer on the page as well? Thanks!!

[iCart_App]

Hello @Jaded-republic !

You can add a count-down timer and customize your password page by using the Under Construction - Coming Soon app.

[Iris]

Hi @Jaded-republic ,

That’s a great question! 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!

Apart from the suggested app, other very popular apps for this function are:
- Fancy Coming Soon
-Pre‑launcher / Coming soon
- Upify ‑ Easy Coming Soon

There also may be other ways this may be written into the code for your theme, as shown by @GemPages. Before you customize a theme, it's a good idea to make a backup copy so that you can discard your changes and start again if you need to.

But if you don’t feel comfortable editing the code, the 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.

Considering your store is password protected, I take you’re still working on the setup. Is there anything I can help with? Let me know. Also, take a look at this launch checklist from our help centre that goes through everything that you need to do before launch - it serves as a great guide if you're not sure where to start or what you might be missing.