Can I add a realtime date an time on my website?

[christian_russo]

hi!

is it possible to add a realtime date and Time on my website for my location? are there any apps or codes? like this:

site: https://www.gallerychristian.com/

thanks!

[PageFly-Amelia]

Hello @christian_russo

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Create a section “Custom Liquid” in Customize theme
Step 2: Add code below:

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[christian_russo]

it showed the date and time but removed my header completely…how can I fix this so its just underneath my logo? and is it also possible to add Antwerp, Belgium as a location?

[christian_russo]

please let me know if this is possible

[tim_1]

The other suggested solution shows time at visitors location, not where your shop’s located.

Since your theme, Prestige, allows you to add a “Custom liquid” block to the “image with text overlay” section, you can use the following code for this block:

See how it looks on my test store https://np98oelgehxicmvf-23104437.shopifypreview.com

Note that some older browsers may not support this code, so the code would show nothing on those browsers.

[christian_russo]

this worked but is it possible to change the date to may 14, 2024 because now it says 14 Mei 2024 which is dutch and I need it in English always. and is it also possible to place it under my header logo? thanks!

[tim_1]

The text is actually output in your preferred language. Since your OS/browser preferred language is Dutch, it shows you “Mei”.

I intentionally did it this way.

For me it’s “May” – see the screenshot.

For visitors from US it will also show “May 14 2024” and AM/PM time…

As for placement – do you want to have this on every page of your site?

Then you may consider adding a “Custom liquid” section to the Header group and try my code there…

If only on the homepage – then may rather add this to the sections “custom CSS”:

.content { height: 100%; }

.prose {
  height:  50%;
  justify-content: space-between;
}

[christian_russo]

Where can I find this custom css section?

[tim_1]

it’s a setting on the “image with text overlay” section.

[tim_1]

The code which was lost during forum move is

<center><span class=ourtime>{{ 'now' | date }}</span>
</center>
<script>
  if (
    typeof Intl === "object" &&
    !!Intl &&
    typeof Intl.DateTimeFormat === "function"
  ) {
    if (!window.formatOurtime) {

      let localeOptions = new Intl.DateTimeFormat(undefined).resolvedOptions();
      localeOptions.timeZone = "Europe/Copenhagen";
      localeOptions.hour = "2-digit";
      localeOptions.minute = "2-digit";
      localeOptions.second = "numeric";
      localeOptions.timeZoneName = "short";
      localeOptions.month = "short";

      window.formatOurtime = new Intl.DateTimeFormat( undefined, localeOptions).format;
      updateElements = function () {
        let currentTime = formatOurtime( new Date());
        elements.forEach(e => { e.innerHTML = `${currentTime} - Copenhagen` });
      };

      let elements = document.querySelectorAll('.ourtime');
      if (elements.length > 0 ) {
        updateElements();
        setInterval( updateElements, 500);
      }
    }
  }
</script>