How to add this countdown without app Dawn theme

[leoking]

 I would like this countdown to do 25 minutes every-time a customer starts a session i want right under my add to cart on my product page and at my cart page under all the payment options if possible I don’t want to pay a app to do this every month so custom would be great I want it too look nice like this exactly like this would be better

[Dan-From-Ryviu]

Hi @leoking 

You can add a Custom Liquid block, and then add this code to add a simple countdown timer below add to cart button 

<div class="time-cust"><h2 style>Hurry up!</h2><h3>Sale ends in:</h3><span id="countdown-timer"></span></div>
<style>
.time-cust { display: flex; flex-direction: column;
    align-content: center;
    align-items: center; }
.time-cust h3,
.time-cust h2 { margin: 0; }
.time-cust #countdown-timer {
font-size: 24px; font-weight: bold; color: red;
}
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Set the countdown duration (25 minutes)
    var countdownDuration = 25 * 60 * 1000; // 25 minutes in milliseconds
    var countdownDisplay = document.getElementById('countdown-timer');

    // Check if a session already exists
    if (!sessionStorage.getItem('countdownEndTime')) {
      // Set the session end time (current time + countdown duration)
      var countdownEndTime = new Date().getTime() + countdownDuration;
      sessionStorage.setItem('countdownEndTime', countdownEndTime);
    } else {
      var countdownEndTime = sessionStorage.getItem('countdownEndTime');
    }

    // Update the countdown every second
    var countdownInterval = setInterval(function() {
      var now = new Date().getTime();
      var timeRemaining = countdownEndTime - now;

      if (timeRemaining >= 0) {
        // Calculate minutes and seconds
        var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

        // Display the countdown
        countdownDisplay.innerHTML = minutes + "m " + seconds + "s ";
      } else {
        // Countdown is over
        clearInterval(countdownInterval);
        countdownDisplay.innerHTML = "Time's up!";
        sessionStorage.removeItem('countdownEndTime'); // Optionally clear session storage
      }
    }, 1000);
  });
</script>

[leoking]

Just tried it thank you anyway it can look exactly like the picture I provided tho?

[Dan-From-Ryviu]

Update code in liquid to this

<div class="time-cust">
<h2> Hurry up!!<h2>
<h3>Sale ends in:</h3>
<div id="countdown-timer">
  <div style="display: inline-block; text-align: center; margin-left: 10px;">
    <div id="days"  class="times">00</div>
    <div>Days</div>
  </div>
  <div style="display: inline-block; text-align: center; margin-left: 10px;">
    <div id="hours" class="times">00</div>
    <div>Hrs</div>
  </div>
  <div style="display: inline-block; text-align: center; margin-left: 10px;">
    <div id="minutes" class="times">00</div>
    <div>Mins</div>
  </div>
  <div style="display: inline-block; text-align: center; margin-left: 10px;">
    <div id="seconds" class="times">00</div>
    <div>Secs</div>
  </div>
</div>
</div>
<style>
.time-cust { display: flex; flex-direction: column;
    align-content: center;
    align-items: center; }
.time-cust h3,
.time-cust h2 { margin: 0; }
.time-cust .times {
font-size: 30px;
font-weight: bold;
color: red;
}
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Set the countdown duration (25 minutes)
    var countdownDuration = 25 * 60 * 1000; // 25 minutes in milliseconds

    // Elements to display the time parts
    var daysElement = document.getElementById('days');
    var hoursElement = document.getElementById('hours');
    var minutesElement = document.getElementById('minutes');
    var secondsElement = document.getElementById('seconds');

    // Check if a session already exists
    if (!sessionStorage.getItem('countdownEndTime')) {
      // Set the session end time (current time + countdown duration)
      var countdownEndTime = new Date().getTime() + countdownDuration;
      sessionStorage.setItem('countdownEndTime', countdownEndTime);
    } else {
      var countdownEndTime = sessionStorage.getItem('countdownEndTime');
    }

    // Update the countdown every second
    var countdownInterval = setInterval(function() {
      var now = new Date().getTime();
      var timeRemaining = countdownEndTime - now;

      if (timeRemaining >= 0) {
        // Calculate days, hours, minutes, and seconds
        var days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
        var hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

        // Display the time parts
        daysElement.innerHTML = days < 10 ? '0' + days : days;
        hoursElement.innerHTML = hours < 10 ? '0' + hours : hours;
        minutesElement.innerHTML = minutes < 10 ? '0' + minutes : minutes;
        secondsElement.innerHTML = seconds < 10 ? '0' + seconds : seconds;
      } else {
        // Countdown is over
        clearInterval(countdownInterval);
        daysElement.innerHTML = "00";
        hoursElement.innerHTML = "00";
        minutesElement.innerHTML = "00";
        secondsElement.innerHTML = "00";
        // You can display a message here or take another action
      }
    }, 1000);
  });
</script>

[leoking]

Thank you for replying! Anyway to make the colour and the size match? 

 

 

[Dan-From-Ryviu]

Please send me the link to the page you get that example. 

[leoking]

Lexxyy.com thank you for this and also if you can show me how to do the estimated delivery same as the picture on all product page would be so greatly appreciated you’ve been the biggest help 

 

[Dan-From-Ryviu]

Please update code to this. It will add to all products using the same product template. 

<div class="time-cust">
<h2> Hurry up!!</h2>
<p>Sale ends in:</p>
<div id="countdown-timer">
  <div style="display: inline-block; text-align: center; margin-left: 10px;">
    <div id="days"  class="times">00</div>
    <div>Days</div>
  </div>
  <div style="display: inline-block; text-align: center; margin-left: 10px;">
    <div id="hours" class="times">00</div>
    <div>Hrs</div>
  </div>
  <div style="display: inline-block; text-align: center; margin-left: 10px;">
    <div id="minutes" class="times">00</div>
    <div>Mins</div>
  </div>
  <div style="display: inline-block; text-align: center; margin-left: 10px;">
    <div id="seconds" class="times">00</div>
    <div>Secs</div>
  </div>
</div>
</div>
<style>
.time-cust {
    display: flex;
    flex-flow: column;
    background: #242833;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 8px;
    border: #c5c8d1 solid 0px;
    text-align: center;
    flex: auto;
    align-items: center;
color: #fff;
}
div#countdown-timer div { line-height: 1.2; }
.time-cust p,
.time-cust h2 { margin: 0; }
.time-cust h2 { font-size: 28px; color: #fff; }
.time-cust .times {
font-size: 40px;
font-weight: bold;
color: #930000;
}
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Set the countdown duration (25 minutes)
    var countdownDuration = 25 * 60 * 1000; // 25 minutes in milliseconds

    // Elements to display the time parts
    var daysElement = document.getElementById('days');
    var hoursElement = document.getElementById('hours');
    var minutesElement = document.getElementById('minutes');
    var secondsElement = document.getElementById('seconds');

    // Check if a session already exists
    if (!sessionStorage.getItem('countdownEndTime')) {
      // Set the session end time (current time + countdown duration)
      var countdownEndTime = new Date().getTime() + countdownDuration;
      sessionStorage.setItem('countdownEndTime', countdownEndTime);
    } else {
      var countdownEndTime = sessionStorage.getItem('countdownEndTime');
    }

    // Update the countdown every second
    var countdownInterval = setInterval(function() {
      var now = new Date().getTime();
      var timeRemaining = countdownEndTime - now;

      if (timeRemaining >= 0) {
        // Calculate days, hours, minutes, and seconds
        var days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
        var hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

        // Display the time parts
        daysElement.innerHTML = days < 10 ? '0' + days : days;
        hoursElement.innerHTML = hours < 10 ? '0' + hours : hours;
        minutesElement.innerHTML = minutes < 10 ? '0' + minutes : minutes;
        secondsElement.innerHTML = seconds < 10 ? '0' + seconds : seconds;
      } else {
        // Countdown is over
        clearInterval(countdownInterval);
        daysElement.innerHTML = "00";
        hoursElement.innerHTML = "00";
        minutesElement.innerHTML = "00";
        secondsElement.innerHTML = "00";
        // You can display a message here or take another action
      }
    }, 1000);
  });
</script>

[leoking]

You are the best!!! Thank you soo much only final thing I hope in not asking for too much is it possible to have the estimated delivery time on all my products first one (ordered) is the day the order placed seconde (order ready) is the three next following days and the third is 10-20 days from when order was placed in all product page I would be so grateful thank you for the help