Any idea how to add a clock on my password page

[ripkdog]

I have no clue how or where or what the code is to add a cool feature of a clock on my password page to show what time it is, any help would be great.

[devmont-digital]

Hello @ripkdog,

If you want to add a clock to the password page, follow these steps:

Go to Online Store -> Themes -> Customize, and open the password page.

Add a custom liquid section, paste the above code, and save the section.

<style>
  .clock {
    margin-left:auto;
    margin-right:auto;
    width:800px;
    color:#fff;
    background:grey;
  }
  #Date {
    font-family: Arial, Helvetica, sans-serif;
    font-size:36px;
    text-align:center;
    text-shadow:0 0 5px #00c6ff;
  }
  ul {
    width:800px;
    margin:0 auto;
    padding:0px;
    list-style:none;
    text-align:center;
  }
  ul li {
    display:inline;
    font-size:10em;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    text-shadow:0 0 5px #00c6ff;
  }
  .point {
    position:relative;
    -moz-animation:mymove 1s ease infinite;
    -webkit-animation:mymove 1s ease infinite;
    padding-left:10px;
    padding-right:10px;
  }
  @-webkit-keyframes mymove {
    0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
    50% {opacity:0; text-shadow:none; }
    100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
  }
  @-moz-keyframes mymove {
    0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
    50% {opacity:0; text-shadow:none; }
    100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
  }
</style>

<div class="clock">
  <ul>
    <li id="hours"></li>
    <li class="point">:</li>
    <li id="min"></li>
    <li class="point">:</li>
    <li id="sec"></li>
  </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  $(document).ready(function() {
    // Create two variables with names of months and days of the week in the array
    var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
    var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

    // Create an object newDate()
    var newDate = new Date();
    // Retrieve the current date from the Date object
    newDate.setDate(newDate.getDate());
    // At the output of the day, date, month and year    
    $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

    setInterval(function() {
        // Create an object newDate () and extract the second of the current time
      var seconds = new Date().getSeconds();
        // Add a leading zero to the value of seconds
      $("#sec").html((seconds < 10 ? "0" : "") + seconds);
    }, 1000);
    
    setInterval(function() {
        // Create an object newDate () and extract the minutes of the current time
      var minutes = new Date().getMinutes();
        // Add a leading zero to the minutes
      $("#min").html((minutes < 10 ? "0" : "") + minutes);
    }, 1000);
    
    setInterval(function() {
        // Create an object newDate () and extract the clock from the current time
      var hours = new Date().getHours();
        // Add a leading zero to the value of hours
      $("#hours").html((hours < 10 ? "0" : "") + hours);
    }, 1000);
  });
</script>