Detail Booking Page

Estimated reading time: 5 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.


Hero Booking Page:

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


So let’s have a look at the detail booking page layout options and how they will affect your customer’s user experience.


Booking Page Layout

Back to top

Your customer-facing booking portal can be displayed in one of two ways. You may choose from either the Hero Page or the Detail Page.




The Detail Page, which we are looking at in this document, is the original, more traditional looking booking portal that has always been available in Checkfront.


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 2 choices – Tabs or Drop-down.





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!



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.


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.


Category Default

Back to top

Choose which category will be automatically shown to your customers when they first arrive at your booking page.




Selecting Show All will list all your items together on one page. You can then search by an individual category, but the initial view the customer sees will be all items.

Selecting Show Category Index will provide the customer with a list of the available categories when they arrive at your booking portal. They can click on one of these categories to see the items within.




Alternatively, you can set your default category view as one of the individual categories in your account. Simply select this from the list and it will be shown to your customers when they initially arrive at the booking page. This is great for providing your customers with a quick view of the options available to them in a specific category.


Search Bar Options

Back to top

You can customize the sidebar in your booking portal to provide customers with additional search fields.




The options are as follow:


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 one(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.


You may choose whether or not to show your inventory items based on their availabilities. The following options are available to you:




Automatically advance to next available date:

Select this option if you would like your customer to be shown items on their next available date. If left unchecked, the customer will be shown the current date, or date selected, even if there is nothing available.

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.




Include upcoming dates of items closed by events:

Check this option to show the customer upcoming availability on items 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.




Soldout items:

When checked, this option will display your items if they are sold out on that particular day. You will see a sold out label, which can be customized a bit later on.




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.




This is how it will look to the customer on the front end:




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.




This is how it will look to the customer on the front end:




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.




Also, you can choose to Restrict Staff/Partner Bookings by Category. If checked, you can then select the categories that are available for booking when configuring staff accounts.


Introductory Text

Back to top

Anything you add here will be displayed automatically above the booking portal for all customers to see.




It’s a great opportunity to highlight any special deals or important instructions you want your customers to see. A simple welcome is also nice!


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.


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...