Introducing the Hero Page Design for Your Booking Website

By Checkfront Marketing

Booking ManagementBooking Management

The Checkfront hero Page design on a laptop

We’re pleased to introduce a brand new booking page design, with a focus on gorgeous item photos, easy searches, and—as always—the website traffic conversion. This new Hero page design works for responsively designed websites; our legacy booking page is still around if that’s what you prefer. Here’s a tour of the new features.

The perfect booking page design template

You can enable the new ‘Hero’ page in Manage > Layout > Booking Page, and clicking “Hero Page” under the “External Reservation Display” options. You will also be able to toggle between the hero page and legacy page options by clicking the blue/green button on the left sidebar, as highlighted below:

Hero booking page setup in Layout section of Checkfront dashboard

One major change is the addition of category images. You can add images to each category by going to Inventory > Categories; there will be an option to add or delete a photo when you click on a category name. Category images are used in the Grid booking page layout.

Creating categories for booking page in Hero website theme

Create an eye-catching header

The new booking page header is attention-grabbing and unique. It has two options for a background: the Jumbotron, which will display a photo of your choice, or a Youtube background video, which will loop a video underneath your customized title. In order to set your header, go to Manage > Layout > Booking Page, and click on “Hero Booking Page” on the left-hand sidebar. You’ll then be able to set your hero header image, Youtube video, and title text. The header also includes a search bar by default, where customers can set their preferred dates and search by keyword.

Please note that this header is not available in the droplet or site plugins. It will only show up on the of your booking page.

Uploading a Hero image for the Hero website theme

Choose between booking page layout options

There are now three options for the item layout: Tabs, Drop-Down, or Grid. They can be accessed in the booking page settings. The three layouts each work differently, and your best option will depend on your items and how they are categorized.

The Grid layout works great if you have a large number of categories. It organizes them into a series of beautiful photographs on a grid; if you hover over a category, you’ll see a description pop up and a prompt to view the items within:

Layout of Hero website theme for tour and activity operators

The item view is also a photo-based grid. If a customer clicks on “Book Now” or “View Availability”, a booking window will pop up.

The grid layout has two additional options: whether you wish to show descriptions in the item view, and whether you want a “Book Now” icon inside the item image or as a tab beneath it.

Tabs work well for a businesses with a small number of categories. As with the legacy booking page, they group your items by category and show those categories as a series of tabs at the top of the page.

Category selection in Hero website theme

The Drop-Down layout provides the best of both worlds: it displays each individual item rather than the categories, but arranges them in a beautiful image-based layout. It’s very similar to the Grid option, except that clicking on a photo takes you right to a booking window rather than to a second menu screen.

Booking process layout for Hero website theme

The categories and images appear on the page based on their assigned weight number, which can be changed in Inventory > Items or Inventory > Categories. The booking page settings screen contains an option to sort either by ascending or descending weight number. By default, Checkfront will display the highest-numbered weights first. This becomes very important when using the Grid or Drop-Down layouts, as you will need to consider which items or categories your customers will see.

Please note: we’re still in the process of rolling out Checkfront v3.3.3, so if you don’t already see the options for our new layout, you should be seeing your account updated in the next 24 hours. Also please note that you must have at least one item image for the Hero page to work.

Want to see how the new Hero Page design looks on your website?

Try Site Builder for free.

Launch your new website and start taking bookings in no time!