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, 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 Dash, 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 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.
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 will be used for headings. The only text that this colour will not be applied to will be 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 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 page layouts: Slideshow Image Layout and Image Hero Layout. As the name suggests, the Slideshow Image option will display your item’s images in a familiar slideshow layout, where you’re able to navigation through the images at your leisure.
The Hero image layout will pull the first image you have uploaded for the item 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, a “View photos” link will appear at the bottom right of the Hero image. Clicking this link will reveal 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, 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.
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, 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, check out the following examples of Dash's theme presets. Please note, Dash currently includes just one preset (Vivid). If you modify this, a second preset will be created in the drop-down menu, named Vivid (modified): • Vivid Preset
Site NavigationBack to top
Dash comes with a default header and footer menu. 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 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.
Along with your navigation, Dash’s header features your business contact number, cart icon, and a book now button.
The cart icon will display the number of items it currently holds. Clicking the cart icon will open the cart in Dash’s sidebar. Clicking on the Book Now button will open the inventory page. We’ll 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 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 BlocksBack to top
Content blocks are the customizable components which 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 all together. 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.
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 will appear as a mosaic in the gallery. If you add more than five, a link will appear 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 will appear 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 will appear 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 will appear to the left of the testimonials.
The Featured Items block allows you to feature up to six items in a full-width carousel. In the block editor, you’ll find inventory search dropdowns, allowing you to select the items you would like to display. Each item will display its image, summary and a Book Now button. The Book Now will open up the item directly in the Sidebar. The summary content is pulled from the item in the Checkfront Booking Manager. This block also allows you to enter an optional headline and subheading, which will appear 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 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.
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.
Found on your item pages, the Item Price block consists of a text field that allows you to highlight the lowest price for an item. Since items 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 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 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 that are available for booking on your site and is made up of three components: an alternate hero block, and an item grid
Each grid item is comprised of the item’s image followed underneath with the item’s title and category. Each item is linked to the specific item’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 in that category.
A Category page is similar in function to the Inventory page except that instead of listing all your items, it lists the items specific to one category.
Your item pages are comprised of several static and customizable components: Item descriptions, item images/videos, price and item parameter blocks, as well as up to four custom sections. Dash’s item 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 page will open the sidebar which contains the entire booking process including, date, time and parameter 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 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 will activate the booking process for that item, also contained in the sidebar.
Making a BookingBack to top
The sidebar contains the entire booking process for items in Dash. There are several easy ways to open the sidebar and begin the booking process for an item: selecting an item from the sidebar’s inventory page, the “Book Now” button for an item in the featured items block or the book now button on an item page. The booking page in the sidebar features the item’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 (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 are allocated this can take a few forms:
For daily and nightly bookings, the inputs will appear as start and end date blocks. To change the start date, simply select the start date which will open 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 time slot items, users select the date for an item using a day slider. In addition to the date selector, the time slots (configured for the item in your Booking Manager), will display below the date field. The user simply selects the time slot they want by clicking on it.
If you’ve configured items to be able to span more than one day, selecting dates for per time items will be done on a calendar, similar to daily and nightly bookings. If items are not permitted to span more than one day, you will use the day slider, as with time slot items.
In addition to the day, start and end times will also need to be selected for per time items, which you can select from drop-down menus below the date selector. Depending on the configuration of your items, the time options available in the drop-downs 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 drop-down will be 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.
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. Once you’ve opened the cart, you’ll be able to review your booking and proceed with checkout via the proceed button in the bottom right.