timer countdown for the landing page (password page)

[unisnkrs]

hello,

i'm trying to add a countdown timer for the password page but i've only found a payed app that does this type of countdown, is it possible to add through coding? if so which can someone help on this matter

www.unisnkrs.com 

[okur90 · Accepted solution]

Hi @unisnkrs 

Yes, you can add a countdown timer to your password page without using a paid app by adding some custom HTML, CSS, and JavaScript code to your Shopify theme.

Open the "password-template.liquid" file and click on it to open the file in the code editor.

In the "password-template.liquid" file, find the section where you want to add the countdown timer.

For example, you can add it below the "password-page__content" div.

Add the following HTML code to create a countdown timer container:

<div id="countdown-timer">
<span id="days">00</span> Days
<span id="hours">00</span> Hours
<span id="minutes">00</span> Minutes
<span id="seconds">00</span> Seconds
</div>

Now, add some CSS to style the countdown timer. In the left sidebar, find the "theme.scss.liquid" or "styles.scss.liquid" file inside the "Assets" folder and add the following CSS code at the bottom of the file:

#countdown-timer {
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}

#countdown-timer span {
margin-left: 10px;
margin-right: 10px;
}

Finally, add JavaScript to make the countdown timer functional. In the left sidebar, find the "theme.js" or "theme.js.liquid" file inside the "Assets" folder and add the following JavaScript code at the bottom of the file:

document.addEventListener("DOMContentLoaded", function () {
var countdownDate = new Date("December 31, 2023 23:59:59").getTime(); // Change this date to your desired countdown end date

function updateCountdown() {
var now = new Date().getTime();
var timeLeft = countdownDate - now;

var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

document.getElementById("days").textContent = days;
document.getElementById("hours").textContent = hours;
document.getElementById("minutes").textContent = minutes;
document.getElementById("seconds").textContent = seconds;
}

updateCountdown();
setInterval(updateCountdown, 1000);
});

Make sure to replace the date in the `countdownDate` variable with your desired countdown end date.

After completing these steps, you should see a countdown timer on your password page. You can further customize the timer's appearance and functionality by modifying the provided HTML, CSS, and JavaScript code. 

[unisnkrs]

thank you it works but is it possible to make it more centered like under Opening soon?

[okur90]

You can center the countdown timer under the "Opening soon" text by updating your CSS code.

In the "password-template.liquid" file, wrap the countdown timer container in a new container div, like this:

<div class="countdown-wrapper">
  <div id="countdown-timer">
    <span id="days">00</span> Days
    <span id="hours">00</span> Hours
    <span id="minutes">00</span> Minutes
    <span id="seconds">00</span> Seconds
  </div>
</div>

Update your CSS in the "theme.scss.liquid" or "styles.scss.liquid" file by adding styles for the new container div:

.countdown-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}

This will create a new container that wraps the countdown timer, centering it both horizontally and vertically under the "Opening soon" text. 

[unisnkrs]

doesn't seem to center the text to go under the opening soon title

[jinsley]

This script does not account for timezones.

If you need the countdown to end at 3pm in New York, then it would need to end at 12pm in LA.

Add timezone in the countdownDate string and then it will be converted to the users' device local time.

document.addEventListener("DOMContentLoaded", function () {
  function updateCountdown(endTime) {
    var timerInterval = setInterval(function () {
      var totalSeconds = Math.floor((endTime - new Date()) / 1000);

      if (totalSeconds <= 0) {
        clearInterval(timerInterval);
        totalSeconds = 0;
      }

      var days = Math.floor(totalSeconds / (60 * 60 * 24));
      var hours = Math.floor((totalSeconds / (60 * 60)) % 24);
      var minutes = Math.floor((totalSeconds / 60) % 60);
      var seconds = Math.floor(totalSeconds % 60);

      // Change querySelectors for your code
      document.querySelector(".countdown-timer .days").innerHTML = days;
      document.querySelector(".countdown-timer .hours").innerHTML = hours;
      document.querySelector(".countdown-timer .minutes").innerHTML = minutes;
      document.querySelector(".countdown-timer .seconds").innerHTML = seconds;
                }, 1000);
}

// Change this date to your desired countdown end date with timezone
var countdownDate = new Date("12-31-2023 19:00:00 PDT"); 
var eventDate = new Date(countdownDate);
var endTime = new Date(eventDate.toLocaleString()); // to is not necessarily needed but just in case

updateCountdown(endTime);
});

[aditya58singh]

Hi @unisnkrs 

There are lot of good apps which can you use in your store and design it.  I find this app Sales Countdown Timer Bar best app for the countdown as they have given the option of the navigation menu as well which is very usefull with all the count down features. 

[Hyun1]

Is there anyway to insert countdown on blog page is shopify? Thank you