Using the Gateway theme in Site Builder

Site Builder is a legacy product and is no longer available to new Customers.

 

---

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

---

Site Builder is an optional add-on to all plans.

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, new or both?

• The Site Builder feature is available to both those using items (Inventory > Items), a key feature of our classic version of Checkfront, and those using products (Inventory > Products), a key feature of our newest version of Checkfront.
  

 

New to Checkfront - Products ✨ Products (Inventory > Products) is the successor feature to items (Inventory > Items) and is available in our newest version of Checkfront. Not yet on our newest version and interested in upgrading? Please get in touch with our Technical Support team for more information. Discover more product-related help articles here: Products (New).

 

---

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.  

 

 ;

---

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.  

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.  

 

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.  

 

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

 

---

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.    

 

---

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: • Fresh Preset • Cool Preset

   

---

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.  

 

 

---

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.

 

Choose Dates

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.

 

Configure Booking

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.

 

View Summary

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

 

Hero

 

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.  

 

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 items or products that are unavailable. 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. As well, the block itself can be given an optional headline and subheading which will appear centered 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 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.  

 

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

 

Testimonial Block

 

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

 

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

 

Inventory Page Header Block

 

The inventory header block allows you to 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.  

 

---

 

Home Page

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.    

---

 

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

 

---

 

Category Page

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.    

 

---

 

Item/Product Page

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.  

 

---

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

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.  

 

 

Hourly Bookings

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.  

 

Map

If configured in your Checkfront account, a map will also 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 of the available blocks, or, simply removed.