Using the Expedition theme in Site Builder

---

Learn more about the Expedition 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 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 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 accentuates, 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 and calendar blocks.  

 

Secondary Colour (2)

When the custom setting Header Style is 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 colour 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, slightly desaturated version of your primary brand colour.  

 

Primary Font

Used anywhere there is long-form content and for a 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 to 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) for your footer. This setting gives you three options: light, shade and dark. The light option will apply 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 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 white for the text. The inverted option will use your chosen secondary colour as the background and 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, your uploaded image 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 your website's fonts and colour scheme with a few simple clicks. If design isn’t your forte, then Expedition 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 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 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. Detailed information on configuring these menus is 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 added to your cart and act as the link customers will use to check out. The optional search link we looked at earlier will open the search bar just below the header, allowing customers 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 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 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 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 has 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 comprises 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 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 lets you easily add an alt tag to your hero image. Alt tags aid screen readers for visually impaired users and search engine crawlers by describing this image and its function 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 can add the author’s name, other 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. 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 items or products. In the block editor, you’ll find inventory search dropdowns, allowing you to select the items or products you want to display. Your items or products will be displayed with the image first, followed below by the item's/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 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 booked quantity. 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.

 

---

 

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

 

 

The location map on your contact page 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 map display by adjusting the magnification level 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 comprises a hero image block followed by up to three customizable sections, each of which can 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 editing and managing 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 available for booking on your site and comprises three components: a hero image block, the inventory heading block, and the item grid.  

 

Item Grid

Each grid item comprises 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 lists all the categories 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 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 comprises two component blocks: a hero image block and the item grid.  

 

Item Grid

Like the inventory page, each grid item comprises 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 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, allowing 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:

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

 

 

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, a map will display below your summary and details.  

 

Additional Blocks

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