The New Checkfront ‘Hero’ Booking Page Layout

by Mia Steinberg

We’re pleased to introduce a brand new redesign for your main booking page, with a focus on gorgeous item photos, easy searches, and—as always—the best customer usability experience. This new Hero booking page 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.

online-booking-page-layout

The Back End

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:

page-optiosn

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.

summit-cabin

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 yourbusiness.checkfront.com/reserve version of your booking page.

oregon-awaits

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:

hero-layout-hover

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.

tab-layout-items

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.

drop-down-layout

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.

For more information, see our support document on the Hero page.

Smart Simplified Online Bookings

Attract more customers with online bookings and make reservation, payment and customer management a breeze.