Which plans include this feature?
Where can I find this feature using the top menu?
Manage > Site Builder
What more do I need to use this feature?
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
Site Builder Nimble Theme DocumentationBack to top
Before we start, this article guides 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 align with 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 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 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 prominently as the background colour for 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 throughout 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 in the header or mobile navigation menu.
FontsBack to top
Used anywhere there is long-form content and for a 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/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, your uploaded image will display at its natural dimensions.
Theme PresetsBack to top
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, Nimble comes with two presets that adjust the fonts and colours for you. 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 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 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. Detailed information on configuring these menus is in our Site Builder Navigation Guide.
The header features a Cart link and is specific to Nimble, along with your navigation. This link will display the number of items or products 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 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 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 for 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 how to change a block type, edit a block’s content and add/remove blocks from the page.
Nimble has 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. You can add a custom title and caption for each image, which appears 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 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 will appear to the left of the testimonials.
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 setup in the Booking Manager. This block also allows you to enter an optional headline and subheading, which appears centred above the block.
Call To Action Block
The Call to Action Block is a full-width block 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.
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 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, 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 on a card at the bottom of the map. Click the coordinates in the card, and they’ll appear in the left sidebar, which is 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 that will appear left-aligned next to the page content.
Page Types & FeaturesBack to top
Nimble’s homepage comprises a hero image block followed by up to four 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.
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, date search, and the item grid.
Each grid item comprises the item’s or product's image followed 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 allows users to search their inventory by available date. It appears on every page except your homepage and will return users to your inventory page, listing all your items/products, less any that are unavailable on the searched date.
The categories page lists all the categories 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 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.
Each grid item comprises the item’s/product's image followed 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 comprise 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
The inputs will appear as start and end date blocks for daily and nightly bookings, 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 the 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, 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.