Bold Hours Status Text

[Scott_Howlett]

Hi Team,

Is there any way to ensure the “Closed” status is bolded on the standard location cards? I’m using the default hours formatter on my experience and it works fine when a store is open and has a status like “Open - Closes at XX” but when a store is just closed the status “Closed” isn’t bolded.

Is there some CSS I can add to fix? Screenshot below:

[Sam_Torres]

Hi @Scott_Howlett,

This is possible by overriding the static > js > hours > open-status > messagefactory.js file in your Jambo repo. Currently, all of the open hours statuses, such as “Open”, “Closed”, and “24 Hours”, live under the same Hours-statusText–current <span> tag. In order to approach the styling in each of these statuses in a differentiated way, you will need to create separate naming conventions for each <span> tag such that you can target and style them separately in your answer.scss file.

Here are the steps:

1. Tools > Jambo Commands > Override Theme > select the static > js > hours > open-status > messagefactory.js file

2. Scroll down to the status you want to target. Let’s say we want to target the “Closed” text within the “Closed - Opens at ____” status. On line 46, let’s rename the <span> to something unique such as Hours-statusText–currentClosed:

3. In our answers.scss, let’s target the updated <span> tag with the new naming convention and add some styling:

span.Hours-statusText--currentClosed {
  color: 	#FA9370;
  font-weight: bold;
}

And that should be it! If we update preview and inspect the page, you’ll see the update <span> naming as well as our specific styling:

You can apply this same methodology to the various other statuses in the messagefactory.js file. As always when overriding the theme, make sure to take note of your changes in the event that we change this file during a future theme upgrade.

Best,
Sam