Plan Availability: Site Builder is an optional add-on to all plans.
- 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 (Inventory > Items) and is available in our newest version of Checkfront.
Not yet on our newest version and interested in upgrading? Please contact our Technical Support team for more information.
Discover more product-related help articles here: Products (New).
Site Builder Dash Theme Documentation
Before we get started, this article is a guide to configuring the Dash theme in Checkfront's Site Builder.
If you haven't already done so, then 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 does 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 with what you're experiencing in Site Builder, then 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 see the active theme in the next view. If it says Dash, then you're golden.
Theme SettingsBack to top
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 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.
ColoursBack to top
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 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.
FontsBack to top
Used anywhere there is long-form content and for text that isn't a heading.
Used for page titles, section heads, and the logo (if no image is provided).
Custom SettingsBack to top
These settings allow you to toggle on and off various display options and are unique to each theme. Dash includes the following custom settings:
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’re able to 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, then 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 PresetsBack to top
We looked earlier at how you can change the fonts and colour scheme of your website with a few simple clicks. However, if design isn’t your forte, then Dash comes with a preset that adjusts the fonts and colours for you.
The elements of the preset are designed to be complementary to 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 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 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):
Site NavigationBack to top
Dash comes with a default header and footer menu. You find detailed information on how to configure these menus 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 that have been added to your cart and act as the link customers use to check out.
The optional search link, which we looked at earlier, opens the search bar, just below the header, providing customers with the opportunity to search your inventory by date.
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.
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 you 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 respective icon automatically appears in the header and footer navigation.
Removing Social Media Accounts
If you no longer wish to include any of the social media icons, then simply remove the URLs from the Connected Services screen by clicking on the Remove link.
Content BlocksBack to top
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 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.
The first block on your homepage, the Hero block, is comprised of several customizable components: a heading, subheading, description, image, and customizable button.
The Alternate Hero block appears at the top of the Categories and Inventory pages. It's very similar to the Hero block but only includes an image and heading.
The Gallery block allows you to add ten images to a gallery. The first five uploaded into the block editor appears as a mosaic in the gallery.
If you add more than five, then a link appears in the bottom right of the gallery which opens the images into a takeover slideshow where you can scroll through all of them at your leisure.
For each image, you can also add a custom title and caption which appears when you hover over the image.
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.
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, additional details, a quote, and a star rating. You’re also able to 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.
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 as a full-width block, overlaid with a heading, description, and hyperlinked button.
This block is quite flexible and can be used to welcome customers to your site, say a bit about your offerings, or share news and seasonal promotions.
The Instagram Feed block pulls in the latest 6 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 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.
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 also 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 are then displayed in a card at the bottom of the map. Click the coordinates in the card and they appear in the left sidebar, where they are easy to copy and paste into the block editor.
The first number in your longitude coordinate is between -180 and 180 The first number in your latitude coordinate is between -90 and 90.
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 a multitude of ways, with varying price points, this gives you an opportunity to select the specific price point to advertise to customers.
Found on your item or product pages, and in conjunction 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 quantity being booked. You can add up to eight details, each with a heading and value.
Page Types & FeaturesBack to top
Dash’s homepage is made up of a hero block followed by up to five customizable sections, each of which has the option to be swapped out for a different block type and an Instagram feed block.
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 several components: an alternate hero block and an item grid.
Each grid item is comprised of the item’s or product's image followed underneath with the item’s or product's title and category. Each item is linked to the specific item’s or product's page.
The Categories page shows a list of all the categories that you’ve created in the Booking Manager, displayed in a grid similar to the Inventory page. The Categories page is made up of 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.
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.
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. You can toggle between the two layouts at Design > Custom in the side menu. 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 entire booking process including, date, time, and parameter/guest type selection. More on the sidebar below.
SidebarBack to top
Dash’s unique and powerful Sidebar contains an easy-access inventory page, displays the booking process, cart, and checkout.
Sidebar Inventory Page
The sidebar’s inventory page contains an item grid similar to the one found on the inventory page, with items or products appearing 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 BookingBack to top
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.
The Details tab features the summary for the item or product (pulled from the Booking Manager), as well as the selection for any required parameters.
The Booking tab is where 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:
For daily and nightly bookings, the inputs appear as start and end date blocks.
To change the start date, simply select the start date which opens a calendar displaying the current month and following month. Any unavailable dates are greyed out.
Once a start date is selected, the end date block automatically activates.
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.
If you’ve configured items or products to be able to span more than one day, then 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 also need to 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.
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 are able to review your booking and proceed with checkout via the proceed button in the bottom right.