Using the Discover theme in Site Builder

---

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

---

Which plans include this feature?

Legacy:  Available upon request
New:  Available upon request
→ Learn more about our new 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, new or both?

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

 

---

Before we start, this article guides 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 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)

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

 

Tertiary Colour (3)

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

 

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

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. It works because 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, your uploaded image 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 the top of the page.  

 

 

---

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

 

---

Discovery comes with two default menus: Header and Footer. Detailed information on configuring these menus is in our Site Builder Navigation Guide.  

 

Discover navigation features social media icons in the header and footer. Currently, you can 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 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 icon will automatically appear in the header and footer navigation.  

 

Removing Social Media Accounts

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

 

 

---

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.

 

Discover has 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 comprise 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. The block itself can also be given an optional headline and subheading, which appears centred 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 two, three or six 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.  

 

The gallery can also be given an optional headline and subheading, which appear centred above the images.  

 

Inventory Search Block

 

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

 

Inventory Block

 

The inventory block allows you to list up to six items/products throughout your theme. 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 customer testimonials. For each testimonial, you can add the author’s name, additional details, a quote and a star rating. You can also upload a custom image (picture or icon used to represent your source), which will be centred and cropped into a circle. 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 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 booked quantity. 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 and 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 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. 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 available for booking on your site and comprises four components: a Hero block, Header block, Item grid, and an Instagram block.  

 

Item Grid

Each grid item comprises 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 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 comprises 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 have 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

The inputs appear as start and end date drop-down menu inputs for daily and nightly bookings. 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

Users select a date using the day slider or the View Calendar link for items/products allocated by time slots and hourly bookings that do not span more than one day.  

 

 

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 available for selection, with any corresponding price points and the dates selected. Below is a voucher/promo code field to enter 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, provided 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 location map will be displayed below the summary and details.  

 

Video (4) & Images (5)

Below your item or product details (and map, if configured), this video will also be displayed if you’ve added a YouTube link in the account manager. Below the video, your item or product page will display up to five images you’ve added to 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.