Managing hero page settings for booking page layouts

Your hero header is the first thing Customers see on your booking page. A compelling image or video at the top of the page creates a strong first impression, reinforces your brand, and guides guests confidently into the booking process. Done well, it can improve customer trust and even boost conversions.

Learn how to work with the Hero Page Settings, including accessing settings, adding a header image or background video, displaying images when embedded, and adding or editing hero text.

Are you new to the Booking Page? Please read the first article in this series for an introduction to the Booking Page.

Accessing the features mentioned in this article

Where can I find this feature using the top menu?

• Manage > Layout > Booking Page
   

What more do I need to use this feature?

• Admin permissions to configure Booking Page options.
   

Which Checkfront version supports this feature - classic items, classic products, or both?

• This feature is available in both our classic items version, using classic items (Inventory > Items), and our classic products version, using classic products (Inventory > Products).  → Learn more about products

Click on the Hero Page Settings link to access Hero Page Settings.

At the top of the booking portal is a Hero Image. This element can be a static image or a YouTube video. The Hero Image is the first thing your Customers see when they arrive on your booking page.

Select the Jumbotron option for the Hero Image Display setting to use a static image as your Hero Image.

Click Choose File next to Hero Image to locate the image on your computer.

If you want to remove the current image, click the Delete Hero Image button.

Image resolutions and dimensions The image should be at least 1920 x 450 px. On smaller displays, the image sides appear cropped. To reduce cropping, use an image taller than 450 px.

Add a video to your home page! With this setting, you can select a YouTube video to display as the Hero Image. This video plays automatically, without sound, when a Customer arrives at the page.

Enter the URL of the video from YouTube and click the Save button.

Adding a background video If you add a YouTube background video and the video fails to load, the booking page defaults to showing a sample image. To prevent this and have the image default to one of your choosing instead, upload a Jumbotron image and add the YouTube background video.

You can choose whether to display the hero section when embedding your booking page into another site (e.g., via widget, WordPress, or iframe).

Check the Display when embedded option to display the image/video.

 

Hosted booking page image/video display The /reserve hosted booking page always displays the Hero Image/video.

You can enter the copy in the Hero Text field provided if you want to display a tagline over the image/video in the Hero header.

We have included an example finished header with Here Image and Hero Text below.

1. Go to Manage > Layout > Booking Page.
2. Open the Hero Page Settings section.
3. Choose your display option: Jumbotron image or YouTube video.
4. If using an image, click Choose File to upload (or Delete Hero Image to remove).
5. If using a video, paste the YouTube URL.
6. (Optional) Enable Display when embedded if you want the hero to show inside widgets or plugins.
7. Add or update Hero Text if desired.
8. Click the Save button.
9. Preview your Booking Page to confirm the hero displays correctly.

Next Steps

The following article explains how to manage category display settings for booking page layouts.

< Introduction to managing booking page layouts   |   Managing category display settings for booking page layouts >