Using the Dash theme in Site Builder – Checkfront

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

Which plans include this feature?

Legacy: Available to existing Site Builder Users only. No further updates are planned.
Current: No longer available
→ Learn more about our current 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 items, classic products, or both?

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

Site Builder Dash Theme Documentation

Before we start, this article guides configuring the Dash 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 do not cover all the sections and features you might see in the screenshots. Rather, we use this guide to look at the more theme-specific aspects of the platform.

If the guide doesn't match what you're experiencing in Site Builder, please double-check your theme.

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 see the active theme in the next view. If it says Dash, then you're golden.

Theme Settings

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.

Style

The first view you 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.

Colours

Primary Colour (1)

The Primary Colour is the main accent colour featured in Dash. You’ll find it applied to the following areas:

Book Now buttons
Customizable call-to-action buttons on the Homepage, Hero Block, and Call-to-Action blocks
Proceed, Add to Cart, View Cart, and Checkout buttons in the sidebar
Link colour
Cart icon
Highlight colour for maps

Secondary Colour (2)

The Secondary colour acts as an additional accent colour. You’ll find it applied to the following areas:

Social media icons in the footer
Navigation arrows on image slideshows
Accent colour on the calendar and day pickers.

Text Colour (3)

The Text Colour has the greatest visual impact on your site. It is applied to the body text throughout your pages, and a slightly darker version of the colour is used for headings.

The only text that this colour is not applied to is the text that overlays images, such as in the Hero Block and the title and captions on images in the Gallery Block.

In addition to the text of your site, your chosen text colour is applied to the following areas:

Overlay on the Alternate Hero Block
Background colour when the sidebar is activated
Background for the Featured Items Block

It's likely a good idea to make this a darker and slightly desaturated version of your brand colour.

Fonts

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

Custom Settings

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

Footer Style

Dash gives you two options for item or product page layouts: Slideshow Image Layout and Image Hero Layout.

As the name suggests, the Slideshow Image option displays your item’s or product's images in a familiar slideshow layout, where you can navigate through the images at your leisure.

The Hero image layout pulls the first image you have uploaded for the item or product as a full-width hero image with the text colour overlay, similar to the Hero block found on the Home, Category, and Inventory pages.

If you have more than one image uploaded for an item or product, a “View photos” link appears at the bottom right of the Hero image. Clicking this link reveals the remaining images in a takeover slideshow.

Retina logo support

When enabled, Dash supports the use of retina logo images. If this setting is disabled and you try to use a retina logo, then the image you upload displays at its natural dimensions.

A retina logo should be twice the size of the recommended dimensions of 600px wide x 375px tall.

Theme Presets

We looked earlier at how you can change your website's fonts and colour scheme with a few simple clicks. However, if design isn’t your forte, Dash comes with a preset that adjusts the fonts and colours for you.

The preset elements are designed to complement each other and provide your website with a clean, professional look.

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 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 examples of the different presets in use and maybe find some inspiration while you're at it, check out the following examples of Dash's theme presets.

Please note Dash currently includes just one preset (Vivid). If you modify this, then a second preset is created in the drop-down menu named Vivid (modified):

• Vivid Preset

Site Navigation

Dash comes with a default header and footer menu. Detailed information on configuring these menus is in our Site Builder Navigation Guide.

In the header, along with your navigation, Dash also features Cart and Search links. The cart link displays the number of items or products added to your cart and acts as the link customers use to check out.

The optional search link we looked at earlier opens the search bar just below the header, allowing customers to search your inventory by date.

Header

Along with your navigation, Dash’s header features your business contact number, cart icon, and a book now button.

The cart icon displays the number of items or products it currently holds. Clicking the cart icon opens the cart in Dash’s sidebar. Clicking on the Book Now button opens the inventory page. We go into further detail on the sidebar a little later on.

Footer

Dash’s footer is home to important details about your business, including location, contact information, hours, and links to your social media accounts.

There are two ways to connect your social media accounts that 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, then 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 automatically appears in the header and footer navigation.

Removing Social Media Accounts

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

Content Blocks

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 show you in detail how to change a block type, edit a block's content and add/remove blocks from the page.

Dash comes with eleven custom block types: Hero, Alternate Hero, Gallery, Featured Items, Features, Call-to-Action, Testimonials, Instagram Feed, Location Map, Item Price, 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, the Hero block, comprises several customizable components: a heading, subheading, description, image, and customizable button.

Alternate Hero

The Alternate Hero block appears at the top of the Categories and Inventory pages. It's similar to the Hero block but only includes an image and heading.

Gallery

The Gallery block allows you to add ten images to a gallery. The first five uploaded into the block editor appear as a mosaic in the gallery.

If you add more than five, a link appears in the bottom right of the gallery, opening the images into a takeover slideshow where you can scroll through all of them at your leisure.

You can also add a custom title and caption for each image, which appears when you hover over the image.

Features

The Features block allows you to add up to four “Features” with a title, text, image and customizable link. Additionally, the block itself can be given an optional headline and subheading, which appears above the block’s content.

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, additional details, a quote, and a star rating. You can also upload a custom image (picture or icon used to represent your source).

Furthermore, you can add a block heading and/or subheading that appears to the left of the testimonials.

Featured Items

The Featured Items block allows you to feature up to six items or products in a full-width carousel.

In the block editor, you find inventory search dropdowns, allowing you to select the items or products you want to display.

Each item or product displays its image, summary, and a Book Now button. The Book Now opens up the item or product directly in the Sidebar. The summary content is pulled from the item or product in the Checkfront Booking Manager.

This block also allows you to enter an optional headline and subheading, which appears centred above the block.

Call to Action

The Call to Action block appears full-width, overlaid with a heading, description, and hyperlinked button.

This block is flexible and can be used to welcome customers to your site, say a bit about your offerings, or share news and seasonal promotions.

Instagram Feed

The Instagram Feed block pulls in the latest six images from your Instagram account with a block heading and subheading.

For this feature to work, you’ll need to enter an access token, which you can generate here with easy-to-follow instructions.

Once you’ve obtained your token, paste it into the Access Token field in your Instagram Feed block editor.

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 also 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 are then displayed on a card at the bottom of the map. Click the coordinates in the card, and they appear in the left sidebar, which is easy to copy and paste into the block editor.

Coordinates:

The first number in your longitude coordinate is between -180 and 180 The first number in your latitude coordinate is between -90 and 90.

Item Price/Parameters

Price

Found on your item or product pages, the Item Price block consists of a text field that allows you to highlight the lowest price for an item or product.

Since items or products can be configurable in many ways, with varying price points, you can select the specific price point to advertise to customers.

Parameters

Found on your item or product pages, and with the Item Price block, the Item Parameter block allows you to go into greater detail about your item’s parameters or product's guest types and their price points.

For example, differing prices for adults vs. children or discounts based on the booked quantity. You can add up to eight details, each with a heading and value.

Page Types & Features

Homepage

Dash’s homepage comprises a hero block followed by up to five customizable sections, each of which can be swapped out for a different block type and an Instagram feed block.

Inventory Page

The Inventory page features a grid of all the items or products available for booking on your site and comprises several components: an alternate hero block and an item grid.

Item Grid

Each grid item comprises the item’s or product's image, followed by the item’s/product's title and category. Each item is linked to the specific item’s or product's page.

Categories Page

The Categories page lists all the categories you’ve created in the Booking Manager, displayed in a grid similar to the Inventory page. The Categories page comprises an alternate hero block and the categories grid.

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 in that category.

Category Pages

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.

Item/Product Pages

Your item or product pages are comprised of several static and customizable components: Item or product descriptions, item or product images/videos, price, and item parameter or product guest type blocks, as well as up to four custom sections.

Dash’s item or product pages come in two layouts: Image Slideshow or Hero Image. In the side menu, you can toggle between the two layouts at Design > Custom. For more information on these layout options, check out the design settings.

Unique to Dash, clicking the Book Now button on an item or product page opens the sidebar, which contains the booking process, including date, time, and parameter/guest type selection. More on the sidebar below.

Sidebar

Dash’s unique and powerful Sidebar contains an easy-access inventory page that displays the booking process, cart, and checkout.

Sidebar Inventory Page

The sidebar’s inventory page contains an item grid similar to the one on the inventory page. Items or products appear in a grid with their image, title, and category. It is accessed via the Book Now button in Dash’s header.

Clicking on an item here activates the booking process for that item or product, also contained in the sidebar.

Making a Booking

The sidebar contains the entire booking process for items or products in Dash.

There are several easy ways to open the sidebar and begin the booking process for an item: selecting an item or product from the sidebar’s inventory page, the “Book Now” button for an item or product in the featured items block or the book now button on an item or product page.

The booking page in the sidebar features the item’s or product's main image followed by three tabs: Details, Booking, and Summary.

These tabs contain all the elements necessary to create a booking and you’re guided through each step with a proceed button.

Details Tab

The Details tab features the summary for the item or product (pulled from the Booking Manager) and the selection for any required parameters.

Booking Tab

In the Booking tab, you select the date(s) and time(s) for the booking. Depending on how your items or products are allocated, this can take a few forms:

Daily/Nightly Bookings:

The inputs appear as start and end date blocks for daily and nightly bookings.

To change the start date, simply select the start date, which opens a calendar displaying the current month and the following month. Any unavailable dates are greyed out.

Once a start date is selected, the end date block automatically activates.

Time Slots:

For timeslot items or products, users select the date for an item or product using a day slider.

In addition to the date selector, the time slots (configured for the item or product in your Booking Manager) display below the date field. The user simply selects the time slot they want by clicking on it.

Per Time:

If you’ve configured items or products to span more than one day, selecting dates for per time items or flextime products is done on a calendar, similar to daily and nightly bookings.

If items or products are not permitted to span more than one day, then you use the day slider, as with timeslot items.

In addition to the day, start and end times must be selected for per time items and flextime products, which you can select from drop-down menus below the date selector.

Depending on the configuration of your items or products, the time options available in the dropdowns vary.

For example, if your item is configured with a fixed length, then only the start time is available to select and the end time dropdown is fixed, accounting for the fixed length of the booking.

Summary Tab

The Summary tab displays the summary for the booking, including the date(s), time(s) and parameter(s) selected, as well as a promo/discount field and a subtotal for the item or product.

Cart and Checking Out in the Sidebar

The cart and checkout process is also contained entirely in the Sidebar.

There are two ways to open the cart in the sidebar: clicking the cart icon in Dash’s header or selecting the ‘View Cart’ button when you’ve added an item or product.

Once you’ve opened the cart, you can review your booking and proceed with checkout via the proceed button in the bottom right.