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).
Before we get started, this article is a guide to configuring the Nimble 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, 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 will see the active theme in the next view. If it says Nimble, 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.
StyleBack to top
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 come), enabling you to tweak just a few choice elements.
ColoursBack to top
Primary Colour (1)
The primary colour is featured most prominently as the background colour for both your site header and mobile navigation menu. Nimble also uses your chosen primary colour to intelligently determine which colour to use for the text in these areas (text logo and navigation menu items), ensuring that the text is always legible against the primary colour. The primary colour is used as an accent through your site, specifically the map marker in the location block, the button in the hero block, calendar days, and the stars in the testimonial block.
Secondary Colour (2)
Used as the colour for the View Details link on item or product listings, the promo or voucher link on item or product pages, and the Read More link on the blog posts page.
Text Colour (3)
The text colour will be applied to all the text found throughout your site except for in the header or mobile navigation menu.
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/off various display options and are unique to each theme. Nimble includes the following custom settings:
Retina Logo Support
When enabled, the Nimble theme supports the use of retina logo images. A retina logo should be twice the size of the recommended dimensions of 600px wide x 375px tall. If this setting is disabled and you try to use a retina logo, the image you’ve uploaded will display at its natural dimensions.
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. If design isn’t your forte, Nimble 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, check out the following examples of Nimble’s theme presets:
Site NavigationBack to top
Nimble comes with two default menus: Header and Footer. You will find detailed information on how to configure these menus in our Site Builder Navigation Guide.
Specific to Nimble, along with your navigation, the header features a Cart link. This link will display the number of items or products that have been added to the cart and act as the link customers will use to access their cart.
Social Media Integration
Nimble features social media icons that appear left aligned in your site’s footer, below your contact information.
There are two ways to connect your social media accounts that will activate these icons. First, during the theme onboarding process when you first activate the Site Builder add-on, you can connect your social accounts during Step 1: Basic Information.
If you didn’t enter your social media account URLs during this process, or you need to edit your entries, you can also access setup via the Site Builder main menu 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 a social media icon, simply remove the URL 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 for 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.
Nimble comes with ten content block types: Hero Image, Gallery, Feature, Full-width Feature, Feature Listing, Inventory, Testimonial, Call to Action, Location Map, Code, and Sidebar Image. 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, inventory, and categories pages, the hero blocks are comprised of several customizable components: a heading, subheading, description, image, customizable link, as well as a setting to adjust the size of the heading text to either smaller or larger (note: any changes to these custom settings will be applied to all hero blocks on your website).
The Gallery Block allows you to display up to six images in a slideshow, with an optional heading and subheading. For each image you can add a custom title and caption which will appear when you hover over the image. Clicking on an image will open it in a takeover slideshow.
The Feature Block allows you to add up to three Features with a title, text, image, and customizable link. Also, the block itself can be given an optional headline and subheading which will appear above the block’s content.
Full-Width Feature Block
Similar in setup to the feature block, the Full-width Feature Block allows you to add up to four features, each with a title, text, description, image, and customizable link. However, in this block, each image will be displayed one at a time as a full-width image with the text content overlaid. Clicking the text content for the next feature will activate the image to change to match the image to the content.
Checking Navigation Gradient will add a gradient across the feature links and text, as seen in the image above.
The Testimonials Block enables 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 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 setup in the Booking Manager. This block also allows you to enter an optional headline and subheading which will appear centered above the block.
Call To Action Block
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.
Feature Listing Block
Use an image and up to four text blocks in the Feature Listing Block to highlight a listing and display its key features.
Location Map Block
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 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, to type the address into maps.google.com, then right-click (control + click for Macs) on the place or area on the map 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
Sidebar Image Block
Found on the custom pages, the Sidebar Image Block allows you to add an image to your page that will appear left-aligned next to the page content.
Page Types & FeaturesBack to top
Nimble’s homepage is made up of a hero image block followed by up to four 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.
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, date search, and the 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 view details link that will take customers to the item’s or product's booking page. The summary that is displayed for each item 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 Product - Details > Details).
The date search provides users the option to search your inventory by available date. It appears on every page except your homepage and will return users to your inventory page, listing all your items or products less any that are unavailable on the searched date.
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. 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. It is made up of two components blocks: a hero image block and the 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 view details 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) the product's details field (Product > Edit Product - Details > Details).
Your item or product pages are comprised of several static and customizable components: a date/time selector, booking parameters, item or product description, item or product images/videos, and up to four custom sections.
Making a BookingBack to top
Each item or product page will display all the necessary components for customers to configure their booking. This includes, but is not limited to, date and time inputs (style varies by item’s or product's allocation), parameter selections, and a price breakdown summary that displays the selected parameters with pricing, a discount/promo code field, and subtotals for booking configuration.
Date and Time Inputs
For daily and nightly bookings, the inputs will appear as start and end date blocks, as seen in the image below. By default, the dates displayed are today’s date as the start date.
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.
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, in addition to the date selector, the time slots (configured for the item or product in your Booking Manager) will display below the date field.
The user simply selects the time slot they want by clicking on it.
For hourly items or flextime products, selecting the date for the booking is also 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.