Support Guide

Hero Booking Page

  1. Booking Page Layout
  2. Hero Image
  3. Category Display
  4. Grid Layout
  5. Search Bar Options
  6. Mobile
  7. Show
  8. Sorting
  9. Start Date Advanced
  10. Sold-out Label
  11. Unavailable Label
  12. Advanced
  13. CSS Editor
  14. Translate
Where do I access this in Checkfront?
Your booking page layout options are accessible via your main Checkfront menu bar at the top of the page at Manage > Layout > Booking Page

 

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.

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

 

Hero Booking Page

 

Booking Page Layout

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

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

 

Hero Page Settings

Static Image

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

 

Jumbotron

 

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.

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

 

YouTube Background

 

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

 

Hero Text

 

An example, finished header, is shown below:

 

Hero Page Final Header

 

 


 

Category Display

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.

Tabs:

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!

 

Hero Page Tabs

 

Drop-down:

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.

 

Hero Page Dropdown

 

Grid:

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.

 

Hero Page Grid

 

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!

 

Hero Page Categories

 

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.

Grid Layout

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

 

Hero Page End Date

 

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

 
 


 

Mobile

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

 
 


 

Show

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.

 

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

 
 


 

Sorting

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

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

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

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

 
 


 

Advanced

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

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.

 

Layout CSS Editor

 

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}

 
 


 

Translate

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.

 

Layout Translate

 

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.