Countdown timer on password page

Jaded-republic
Tourist
6 0 3

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??

Replies 4 (4)

GemPages
Shopify Partner
5589 1261 1218

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Tmw321
Visitor
1 0 0

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

iCart_App
Shopify Partner
512 58 104

Hello @Jaded-republic !

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


iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com

Iris
Shopify Staff
819 67 100

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.

Iris | 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