Hero Booking Page

Estimated reading time: 6 min

The Booking Page layout can be customized to best suit your business needs. To make these customizations visit Manage > Layout > Booking Page in your Checkfront dashboard. Any changes made here will be automatically updated on your hosted booking page or embedded website booking portals.


Detail Booking Page:

This particular document relates to the HERO BOOKING PAGE option. For the Detail Booking Page, please click here..


So let’s have a look at the different options available to you when choosing the layout of your hero booking page.


Booking Page Layout

Back to top

Your booking portal can be displayed in one of two ways. You may choose from either the Detail Page or the Hero Page. The Hero Page, which we are looking at in this document, is a modern looking booking portal with a big hero image at the top and a date select box front and centre. Visually, it’s stunning and will appeal to a wide range of Checkfront customers.


Hero Image

Back to top

At the top of the booking portal is a hero image. This is the first thing your customers will see when they arrive at your booking page. To upload your own image, click on the Hero Page Settings link as seen below.




Hero Page Settings

Back to top

Static Image

To use a static image as your Hero Image, select the Jumbotron option from the settings page.




Click Choose File in order to locate the image on your computer. The image should be at least 1920×450 resolution. Image sides will appear cropped on smaller displays. To reduce cropping, use an image taller than 450px.




If you wish to change an image already in place, click on the Delete Hero Image button.


YouTube Background Video

If you’d rather, it’s possible to select a YouTube video to be displayed as the Hero Image. This will play automatically when a customer arrives at the page, without any sound.




Simply enter the URL of the video from YouTube and click Save.


Display When Embedded

Check this option to display the image/video on embedded pages when using integrations such as the Droplet or WordPress plugin.




Note: Hero image/video is always displayed on the /reserve hosted booking page.


Hero Text

If you’d like to display a tagline over the image/video in the Hero Header, enter it in the Hero Text field provided.




An example, finished header, is shown below:



Category Display

Back to top

Category display determines how the categories you have created for your items will be displayed to your customers in the booking portal. You have 3 choices – Tabs, Drop-down or Grid.


Choosing tabs will display your categories in a tabular format across the top of your item list.




This is a good solution for up to 5 or 6 categories, but any more than that and they will start to appear in an additional row underneath, which can look a little clunky!

Select the default category to display from the drop-down menu provided. You can choose to show a specific category, display all or show the category index.



An alternative to tabs and best for businesses that have more than 5 or 6 categories.




Categories are displayed in a select box just above the date and you can show as many as you need.

Select the default category to display from the drop-down menu provided. You can choose to show a specific category, display all or show the category index.



Grid is the third layout option available to the Hero Page.




Rather than displaying the category tabs as a menu, a beautiful grid display is shown, showcasing your different categories in a visually stunning way.


You can upload a unique image for each category at Inventory > Categories. Just select a category for edit and choose your image via the file selector. We recommend an image with a 4:3 aspect ratio and minimum dimensions of 480×360 pixels. An image double this size will look nice and sharp on a high-resolution screen!




To change the order of your categories, adjust their weight at Inventory > Categories. A higher weight category will place closer to the front of the list.

For more information about categories and how to edit them, please go here.


Grid Layout

Back to top

If you’ve chosen the grid layout for your categories, there are a couple of additional options you can choose from depending on your taste.

Selecting Show Description will display the item description underneath its image in the booking portal.


Hero Page Description


Selecting Overlay Menu will replace the booking options underneath the item image with an overlaid button to access the same information.


Hero Page Overlay


Search Bar Options

Back to top




Show End Date:

Use this option if you’d like to offer your customers the ability to choose a date range when selecting an item’s availability.

Keyword Search:

Activating this option adds a keyword search field to your booking portal. This will allow customers to search the title of your items to single out an individual item(s).


If you’re having difficulties with the display of your website booking portal on mobile devices, you have the option to select Redirect mobile devices to mobile booking page. This will automatically redirect your mobile customers to the mobile hosted booking page, which is optimised for most mobile devices and avoids any display issues arising from website incompatibility.

You also have the ability to hide the availability calendar on small screens, if you want to achieve a more minimal feel.


Automatically Advance to the Next Available Date:

When this option is selected, the customer booking calendar will be advanced automatically to the next date available for booking. This will avoid displaying the message stating there is nothing available for the current day.

Upcoming Items:

If a customer clicks on a day in the calendar that doesn’t have any items available for booking, they will receive a message to confirm that. You can also choose to show a list of items that are upcoming on nearby dates in the future. Select this option to do that.


Hero Page Upcoming


Include Upcoming Dates of Items Closed by Events:

Check this option to show the customer dates that have been made unavailable due to events you have created. If the option is unchecked, these dates will be hidden from view.

Number of items available to customers:

When viewing the booking portal, your customers will be able to see how many of each item are available. If this option is not used, the item will simply say available.




Unavailable Items:

When checked, this option will display your items even though they might not be available on the particular day you are viewing on the calendar. If you wish to use the show upcoming items option, you must leave this unchecked.

Sold Out Items

If left unchecked, items that are sold out will not be displayed to the customer when they are making a booking in your system. If you do check this option, however, sold out items will be displayed to the customer. This is a great way of showing how busy you are!


By default, when adding a weight to a category, the higher the number, the closer to the front of the list the category will appear. You can reverse this by selecting this option. Therefore, the higher weights will be displayed closer to the bottom of the list.


Start Date Advanced

Back to top

Automatically advance the calendar’s start date x number of days from the current date. Customers will still be able to select an earlier day, but this prompts them to look a certain number of days ahead, controlled by you.




Sold Out Label

Back to top

The default label for items that have sold out is, surprise, surprise, Sold Out. You can change this here to something that better suits your needs.




Unavailable Label

Back to top

The default label for items that are unavailable. You can change this here to something that better suits your needs.




Choosing this option will allow you to disable the customer facing reserve page. This means that the hosted booking page and website embedded booking portal will not be available. Rather, you will only be able to make bookings through the backend or via the API if you are using it.


CSS Editor

Back to top

From time to time, you may wish to make adjustments to some of the elements of your customer-facing booking page, which cannot be made through simple settings in your Checkfront dashboard. If you are familiar with CSS, you can make such changes using the CSS editor, located in the left sidebar.


Any custom CSS added here will be applied to both the hosted and embedded versions of your booking portal. Since our CSS elements can, and probably will change, we do not recommend using custom CSS, but the option is still available to you should you decide to use it.

Input your CSS overrides into the text area provided and click on the blue Save button to record your edits.

Custom CSS Entry

Some elements will need to be explicitly overridden, for example button {background-color: #red !important}



Back to top

If you have more than one active language in your Checkfront account, you can provide translations for your booking page by clicking on the Translate button in the left sidebar.


This will open a drop-down of any additional active languages in your account. Simply select the one you wish to edit from the list. In this case, since we’re in Canada, it’s French.

The button will now be surrounded by a blue highlight, as will any text field on the page that can be translated.


Layout Translation Examples


Remove the current label in each of these fields and replace it with your translation. When you’re ready, click on the Save Translation button in the left sidebar.


Was this article helpful?
I have a suggestion...