Want To Sell Better With HubSpot? Check Out eZo eCommerce...
This module can be used to display opening hours on your website and will notify website visitors of the current opening hours depending on the day of the week. It is highly flexible and can be customised to meet your businesses unique requirements.
This is a global module which means that you can install it on as many of your website pages as you like but only need to update it’s settings in one location for the changes to apply site wide. This saves time and makes updating your settings simple.
The documentation will walk you through how to set up and install the Opening Hours Announcement Bar. Should you have any questions, please click on the support link to get in touch.
After purchasing the module from the HubSpot Marketplace the first step is to set up the module, to do this navigate to Marketing > Files and Templates > Design Manager and select Opening Hours Announcement Bar from the left hand side menu (It will be listed in a folder named Marketplace).
Select Edit global module from the right hand side to open HubSpot's Global Content Editor.
This will open the following panel:
Click on ‘Opening Hours’ which will open the opening hours editor.
From this screen you can edit your default opening hours. Default opening hours are the hours which your business is most commonly open. If you open 9-5 most days then set this as your default opening hours.
The options on this page are:
Opening Hour - The opening hour in 24 hour format. e.g. 9 = 9am
Opening Minute - The opening minute from 0 - 59 e.g. 30 = half past the hour
Closing Hour - The closing hour in 24 hour format. e.g. 17 = 5pm
Closing Minute - The closing minute from 0 - 59 e.g. 30 = half past the hour
Closed Message - This is the default closed message that gets displayed when someone visits your website outside business opening hours.
Within the Opening Hours section there is an option for Add Variations. If there are certain days of the week where your business does not follow your default opening hours then select Yes. If you open the same opening hours every day of the week then leave this option as No. If you open 9-5 Monday to Friday but are closed at the weekend then select Yes.
Selecting Yes will reveal the Additional Rules panel. This is where you can set up rules which will apply to specific days of the week. To begin adding additional rules to the module select +Add which will open the options panel for your new rule.
The settings on this panel are:
Day - Select the day of the week you would like to create alternative opening hours for e.g. Saturday.
Status - This allows you to define if you are open or closed on this day e.g. if you are closed on Saturdays select Closed but if you open shorter hours select Open. Selecting Open reveals opening hour settings for this day. You can use these settings to input your opening hours for this day.
Closed Message - This setting will override the default Closed Message. You can use this field to create more informative Closed Messages. e.g. If you are closed on Saturdays and Sundays you could use the Closed Message on these days to display a message stating ‘Sorry we are closed today - we will reopen on Monday at 9:30am’.
Your settings are saved as you make them so once you are finished editing the options click Back to Opening Hours.
Once you are finished editing your Additional Rules please select Back to Opening Hours Announcement Bar. This will take you back to the module’s main menu. The next step is to set up your annual holidays by clicking Annual Holidays.
This opens a panel which will allow you to set a range of options for various Annual Holidays (e.g. Christmas Day, Halloween, etc). The options that are set here will apply annually meaning once you set them they will be applied for every Christmas Day in the future.
The annual holidays supported are:
• Christmas Day - 25 December
• New Years Day - 01 January
• Halloween - 31 October
• Independence Day - 04 July
• Saint Patricks Day - 17 March
The options for each Annual Holiday are:
Ignore - When set to yes the module will ignore any settings for this Holiday and treat the day like any other calendar day. An example of this would be if your business does not treat St Patrick's Day as a holiday you can turn off special settings for this day and have your opening hours apply as normal. Please note that Closed Dates and Opening Hours settings will still apply.
Status - If set to Closed the Closed Message will be displayed on this day. If set to Open options will appear allowing you to customise your opening hours for this day.
The next step will be to set up your business closures by clicking Closed Dates. This opens an options panel allowing you to add the days your business is closed. e.g. Bank Holidays, Public Holidays, Annual Closures, Training Days etc.
To add a Closed Date to the module under the Days heading select Add which will add a closed date and open its settings menu.
From this menu the options you will need to set are:
Closure - The date on which the business is closed. This value is a calendar date.
Closed Message - Customised message to display on this day e.g. We are closed for a Bank Holiday today.
When you are finished editing the options you can select Back to Closed Dates to return to the previous menu which will allow you to add other closed dates.
Once finished adding closed dates click Back to Announcement Bar - Opening Hours to return to the module’s main menu
The final section to edit is Bar Styles. Clicking this button opens the module's styling options panel. From here you can edit the module's default styling to bring it more inline with your brand guidelines.
The options on this panel are:
Bar Type - This allows you to define what type of bar you want, the value Static allows the bar to scroll with the page, the value Fixed keeps the bar docked to the top of the window.
z-index - This option is used if you discover the Opening Hours Announcement Bar overlaps other elements on your web page. The element with the highest z-index will always display on top of other elements on your website. The default value is "100000000" but you may need to increase this if other elements on your website use similar a high numbered z-index.
Text Colour - Can edit the colour of the module's default text colour.
Font size - Edit the module's default font size
Background Colour - This allows you to edit the module's default background colour. If a background image is set the background colour will act like a filter on the image.
Padding Top - This will allow you to edit the module's default padding-top css value. Use this to increase or decrease the depth of the bar.
Padding Bottom - This will allow you to edit the module's default padding-bottom css value. Use this to increase or decrease the depth of the bar.
The background image section allows you to add or remove a background image from the module.
The opening hours section allows you to edit the styling of the box which displays the opening hours.
The options are:
Background Colour - The background colour of the opening hours box.
Font Colour - This allows you to edit the default font colour of the opening hours box.
Padding Top - This allows you to edit the default padding-top css value of the opening hours box.
Padding Bottom - This allows you to edit the default padding-bottom css value of the opening hours box.
Padding Left - This allows you to edit the default padding-left css value of the opening hours box.
Padding Right - This allows you to edit the default padding-right css value of the opening hours box.
Border Radius - This allows you to edit the default border-radius css value of the opening hours box.
When you have finished editing the Opening Hours Announcement Bar, click the Publish button on the top right to save your changes and then navigate to Marketing > Files and Templates > Design Manager and select a page template you would like to show the Opening Hours Announcement Bar on.
If you are using HubSpot's drag and drop editor then on your page template select Add+, choose Opening Hours Announcement Bar and drag it into the Header section of your page template.
If you are using HubSpot's HTML editor to build your templates you will have to copy the module's snippet and paste it at the top of your HTML document, just inside the <body> element.
Click Publish Changes on your template to make your Opening Hours Announcement Bar live on all pages using this template.
Repeat steps 1-5 for each template you wish to include the Opening Hours Announcement Bar on.
This module has been designed to be as flexible as possible. All the CSS required to style the Opening Hours Announcement Bar is included within the module. It can be edited to suit your needs although we recommend using the built-in styling options as we can’t take responsibility for any CSS edits you make that break the module (or your website).
We have tried to build as much functionality into this module as possible without making it too complicated. If, however, you have specific requirements for your business, please get in touch and we will see if this module can be customised further to meet your needs or if a bespoke module would be more appropriate.
We provide development solutions for companies and agencies who need help building their websites from scratch or adding custom functionality along the wayGet In Touch