Using the Gateway theme in Site Builder – Checkfront

Learn more about the Gateway theme in Site Builder, including activation and the multiple settings available.

Which plans include this feature?

Legacy: Available to existing Site Builder Users only. No further updates are planned.
Current: No longer available
→ Learn more about our current plans or how to change your plan.

Where can I find this feature using the top menu?

Manage > Site Builder

What more do I need to use this feature?

Admin permissions to manage your account or restricted permissions to Access Site Builder.

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

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

Site Builder Gateway Theme Documentation

Before we start, this article guides configuring the Getaway theme in Checkfront's Site Builder.

If you haven't already done so, we suggest you familiarize yourself with the Site Builder Knowledge Base. 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 have to 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, 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 Settings

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.

Style

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 custom settings or apply one of the presets (more on that to come), enabling you to tweak just a few choice elements.

Colours

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 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, slightly desaturated version of your primary brand colour.

Fonts

Primary Font

Used for the general body text of your web pages and any text that isn't a heading.

Secondary Font

Used for page titles, section headings, and the logo if no image is provided (see Branding tab).

Custom Settings

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 must 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 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 can still 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, your uploaded image will display at its natural dimensions.

Theme Presets

We looked earlier at how you can change your website's fonts and colour scheme with a few simple clicks. If design isn't your forte, Getaway comes with two presets that adjust your fonts and colours. Each preset's elements are designed to complement 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 if you don't wish to apply the change. 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:

• Fresh Preset

• Cool Preset

Site Navigation

Getaway has three default menus: Header, Footer, and Category Filters. Detailed information on configuring these menus is in our Site Builder Navigation Guide. Since category filters don't come in all themes, we might as well 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 the search on your inventory page by selecting one or more categories to include. The search results will filter out items or products from categories that are not selected.

Steps to Add Additional Categories:

1. Click 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.

Category Filter Working

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 Bar

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) for a more familiar cart link appearing in the site’s header navigation.

Booking Progress Bar

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.

Choose Dates

Shows the dates that the customer currently selects. 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 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.

Configure Booking

Informs customers that they must 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.

View Summary

Will be labelled 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 customers follow to get to their cart.

Content Blocks

Content blocks are the customizable components you use to assemble your site's pages in combination with other static components. On the homepage, in particular, content blocks provide a ton of flexibility as you can add custom content, switch a block for a different one or remove them altogether. 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 how to change a block type, edit a block's content and add/remove blocks from the page.

Getaway has 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, like the category and inventory header blocks available only 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.

Hero

Hero Block

The first block on your homepage, the hero block, comprises 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.

Booking Search

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 unavailable items or products. The block editor gives you the option to customize the button text.

Feature Block

The feature block allows you to add up to two alternating “Features” with an image, title, description, and customized link. The block can also be given an optional headline and subheading, which will appear centred above the block.

Gallery Block

The gallery block allows you to display up to six full-width images with titles and captions. If you have uploaded multiple images, a navigation bar will appear below, prompting customers to scroll through the images at leisure. Titles and captions will appear in white text boxes at the bottom right corner of each image. The gallery can also be given an optional headline and subheading, which will appear centred above the block.

Inventory Block

Featured Item Block

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.

Testimonial Block

The testimonials block enables you to showcase up to three testimonials from your customers. For each testimonial, you can add the author’s name, other details (such as their location), a quote, and a star rating out of five. You can also upload a custom image (picture or icon used to represent your source), which will be centred and cropped into a circle. The block title and sub-title are also customizable.

Category Page Header Block

Category Header Block

The categories header block allows you to add a custom headline and subheading to your categories page.

Inventory Page Header Block

Inventory Header Block

The inventory header block lets you add a custom headline and subheading to your inventory page.

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 & Features

Home Page

Getaway’s homepage comprises a hero block followed by up to four customizable sections, each of which can 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 editing and managing content blocks, please see our knowledge base article on managing layout.

Inventory Page

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.

Item Grid

Each grid item comprises the item’s or product's image on the left, and on the right, the item’s or product's summary and a configure bookings link that will take customers to the item’s or product's booking page. The summary displayed for each item or product is pulled from the item’s summary or product's details field in your Checkfront account.

Item Grid

Category Page

A category page is similar 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 comprises static and customizable sections: Header, Booking Search, Item Grid, and a block of your choice.

Item/Product Page

Your item or product pages comprise 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 Booking

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

Daily/Nightly Bookings

The inputs will appear as start and end date blocks for daily and nightly bookings, 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 and opening a calendar displaying the current month and the 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.

Date Selector

Time Slot Bookings

For timeslot items or products, selecting the date for the booking is similar to that of daily/nightly bookings. However, one date will be 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.

Hourly Bookings

For hourly items or flextime products, selecting the date for the booking is similar to that of daily/nightly bookings. However, based on how your inventory is configured, one date may be 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

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 be displayed below the image slideshow.

Map

If configured in your Checkfront account, a map will display below your images and video.

Additional Block

At the bottom of every item or product page, you’ll find a customizable block that can be swapped for any available blocks or simply removed.