- Site Builder is available to those using items (Inventory > Items), a feature of our classic version of Checkfront.
- Interested in using Site Builder with products (Inventory > Products)? Your account must be a member of our Early Access Program. Please reach out to Checkfront Technical Support to learn more.
Early Access Program
The new product feature mentioned in this article is currently part of our Early Access Program, which means it is available to select Customers to try out and provide us with feedback.
Find our complete set of help articles related to the Early Access Program here: Early Access Program.
Before we get started, this article is a guide to configuring the Getaway theme in Checkfront's Site Builder.
If you haven't already done so, then we suggest you familiarize yourself with the Site Builder Knowledge Base as the theme guides do not focus on the technical aspect of configuring your website and will not cover all the sections and features you might see in the screenshots.
Rather, we will use this guide to look at the more theme specific aspects of the platform. If the guide doesn't jibe with what you're experiencing in Site Builder, then please double check the theme you're using.
Steps to Confirm Your Active Theme
1. In Site Builder, click on Design in the left sidebar.
2. Click on the cog in the top right corner of the design window.
3. You will see the active theme in the next view. If it says Getaway, you're in business.
Theme SettingsBack to top
The theme settings enable you to customize the style and aesthetic of your Site Builder website. Click on the Design link in your Site Builder left sidebar to get started.
StyleBack to top
The first view you will see after entering the design window is the Style tab.
The style settings allow you to change the colours and fonts on your website. Choose your own custom settings or apply one of the presets (more on that to come), enabling you to tweak just a few choice elements.
ColoursBack to top
Primary Colour (1)
Used as the background colour for the featured, testimonial, and inventory blocks on the regular page and contact page templates. It’s also used as the button colour for the featured item block and for the progress indication on the booking progress bar.
Secondary Colour (2)
Used as the button colour in the booking search block and smaller accents such as the calendar days, time slot buttons, and the star ratings in the testimonial block.
Text Colour (3)
This colour option has the greatest effect on the theme. It's responsible not only for the main text colour, but Getaway uses your chosen text colour to intelligently determine complementary shades of this colour to be applied to block backgrounds. This way your site blocks are cleanly defined and your text is always legible. It's likely a good idea to make this a darker and slightly desaturated version of your primary brand colour.
FontsBack to top
Used for the general body text of your web pages and any text that isn't a heading.
Custom SettingsBack to top
These settings allow you toggle on/off various display options and are unique to each theme. Getaway includes the following custom settings:
Show Grouped Item Details
When enabled, the child items in a grouped product will display a Show Details link beside them on the item page. This link will open a modal displaying the content from the details field of that child item. This is useful if you need to communicate important information, unique to each child item. If the setting is disabled, the Show Details link will be hidden.
Show Cart Button Instead of Booking Progress Bar
When enabled, the booking progress bar will not display on the inventory and item or product pages. Instead, when a customer has booked an item or product, a Cart link will display in the far right of the header and will indicate how many booked items or products are pending in the cart.
Hide Sold Out Inventory Items
If enabled, when performing an inventory search from either the homepage or the inventory page, items or products that are "sold out" for the selected dates will be hidden. If this setting is disabled, the sold-out items or products will display in the search results, but the configure booking link will be replaced by text saying Unavailable For Selected Dates.
However, customers will still be able to select the item or product to view its page.
Retina Logo Support
When enabled, the Getaway theme supports the use of retina logo images. A retina logo should be twice the size of the recommended dimensions of 600px wide x 375px tall. If this setting is disabled and you try to use a retina logo, the image you’ve uploaded will display at its natural dimensions.
Theme PresetsBack to top
We looked earlier at how you can change the fonts and colour scheme of your website with a few simple clicks. If design isn't your forte, Getaway comes with two presets that adjust the fonts and colours for you. The elements of each preset are designed to be complementary to each other and provide your website with a couple of different looks.
Steps to Change Website Preset
1. In Site Builder, click on Design in the left sidebar.
2. Click on the cog in the top right corner of the design window.
3. Select a theme preset from the drop-down menu.
4. Uncheck any of the three preset update options you don't wish to apply the change to. These are Colours, Fonts & Custom Settings.
5. Click Update .
Theme Preset Examples:
If you'd like to see some examples of the different presets in use and maybe find some inspiration while you're at it, then check out the following examples of Getaway's theme presets:Cool Preset
Site NavigationBack to top
Getaway comes with three default menus: Header, Footer, and Category Filters. You will find detailed information on how to configure these menus in our Site Builder Navigation Guide. Since category filters don't come in all themes, we might as well have a look at them here too. You can edit your category filters through the Navigation menu in your Site Builder left sidebar.
This enables you to narrow down the search on your inventory page by selecting one or more categories to include. Items or products from categories that are not selected will be filtered out from the search results.
Steps to Add Additional Categories:
1. Click on the edit link to open the category filter edit window.
2. Click + Add Item to Category Filter Navigation .
3. Select Category from the Link Type drop-down menu.
4. Select the category you wish to add from the Destination drop-down menu.
5. Change the text label if required.
6. If required, hold your mouse on the two horizontal lines to the left of the link type and drag the category into a new position.
7. Click Update to save your progress. Once you've configured the category filters, you will see them at the top of your Inventory page.
Click on the categories you wish to include in your search. Only the items or products from the categories selected will be displayed. Everything else will be filtered out.
Booking Progress BarBack to top
The booking progress bar runs along the top of the inventory and item pages. It shows a pipeline of the steps necessary to complete a booking. The bar can be turned off (see custom settings) in favour of a more familiar cart link that will appear in the site’s header navigation.
The bar tracks four steps to completing a booking: choose dates, choose a room, configure booking, and view summary. Once a customer has completed a step, the bar will be updated with their selection/progress.
Shows the dates that are currently selected by the customer. By default, the check-in date will be set for the current day and check-out the following day. Once a customer selects their own dates, either via the booking search or the date selector on an item or product page, the dates shown in the progress bar will update to reflect the selection.
Choose a Room
Updates to reflect the item or product page that the customer is visiting. If the customer is not currently on an item or product page or navigates away from an item or product page, this stage will update to Choose a Room.
Informs the customer that they need to configure their booking (choose any necessary parameters or options below). When the customer is ready and selects Book Now, this will update to Booking Configured.
Will be labeled View Summary until an item or product has been added to the cart, at which point it will update dynamically to show how many items or products are pending. Once an item or product has been added, the View Summary label will become a link that customers follow to get to their cart.
Content BlocksBack to top
Content blocks are the customizable components which you use, in combination with other static components, to assemble your site’s pages. On the homepage, in particular, content blocks provide a ton of flexibility as you’re able to add custom content, switch a block for a different one or remove them all together. To access a block’s customization options, or to swap it out for another block type, simply hover over the block to reveal a menu of your options (help, delete, switch or edit).
Content Block Documentation:
For more information on content blocks and how to manage them, please visit our knowledge base article on managing layout. Here, we will show you in detail how to change a block type, edit a block's content and add/remove blocks from the page.
Getaway comes with ten content block types: Hero, Booking Search, Feature, Gallery, Inventory, Featured Item, Call to Action, Testimonials, Categories Header and Inventories Header. Some blocks are specific to certain pages only, like the category and inventory header blocks which are only available on their respective pages. However, most block types are available throughout the theme. Just hover over a block to reveal your menu options and click Switch Block Type to see which blocks are available in that location.
The first block on your homepage, the hero block, is comprised of several customizable components. These are a full-width image, headline, subheading, and a call to action. As an important focal point, the hero block can not be switched to another block type. We recommend your hero image has a minimum width of 1920px and a minimum height of 1080px to ensure clarity on larger screens.
The booking search block is available on the home, inventory, and category pages, allowing customers to search your inventory by specific dates, filtering out any items or products that are unavailable. The block editor gives you the option to customize the button text.
The feature block allows you to add up to two alternating “Features” with an image, title, description, and customized link. As well, the block itself can be given an optional headline and subheading which will appear centered above the block.
The gallery block allows you to display up to six full-width images with titles and captions. If you have uploaded more than one image, a navigation bar will appear below, prompting customers to scroll through the images at their leisure. Titles and captions will appear in white text boxes at the bottom right corner of each image. As well, the gallery can be given an optional headline and subheading which will appear centered above the block.
This block allows you to list up to six of your items or products. In the inventory block editor, you’ll find inventory search dropdowns, allowing you to select the items or products you would like to display. Your item’s or product's image will display on the left, coupled on the right with the item’s or product's title and summary (as configured in your Checkfront account). This block also allows you to enter an optional headline and subheading, which will appear centered above the block. On a desktop computer, the inventory items or products will be listed in a grid. However, in tablet and mobile views, the items or products will realign into a horizontal scroll for easy swiping on handheld devices.
Featured Item Block
The featured item block allows you to highlight a specific item or product in your inventory which will be displayed as a large full-width image with the item’s or product's name, summary, and a customizable (text) button. The image used is the first image that you have uploaded for the item or product in your Checkfront account. Due to the larger format, we suggest an image that has a minimum width of 1920px. This will help to ensure good clarity when viewed on a larger screen.
Call to Action Block
The call to action block appears as a solid full-width block, overlaid with a heading, description, and hyperlinked button. This is quite a flexible block and can be used to welcome customers to your site, say a bit about your offerings, or share news and seasonal promotions.
The testimonials block enables you to showcase up to three testimonials from your customers. For each testimonial, you’re able to add the author’s name, other details (such as their location), a quote, and a star rating out of five. You’re also able to upload a custom image (picture or icon used to represent your source), which will be centered and cropped into a circle. The block title and sub-title are also customizable.
Category Page Header Block
Inventory Page Header Block
Rich Text Block
Slightly different from the other blocks we've looked at, the rich text block is a text editor that enables you to create, format, and edit text content.
You'll find these in a few spots throughout the theme, most noticeably below the map on the contact us page and below the title on the about us page. This block is also used on the blog pages.
Plan Types & FeaturesBack to top
Getaway’s homepage is comprised of a hero block followed by up to four customizable sections, each of which has the option to be swapped out for a different block type. Hovering over each section will reveal options to delete, edit or swap it out for another block. By default, Getaway comes pre-populated with these four blocks: Feature, Inventory, Featured Item, and Call to Action. See the section above for more details on each of these block types. For full instructions on how to edit and manage content blocks, please see our knowledge base article on managing layout.
The inventory page provides a grid of all the items or products that are available for booking on your site and is comprised of several static and customizable blocks: Booking Progress Bar (optional), Inventory Header, Booking Search with category filters, your Item Grid, and a Testimonial block that can be swapped out for a Gallery block, Feature block, Inventory block, Featured Item block, or the Call to Action block.
Each grid item is comprised of the item’s or product's image on the left and on the right, the item’s or product's summary as well as a configure bookings link that will take customers to the item’s or product's booking page. The summary that is displayed for each item or product is pulled from the item’s summary or product's details field in your Checkfront account.
A category page is similar in function to the inventory page except that instead of listing all your items or products, it lists the items or products specific to one category. Similarly, a category page is comprised of both static and customizable sections: Header, Booking Search, Item Grid, and a block of your choice.
Your item or product pages are comprised of several static components and customizable blocks: Booking Progress Bar, Hero, Date/Time Selector, Booking Parameters, Item/Product Description, and Item/Product Images/Videos.
Making a BookingBack to top
Each item or product page will display all the necessary components for customers to configure their booking. This includes, but is not limited to, date and time inputs (style varies by item’s or product's allocation), parameter selections, and a price breakdown summary that displays the selected parameters with pricing, a discount/promo code field, and subtotals for booking configuration.
Date & Time Inputs
For daily and nightly bookings, the inputs will appear as start and end date blocks, as seen in the image below. By default, the dates displayed are today’s date as the start date with tomorrow’s date as the end date. If a customer has used the booking search on a previous page, the date inputs will populate with the last dates they searched. To change the start date, simply select the start date, opening a calendar displaying the current month and following month. Any unavailable dates grayed out. Once a start date is selected, the end date block automatically activates and as the customer hovers over potential end dates, the date range becomes highlighted, making it easy to discern the dates being selected.
Time Slot Bookings
For timeslot items or products, selecting the date for the booking is similar to that of daily/nightly bookings. However, there will only be one date available to select, rather than a start and end date. In addition to the date selector, the time slots (configured for the item or product in your Checkfront account), will display below the date field. The user simply selects the time slot they want by clicking on it.
For hourly items or flextime products, selecting the date for the booking is, again, similar to that of daily/nightly bookings. However, based on how your inventory is configured, there may only be one date available to select, or, both start and end dates. In addition to the date selector, the available start and end times are displayed in separate drop-down menus.
Depending on the configuration of your hourly item or flextime product, the time options available in the dropdowns will vary.
For example, if your item is configured with a fixed length, only the start time will be available to select and the end time dropdown will be fixed, to account for the fixed length of the booking (grayed out as in the image above).
Item Booking Details
Summary & Details
On the left of your item or product page, just below the Hero image, Getaway will display the item’s or product's summary (pulled from your Checkfront account). Below the summary, Getaway will print the item’s details (pulled from your Checkfront account) if using items.
Images and Videos
Below your item or product description, Getaway will display up to four images in a slideshow (pulled from your Checkfront account). You may notice that Checkfront allows you to add up to five images per item or product. Getaway pulls the first image you upload to use as the Hero image for your item’s or product's page and the remaining four are shown in the slideshow. If you’ve added a YouTube link to your Checkfront account, this video will also be displayed below the image slideshow.
If configured in your Checkfront account, a map will also display below your images and video.
At the bottom of every item or product page, you’ll find a customizable block that can be swapped for any of the available blocks, or, simply removed.