Jump to content

Recommended Posts

Hi all, hope everyone is well. 

I want to be able to add a time-based heading to our website, based on the time of the users PC. I would like a heading to change based on the following timing:

4:00am-11:59am: Good Morning
12:00pm-6:59pm: Good Afternoon
7:00pm-3:59am: Good Evening

Does anyone know how this is possible? I had a developer code it for a custom web platform years ago but would love to know if it's possible using the SS platform.  Happy to discuss privately if this is a costly exercise. 

Many thanks!

Link to comment

You can achieve this with some simple JavaScript. Here's an example that you can paste into a Code Block on your page and then adjust to match your requirements.

<h2 id="greetingEl"><h2>

<script>
const time = new Date().getHours();
let greeting;
if (time < 12) {
  greeting = "Good morning";
} else if (time < 19) {
  greeting = "Good afternoon";
} else {
  greeting = "Good evening";
}
document.getElementById("greetingEl").innerHTML = greeting;
</script>

The first section creates a heading element where the greeting will appear. 

Below this is the script, which gets the time and then extracts the hour from this using the getHours() method. This returns an hour from 0 to 23 and this is used to determine which greeting to show. For a deeper explanation of this, see JavaScript if else and else if.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.