Using the Expedition theme in Site Builder

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

 

---

Learn more about the Expedition 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 Expedition 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 Expedition, 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 follow), enabling you to tweak just a few choice elements.  

 

Primary Colour (1)

When the custom setting Header Style is set to accent, this colour will be used for the header background. It will also be used for smaller accents, such as the star ratings in the testimonials block and calendar blocks.  

 

Secondary Colour (2)

When the custom setting Header Style is set to inverted, this colour will be used for the header background. It will also be used for all buttons throughout your website.  

 

Text Colour (3)

This colour option has the greatest effect on the theme. It's responsible not only for the main text colour, but is also used for the Footer Style setting to determine the background colour for your page footer. If this setting is set to Shade, Expedition will intelligently determine a lighter shade of your chosen text color to be used as the background for your footer. If your footer style setting is configured as Dark, it will apply your original text colour to your footer’s background. It's likely a good idea to make this a darker and slightly desaturated version of your primary brand colour.  

 

Primary Font

Used anywhere there is long-form content and for text that isn't a heading.  

 

Secondary Font

Used for page titles, section heads, and the logo (if no image is provided).

 

---

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

 

 

Footer Style

This setting intelligently derives shades of your chosen text colour (see text colour setting above for more information) to be used in your footer. This setting gives you three options to choose from: light, shade and dark. The light option will apply a white to the background colour. The shade option will apply a lighter shade of your chosen text colour for the background and text. The dark option will use your chosen text colour as the background and white as the text colour.  

 

Header Search

When enabled, a search link will appear in your site’s header, allowing users to search for an item or product by date from anywhere on your site. When disabled, the search link will be hidden.  

 

 

Header Style

Similar to the footer, this setting intelligently derives shades of your chosen text colour (see text colour setting above for more information) to be used in your header. Based on the text colour you choose, the header style setting gives you three options: light, accent and inverted. The light option will apply a white to the background and use your selected text colour for text. The accent option will use your chosen primary colour as the background and use white for the text. The inverted option will use your chosen secondary colour as the background and also use white for the text.  

 

Retina logo support

When enabled, Expedition supports the use of retina logo images. If this setting is disabled and you try to use a retina logo, the image you’ve uploaded will display at its natural dimensions. A retina logo should be twice the size of the recommended dimensions of 600px wide x 375px tall.

 

 

---

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, then Expedition 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 Expedition's theme presets: • Chill Preset • Rugged Preset

 

---

Expedition comes with two default menus: Header and Footer. The footer in this theme is limited to two columns. You will find detailed information on how to configure these menus in our Site Builder Navigation Guide. In the header, along with your navigation, Expedition also features Cart and Search links. The cart link will display the number of items or products that have been added to your cart and act as the link customers will use to check out. The optional search link, which we looked at earlier, will open the search bar, just below the header, providing customers with the opportunity to search your inventory by date.  

 

---

Expedition features social icons that appear left-aligned in your site’s footer.  

 

 

There are two ways to connect your social media accounts that will populate these icons. First, during the theme onboarding process, you can connect your social accounts during “Step 1: Basic Information”. If you didn’t enter your accounts during this process, or you need to edit your entries, you can also access setup via the Site Builder 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 that 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 to 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 in detail how to change a block type, edit a block's content and add/remove blocks from the page.

 

Expedition comes with eight custom block types: Hero Image, Inventory, Feature, Gallery, Testimonials, Code, Page Header, Social Sharing Links and Location Map. 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 Image

 

 

The first block on your homepage, inventory, and category pages is the Hero Image block. This is comprised of several customizable components: a full-width image, image aspect ratio setting, alt text field and fixed background setting. We recommend your hero image has a minimum width of 1920px and a minimum height of 1080px to ensure clarity on larger screens.  

 

Aspect Ratio

The Aspect Ratio setting gives you four options of aspect ratios at which to display your hero image: 3:1, 4:1, 2:1, and an option to preserve your image's natural aspect ratio. Play around with these options and see what works for your images.  

 

Alt Text

The alt text field allows you to easily add an alt tag to your hero image. Alt tags aid screen readers for visually impaired users and search engine crawlers by describing what this image is and what its function is on the page. It’s best to use short, descriptive tags.  

 

Fixed Background

As the name implies, the Fixed Background option keeps your hero image stationary so it does not scroll with the page. This gives your page elements a 3D effect known as parallax and can add visual depth to your page. The recommended image size for your hero image is a minimum width of 1920px.  

 

---

 

Feature

 

 

The feature block allows you to add up to four “Features” with a title, text, image and customizable link. In addition, the block itself can be given an optional headline and subheading which will appear to the left of the block on a full-screen desktop computer and centred above the block on smaller desktop screens, tablets, and mobile devices.    

 

 

---

 

Gallery

 

 

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, the images will be arranged into a mosaic. When you hover over each image, you will see an effect where the image enlarges slightly with a light overlay. If you’ve input a title and/or caption for the image, hovering over the image will reveal this text, overlaid on the image.

 

 

Clicking on an image will open it into a takeover slideshow (see image above), hiding the image title and caption under a ‘show details’ link and allowing customers to click through the gallery at their leisure. Also, the gallery can be given an optional headline and subheading which will appear above it.  

 

---

 

Testimonials

 

 

The testimonials block allows you to showcase up to three testimonials from happy customers. For each testimonial, you’re able to add the author’s name, other 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. In addition, you can add a block heading and/or subheading that will appear to the left of the testimonials.    

 

---

 

Inventory

 

 

The inventory block allows you to list up to six of your items or products. In the block editor, you’ll find inventory search dropdowns, allowing you to select the items or products you would like to display. Your items or products will be displayed with the image first, followed below by the item's or product's title, summary, and ‘Configure Booking’ link that will take customers to the item’s or product's page. The summary content is pulled from the item’s or product's configuration in the Booking Manager under Item > Edit Item - Description > Summary for items or Product > Edit Product - Details > Details for Products. This block also allows you to enter an optional headline and subheading, which will appear centred above the block.  

 

---

 

Code

 

 

The code block lets you add your own custom code, providing a deeper level of customization. The code block will render HTML, CSS and Javascript. It's great for adding a Google Map or social media content.    

 

---

 

Page Header

 

 

You’ll find the page header block at the top of your blog, about page, contact page and cart pages, just below the hero image. It allows you to enter a custom heading and subheading for each page.

 

---

 

Item Parameters

 

 

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. You can add up to six details, each with a heading and value, as well as, a call to action.    

 

---

 

Inventory Heading

 

 

Found at the top of your inventory page, just below the hero block, the inventory heading block allows you to add a heading, subheading, and date search form. The date search form can be configured by date, date range, or disabled altogether.

 

---

 

Social Sharing links

 

 

Found on your blog post and inventory pages as a sticky left-hand sidebar, this allows you to display sharing links for popular social media websites. It includes links to share your content on Facebook, Twitter, Pinterest, Linkedin, Google+ and Yelp.  

 

---

 

Location Map

 

 

Found on your contact page, the location map allows you to enter the coordinates of up to three locations to be displayed on a map to the right of your contact form. Each location can include a title, description, and customizable link. You can also customize the display of the map by adjusting the level of magnification at which it initially displays to users.

An easy way to locate the coordinates for a location is, on a desktop computer, to type the address into Google Maps, then right-click on a place or area to open the context menu and select ‘What’s here?’. The coordinates will then be displayed in a card at the bottom of the map. Click the coordinates in the card and they’ll appear in the left sidebar, where they are easy to copy and paste into the block editor.  

 

Coordinates: The first number in your longitude coordinate will be between -180 and 180 The first number in your latitude coordinate is between -90 and 90.

 

---

 

Homepage

Expedition’s homepage is made up of a hero image block followed by up to three customizable sections, each of which has the option to be swapped out for a different block type. Hovering over each block will reveal options to delete, edit or swap it out for another block type. 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 features a grid of all the items or products that are available for booking on your site and is made up of three components: a hero image block, the inventory heading block, and the item grid.  

 

Item Grid

Each grid item is comprised of the item’s or product's image followed underneath by the item’s or product's summary and a configure booking 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 field in your Checkfront Booking Manager (Item > Edit Item - Description > Summary) or the product's details field (Product > Edit Item - Details > Details).  

 

Categories Page

The categories page shows a list of all the categories that you’ve created in the admin, displayed in a grid similar to the inventory page. Each item in the grid shows the category’s image, description, and a view category link that takes the customer to that category’s page, listing the individual items or products within.  

 

Individual Category Pages

An individual 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. It is made up of two component blocks: a hero image block and the item grid.  

 

Item Grid

Same as the inventory page, each grid item is comprised of the item’s or product's image, followed underneath with the item’s or product's summary and a configure booking 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 field in the Booking Manager (Item > Edit Item - Description > Summary) or the product's details field (Product > Edit Product > Details > Details).

 

Item/Product Pages

Your item or product pages are comprised of several static components and customizable blocks: a hero image block, a booking bar (which includes an item parameter list block) and book now link to open the booking modal, a social sharing links block, item or product description, item or product images/video, and up to three custom sections.  

 

Booking Bar

Unique to Expedition, your inventory pages have a sticky booking bar, located just below your header or, if enabled, your hero image block. The booking bar contains the parameter’s list block which allows you to add details about your item’s or product's configurations. Also, it has space for call to action text. Most importantly, as mentioned above, it contains the book now link that will open a modal, containing all the components necessary for your customer to make a booking.

 

---

In Expedition, your item’s or product's booking components are located in a booking modal, accessed via the book now link in the item’s or product's booking bar. These components can include but are not limited to, date and time inputs (style varies by item’s or product's allocation), parameter selections, a discount/promo code field, and subtotal for booking configuration.  

 

Date and Time Inputs

Daily/Nightly Bookings:

For daily and nightly bookings, the inputs will appear as start and end date blocks. By default, the dates displayed are today’s date as the start and end date. To change the start date, simply select the start date, opening a calendar displaying the current month and following month. Any unavailable dates will be crossed out. Once a start date is selected, the end date block automatically activates for selection.  

 

 

Time slots/Per time booking:

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 Booking Manager), will display to the right of 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.  

 

 

On the right of your item or product page, just below the hero image and booking bar, Expedition will display the item’s summary or product's details (pulled from your Booking Manager). Below the summary, Expedition will display up to five images (pulled from your Booking Manager) in a slideshow. Below the slideshow, Expedition organizes the finer details of your item or product into tabs.

Depending on what you have configured in your Booking Manager for the item or product, you will see up to three tabs: Details, Location, and Video. Each tab pulls content from your Booking Manager.  

 

Map

If configured in your Checkfront account, then a map will also display below your summary and details.  

 

Additional Blocks

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