How to add a live clock to a minimal theme?

Store Design
1

The other day, I found a web-store running minimal with a live clock displaying the date and time in PST in the footer. How would this be done?

clock.png

2

Hi @donniederanged you can go to the following website and make a clock design then code the embedding code from there. then in your theme editor go to the footer.liquid file and paste the copied code at bottom

https://www.thetimenow.com/javascript/clock/timezone/115/pst/pacific_standard_time

3

Add this html wherever you want to show the time

Then Add this Javascript:

function currentTime() {
  let date = new Date(); 
  let dd = date.getDate();
  let mon = date.getMonth();
  let yy = date.getFullYear();
  let hh = date.getHours();
  let mm = date.getMinutes();
  let ss = date.getSeconds();
  let session = "AM";

    
  if(hh > 12){
      session = "PM";
   }

   dd = (dd < 10) ? "0" + dd : dd;
   mon = (mon < 10) ? "0" + mon : mon;
   hh = (hh < 10) ? "0" + hh : hh;
   mm = (mm < 10) ? "0" + mm : mm;
   ss = (ss < 10) ? "0" + ss : ss;
    
   let time = dd + "/" + mon + "/" + yy + " " + hh + ":" + mm + ":" + ss + " " + session;

  document.getElementById("clock").innerText = time; 
  let t = setTimeout(function(){ currentTime() }, 1000); 

}

currentTime();
4

What’s the business case for this that justifies adding more javascript/network-requests to a stores theme. Support center call hours , restaurant hours, etc can make good use of such things.

Check your stores web performance before adding such things.

https://pagespeed.web.dev/ anything below 90 means don’t add cruft.

Most users on mobile and desktop will have a time clock permanently visible either at the top of their phone or the corner of their desktop. And people who don’t most specifically don’t want to be nagged with the time.

And keep in mind quick javascript solutions will only be showing the users client-browsers time, and not a stores geographical timezone.

And ones coming from specific clock websites are basically getting you to install a tracker for your customers where that third party tracks your customers and you don’t get any of the data.

5

Hey, could you possibly help me out? I added the JS as a js (clock.js), and pasted the html into the footer liquid where I was thinking of placing it, but it did nothing. I am sure I am doing it wrong, I am not very experienced with java.

6

You’ll need to include the clock.js in theme.liquid file, add this at the bottom just above tag
7

You’re awesome!

8

Feel free to use our app in case you have any theme edit tasks. The prices start at $8/hr to unlimited theme edits for just $49/month.

9

Just what I was thinking Paul. Much better to show a countdown timer and actually increase your CTRs that way:

13-43-281t1-2wcmm