Support Guide

Detail Booking Page

    TABLE OF CONTENTS

  1. Booking Page Layout
  2. Category Display
  3. Category Default
  4. Search Bar Options
  5. Mobile
  6. Show
  7. Sorting
  8. Start Date Advanced
  9. Sold-out Label
  10. Unavailable Label
  11. Advanced
  12. Introductory Text
  13. CSS Editor
  14. Translation
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

 

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

Hero Booking Page:
This particular document relates to the Detail Booking Page option. For the Hero Booking Page, please click here.

So let’s have a look at the detail booking page layout options and how they will affect your customer’s user experience.

 

Booking Page Layout

Your customer-facing booking portal can be displayed in one of two ways. You may choose from either the Hero Page or the Detail Page.

 

manage-layout-booking-page

 

The Detail Page, which we are looking at in this document, is the original, more traditional looking booking portal that has always been available in Checkfront.

 
 


 

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 2 choices – Tabs or Drop-down.

 

category-display

 

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!

 
layout-tab-format
 

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.

 
layout-drop-down-format
 

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.

 
 


 

Category Default

Choose which category will be automatically shown to your customers when they first arrive at your booking page.

 

category-default

 

Selecting Show All will list all your items together on one page. You can then search by an individual category, but the initial view the customer sees will be all items.

Selecting Show Category Index will provide the customer with a list of the available categories when they arrive at your booking portal. They can click on one of these categories to see the items within.

 

select-a-category

 

Alternatively, you can set your default category view as one of the individual categories in your account. Simply select this from the list and it will be shown to your customers when they initially arrive at the booking page. This is great for providing your customers with a quick view of the options available to them in a specific category.

 
 


 

Search Bar Options

You can customise the sidebar in your booking portal to provide customers with additional search fields.

 

search-bar-options

 

The options are as follow:

 
end-date-keyword
 

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 one(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 optimised 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

You may choose whether or not to show your inventory items based on their availabilities. The following options are available to you:

 

show-upcoming-items

 

Automatically advance to next available date:

Select this option if you would like your customer to be shown items on their next available date. If left unchecked, the customer will be shown the current date, or date selected, even if there is nothing available.

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.

 

nothing-available

 

Include upcoming dates of items closed by events:

Check this option to show the customer upcoming availability on items that have been made unavailable due to events you have created. If the option is unchecked, these dates will be hidden from view.

 
upcoming-booking-dates
 

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.

 

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

 

unavailable-items

 

Soldout items:

When checked, this option will display your items if they are sold out on that particular day. You will see a sold out label, which can be customised a bit later on.

 

sold-out-label

 
 


 

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.

 

sorting

 

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.

 

start-date-advanced

 

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.

 

sold-out

 

This is how it will look to the customer on the front end:

 

sold-out-label

 
 


 

Unavailable Label

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

 

unavailable-label

 

This is how it will look to the customer on the front end:

 

unavailable

 
 


 

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.

 

advanced

 

Also, you can choose to Restrict Staff/Partner Bookings by Category. If checked, you can then select the categories that are available for booking when configuring staff accounts.

 
 


 

Introductory Text

Anything you add here will be displayed automatically above the booking portal for all customers to see.

 

introductory-text

 

It’s a great opportunity to highlight any special deals or important instructions you want your customers to see. A simple welcome is also nice!

 
intro-text-portal
 

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.

 
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

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.

 
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.