Using the Discover theme in Site Builder

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

 

---

Learn more about the Discover 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 Discover theme in Checkfront's Site Builder. If you haven't already done so, 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, 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 Discover, you're golden.  

 

 

---

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 for buttons on the homepage and smaller accents, such as the star ratings in the testimonial block and the days on the calendar.  

 

Secondary Colour (2)

For hourly or time slot items or products, this will be used as the accent colour for the day picker and time slot buttons on the item or product pages.  

 

Tertiary Colour (3)

For hourly or time slot-based items or products, this will be used as the accent colour for the day picker and time slot buttons on the item or product pages.  

 

Text Colour (4)

This colour option has the greatest effect on the theme. It's responsible not only for the main text colour, but Discover 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 clearly 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 page titles, section headings, and the logo if no image is provided (see Branding tab).  

 

Secondary Font

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

 

---

These settings allow you toggle on/off various display options and are unique to each theme. Getaway includes the following custom settings:  

 

 

Footer Style

The footer’s text and background colour is intelligently derived as shades of your chosen text colour (see above). Based on the text colour you choose, the footer style setting gives you three options of shade combinations to choose from for the footer: standard, contrast, and shade.  

 

 

Header Style

Just like the footer, the header comes with a choice of styles: standard, contrast, and shade.

 

 

Hero Image Overlay Opacity

This setting allows you to adjust the opacity of the colour that overlays the images in your hero content blocks or to disable the overlay altogether. It is applied to all the hero areas (both customizable and static) on your site: Homepage, Inventory page, Category page, and the individual Category and Item/Product pages. The way it works is there's a solid colour block positioned on top of the hero image. You can then set the opacity of that colour block to determine how much of the image underneath is revealed. You can choose from: No overlay (normal image view), 20%, 50%, & 80%.  

 

 

In the image above you can see that the white text gets lost a bit in our image when no overlay is applied. 50% overlay leaves the image looking a little dark, so, the optimum setting probably lies at 20% overlay!  

 

Retina Logo Support

When enabled, the Discover 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.  

 

Use Transparent Header

When enabled, your homepage header will become transparent and the images used in your hero blocks will be visible through the header, reaching up to the top of the page.  

 

 

---

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 Discover's theme presets: • Cool Preset • Modern Preset

 

---

Discovery comes with two default menus: Header and Footer. You will find detailed information on how to configure these menus in our Site Builder Navigation Guide.  

 

Discover navigation features social media icons that appear in both the header and footer. Currently, you are able to connect the following social media accounts: Facebook, Google Plus, Twitter, Instagram, YouTube, TripAdvisor, and Yelp.  

 

 

There are two ways to connect your social media accounts that will activate these icons. First, during the theme onboarding process when you first activate the Site Builder add-on, you can connect your social accounts during Step 1: Basic Information. If you didn’t enter your social media account URLs during this process, or you need to edit your entries, you can also access setup via the Site Builder main menu under Settings > Connected Services .  

 

 

Steps to Connect Social Media Accounts

1. In Site Builder, click on Settings in the left sidebar near the bottom of the screen.

2. Click on the Connected Services .

3. Select a social media service by clicking on its Connect link in the list provided.

4. When the URL field appears, enter the web address to your profile at the respective social media provider. Your changes are saved automatically.  

 

 

Once you add the URL, its respective icon will automatically appear in the header and footer navigation.  

 

Removing Social Media Accounts

If you no longer wish to include any of the social media icons, simply remove the URLs from the Connected Services screen by clicking on the Remove link.

 

 

---

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.

 

Discover comes with eight content block types: Feature, Inventory Search, Gallery, Testimonial, Instagram, Header, Featured Post, and Item Parameters. While some blocks are only available on certain pages, most 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, inventory, and categories pages, the hero blocks are comprised of several customizable components: a full-width image, heading and button. As an important focal point, the hero blocks can’t be switched out for another block type, but their look can be changed up by using the custom design settings: Use transparent header and hero image overlay opacity (note: any changes to these custom settings will be applied to all hero blocks on your website). We recommend your hero image has a minimum width of 1920px and a minimum height of 1080px to ensure clarity on larger screens.  

 

Feature Block

 

The feature block allows you to add up to three “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 at the top of the block.  

 

Gallery Block

 

The gallery block allows you to display up to six images with titles and captions. Galleries with 2, 3 or 6 images will be displayed in a grid. If you’re using 4 or 5 images, they will be arranged into a mosaic (as pictured above). Clicking on an image will open it in a slideshow, displaying the image captions and allowing customers to click through the gallery using the arrows on either side of the image.  

 

As well, the gallery can be given an optional headline and subheading which will appear centered above the images.  

 

Inventory Search Block

 

Available on your homepage, the inventory search block provides a place to search specific start dates. The search will return you to your inventory page, filtering out any items or products that are unavailable to start on that date. The block editor gives you the option to accompany the search form with an image, heading, and subheading.  

 

Inventory Block

 

Available throughout your theme, the inventory block allows you to list up to six of your items or products. In the block editor, you’ll find + Add an Item links allowing you to select the items or products you want to display. Your items or products will be shown with the image on the left, accompanied on the right with the item’s or product's title and summary. The summary content is pulled from the item’s or product's setup in your Checkfront account manager. This block also allows you to enter an optional headline and subheading, which will appear centred above the block.  

 

Testimonial Block

 

Available on the homepage and throughout your theme, the testimonial block allows you to showcase up to three testimonials from customers. For each testimonial, you’re able to add the author’s name, additional details, quote and a star rating. You’re also able to upload a custom image (picture or icon used to represent your source), which will be centred and cropped into a circle. As well, you can add a block heading and/or subheading. If using more than one testimonial, pagination will appear to the right of the quote, allowing users to navigate through them. In addition, when the full block is viewable in your window, Discover will automatically cycle through your testimonials.  

 

Instagram Block

 

Available on most pages and affixed to the top of your footer, the Instagram feed block pulls in the latest six images from your Instagram account with a block heading and subheading. To access your Instagram photos, you’ll need to enter an access token, which you can generate here with some easy-to-follow instructions. Once you’ve obtained your token, simply paste it into the Access Token field in your Instagram feed block editor.  

 

Item Parameters Block

 

Found on your item or product pages, the item parameter block allows you to highlight details specific to your item’s parameters or product's guest types.

For example, differing prices for adults vs. children or discounts based on the quantity being booked. Visit the inventory page in your Site Builder account to locate the block.  

 

You can add up to eight details, each with a heading and value.  

 

Featured Post Block

Found on your blog post pages, the featured post block acts as a sidebar on your post pages where you can highlight specific posts. In the block’s editor, selecting Add a post generates a drop-down menu where you can select the post you’d like to feature. You can add up to two posts in the block as well as a heading and subheading.  

 

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

Discover’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. 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 made up of four components: a Hero block, Header block, Item grid, and an Instagram block.  

 

Item Grid

Each grid item is comprised of the item’s or product's image with the item’s summary or product's details underneath. A book now link that will take customers to the item’s or product's booking page is also displayed. The summary that is displayed for each item or product is pulled from the item’s summary or product's details field in your main Checkfront account manager.  

 

---

 

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: Hero, Item Grid, and the Instagram block.  

 

---

 

Item/Product Page

Your item or product pages contain all the necessary elements for a customer to make a booking. They’re comprised of several static components and content blocks: Hero, Item Parameter block, 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 drop-down menu inputs. 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 inventory search on a previous page, the date inputs will populate with the last dates they searched.  

 

 

To select dates, simply select the start and/or end dates from the drop-down pickers, opening a calendar selector that allows you to make your selections. Once a start and end date have been chosen, the dates will appear marked off on the calendar, making it easy to see the length of the booking.  

 

Time Slot Bookings

For items or products allocated by time slots and hourly bookings, that do not span more than one day, users select a date using the day slider, or the view calendar link.  

 

 

Time slots, configured in your Checkfront account manager, will display below the date field. For hourly items or flextime products, selecting the date for the booking is similar to daily/nightly bookings, except that there will only be one date available to select, rather than both the 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 in the Checkfront account manager, the time options available in the drop-downs will vary.

For example, if your item or product is configured with a fixed length, only the start time will be available to select and the end time will be fixed to account for the fixed length of the booking.  

 

Item/Product Booking Details

 

Price Breakdown (1)

The price breakdown includes any parameters that are available for selection, with any corresponding price points and the dates selected. Below this, a voucher/promo code field to enter any discount codes. Below the promo code field, the booking subtotal is displayed with the Add to Cart button. When the add to cart button is selected, a message lets the customer know that the item or product has been successfully added to their cart and presents them with view cart and continue shopping links.  

 

 

Summary & Details (2)

On the left of your item or product page, just below the hero image, Discover will display the item’s or product's summary (configured in your Checkfront account manager). Below the summary, Discover will pull the item’s or product's details, providing they have been added to the item or product in your Checkfront account manager.  

 

Map (3)

If you've added an address or coordinates for an item in your Checkfront account manager, a map of the location will be displayed directly below the summary and details.  

 

Video (4) & Images (5)

Below your item or product details (and map, if configured), if you’ve added a YouTube link in the account manager, this video will also be displayed. Below the video, your item or product page will display up to five images that you’ve added in the account manager. 1-3 images will be displayed in a grid. If you’re using 4 or 5 images, they’ll be displayed in a mosaic, similar to the gallery block.