Introduction to managing booking page layouts – Checkfront

The layout of your booking page shapes the first impression Customers have of your business. A well-chosen design improves clarity, highlights your offerings, and makes the booking process smooth and engaging. Choosing the right layout can even increase conversions by guiding guests to the right items more quickly.

Read this overview of our Booking Page layout, including the differences between the Detail and Hero layouts, step-by-step instructions on getting started, and next steps.

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 manage your account.

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

This feature is available in both our classic versions: classic items (Inventory > Items) and classic products (Inventory > Products). → Learn more about products

Booking page layout overview

Booking page tab in system layout settings highlighting booking page layout options with an arrow pointing to the section for choosing tabs or dropdown display.

The Booking Page layout can be customized to best suit your business needs. Any changes made here are automatically updated on your hosted booking page or embedded website booking portals.

Your Customer-facing booking portal can display in one of two ways: the Detail Page or the Hero Page.

Choosing the right layout

Each layout suits a different kind of booking experience. Use these differences to decide which one fits your business and your guests.

1. Detail Page Layout

Customer-facing booking page displaying available tours with images, descriptions, pricing, and booking options alongside a date and keyword search filter.

The Detail Page is the original, more traditional-looking booking portal that displays items/products in a list or grid view.

Detail Page Layout benefits

Shows your full list or grid of items and pricing to guests immediately, which suits a larger inventory
Displays your logo and brand colors across the top of the page, keeping the booking page visually consistent with the rest of your site
Keeps the calendar and search filters in a fixed position alongside item details, so guests can compare dates and options without losing their place in the list
On mobile devices, color-coded availability in the calendar stays visible within the page content instead of being covered by the phone's built-in date picker
Suits catalog-style businesses with many items, options, or categories to browse
Doesn't depend on a strong hero image, so it works well if you don't have professional photography for every item, or if the page is embedded in a site that already supplies its own imagery and branding

2. Hero Page Layout

Customer-facing booking page set to hero layout style showing a large background image with title text and available tours displayed in a grid with images and booking options.

The Hero Page is a modern-looking booking portal with a big hero image at the top and a date select box front and center.

Hero Page Layout benefits

Leads with a large image or video, giving your booking page a strong, modern first impression
Puts a single date select box front and center, which works well for a smaller or simpler inventory
Gives your brand a more marketing-forward, visual presentation than a list-based layout
Grid-view options let you show item descriptions directly in the listing and add an overlay Book Now menu, so guests can browse and act in fewer clicks

Callout icon of a wrench and screwdriver, indicating configuration settings.

Getting started with the booking page layout

Go to Manage > Layout > Booking Page.
Review default layout options (e.g., Hero + Detail, Grid, Category settings).
Upload or verify your hero image/video (if your layout supports it).
Configure search bar options (date range, keyword search) to let customers filter.
Set inventory display options (show unavailable, sold out, number available) as desired.
Translate or localize your layout (if your account supports multiple languages).
Click the Save button to save your layout changes.
Preview your booking page and test across devices (desktop, mobile) to confirm the layout behaves as expected.

Next Steps

Once you’re comfortable with the basics above, check out these deeper-dive articles:

Each article walks you step-by-step through that specific feature.

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

Managing hero page settings for booking page layouts >

Related to