Using the Nimble theme in Site Builder

Learn more about the Nimble 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

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

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 custom settings or apply one of the presets (more on that to come), enabling you to tweak just a few choice elements.

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.

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.

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.

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: • Bright Preset • Sharp Preset

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.

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 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 a social media icon, simply remove the URL from the Connected Services screen by clicking on the Remove link.

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.

Hero

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

Gallery Block

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.

Feature Block

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

Testimonials Block

 

 
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.

Inventory Block

 

 
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.

Code Block

 
The Code Block lets you add your custom code, providing a deeper level of customization. The code block will render HTML, CSS, and JavaScript.

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.

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

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.

Homepage

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.

Inventory Page

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.

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

Date Search

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.

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

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.

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

Item/Product Page

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.

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

Daily/Nightly Bookings:

The inputs 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.

Hourly Bookings

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