Using the Vast theme in Site Builder

Learn more about the Vast 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 Vast 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 Vast, 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 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 follow), enabling you to tweak just a few choice elements.  

Primary Colour (1)

Used as the colour for the duotone effect on images and the background colour of the navigation search bar. It will also be used for smaller accents, like the star ratings in the testimonials block, calendar blocks, navigation arrows for image carousels, add to cart button on item or product pages, and the category badges in the item or product grids.  

Secondary Colour (2)

Used as the background colour for buttons in custom blocks and all other buttons (except the add to cart buttons on item or product pages), highlight for the date field in search forms, text colour for navigation search bar, and timeslot options on item or product pages.  

Text Colour (3)

This colour option has the greatest effect on the theme. It’s responsible not only for the main text colour, but Vast uses your chosen text colour to intelligently determine complementary shades of this colour to be applied to block backgrounds. This way, your site blocks are cleanly defined, and your text is always legible. It’s likely a good idea to make this a darker, slightly desaturated version of your primary brand colour.  

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 toggle on and off various display options and are unique to each theme. Vast includes the following custom settings:  

Footer and Header Style

These settings give you three background options for your header and footer: standard, contrast and shade. The standard option will apply the same background colour as your site, derived from your chosen text colour. The contrast option will use your secondary colour as the background. Similar to how your text colour is used to derive a lighter shade for your site’s background, the header and footer shade options will also use this colour to derive a shade for their backgrounds, which will be slightly darker than the colour derived for the site background.  

Image Border

When enabled, a subtle light grey border appears around all category and inventory images.  

Image Style

There are two options for this setting: standard and duotone. When set to duotone, a special effect will be applied to the images on your site. This means that your images will render as two-toned image. The dominant colour will be the one you set as your primary colour in your colour settings. The secondary colour will be black.  

The image used in the hero block on your homepage interacts with this setting slightly differently than the rest of the images on your site. By default, the text content in your hero block is left-aligned. When your hero block is configured this way, the duotone effect will always be applied to the hero image, regardless of whether this setting is configured as standard or not.  

If you choose to enable the centred hero setting, the text content will be centred in the hero area, and the image will inherit what this image setting dictates (e.g., if it is set to standard, it won’t have the duotone effect, but if it’s set to duotone, this will be applied)    

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, Vast comes with two presets that adjust your fonts and colours. 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 the Update button.  

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 Vast's theme presets: • Calm Preset • Bold Preset

Vast has four default menus: categories, header, footer and pages. Detailed information on configuring menus is in our Site Builder Navigation Guide. The categories and page menus are customizable through the Site Builder's navigation setup, but since they do not come in all themes, we'll take a closer look at them here, too.  

Categories Menu

On a desktop, the categories menu appears on your inventory, category, and item or product pages as a sticky left sidebar. On mobile, the menu will stack below your items, products, or item grid, depending on the page, and will also appear on every page as a shop by category link in the bottom left of your header. Opening the link reveals these navigation items in a slideout menu.  

Pages Menu

Similar to the categories menu, the pages menu appears as a sticky left sidebar on the page, contact, and about page templates, as well as on your blog and post pages. On mobile, the menu will stack below the page contents.  

Quick Cart

Vast’s header includes a My Cart icon to display the number of items or products a user has added to their cart. Clicking the icon will open a flyout Quickcart, showing the items or products in the cart, the parameters selected for each, and a subtotal.  

While the Quickcart is read-only and items or products cannot be removed or modified, a View Cart button at the bottom of the Quickcart will direct users to the cart page where they can complete their purchase. If no items or products have been added to the cart, the Quickcart will display the message You have nothing in your cart and a Browse Inventory button that links to your inventory page.  

Navigation Search

The navigation search is a sticky bar that 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 or products, less any that are unavailable on the searched date.  

On mobile, the bar collapses into a set event date link that will open the date selector.  

Social Media Integration

Vast’s footer features a specific social media menu listing 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 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 icon will automatically appear in the header and footer navigation.  

Removing Social Media Accounts

If you no longer wish to include any social media icons, remove the URLs 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 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 will show you how to change a block type, edit a block's content, and add/remove blocks from the page.

Vast has eight custom block types: Hero, Date Search, Featured Block, Testimonials, Gallery, Location Map, Feature and Inventory. 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 what blocks are available in that location.  

Hero

The first block on your homepage, the hero block, comprises several customizable components: a full-width image, heading, description, customizable button and a setting to centre the text content, which is left-aligned by default. We recommend your hero image has a minimum width of 1920px and a minimum height of 1080px to ensure clarity on larger screens.  

Date Search

The date search is a static block on your homepage, just after your hero image. It includes a search form with custom headings and subheadings, allowing customers to search your inventory by available date.  

Featured Block

Another static homepage block located just below the Date Search, the feature block allows you to add up to four “Features” with a title, description, image and customizable link. The block itself can also be given an optional headline and subheading, which will appear centred above the block. 

Gallery

The gallery block allows you to display up to six images with captions and titles. If you have uploaded more than one image, they’ll appear in a carousel with two images featured simultaneously. Scrolling through the images is automatic, but navigation buttons allow users to click at their rate. Hovering over an image will reveal its title and description in an overlay. Clicking one of the images will open it up into a take-over lightbox. In addition, the gallery can be given an optional headline and subheading, which will appear centred above the block.  

Testimonials

The testimonials block allows you to showcase up to three testimonials from happy customers. For each testimonial, you can add the author’s name, other details, a quote, and a star rating. You can also upload a custom image (picture or icon used to represent your source), which will be centred and cropped into a circle. Additionally, you can add a block heading and/or subheading that will appear above the testimonials. 

Inventory

This 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 item’s or product's image and a category badge. The item’s or product's title will display below the image. This block also allows you to enter an optional headline and subheading, which will appear centred above the block. 

Location Map

Enter the coordinates of up to three locations to be displayed on a map. Each location can include its title, description, and customizable link. You can also customize the map display by adjusting the magnification level initially displayed 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 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.

Rich Text Block

Slightly different from the other blocks we've looked at, the rich text block is a text editor that enables you to create, format, and edit text content.  

You'll find these in a few spots throughout the theme, most noticeably on the contact us page and below the title on the about us page. This block is also used on the blog pages.  

Category Feature

On the top of your category pages, just below the header, the category feature lets you add an image and a heading, description, and customizable button on the right.  

Homepage

Vast’s homepage is made up of both static and custom sections. The static sections include (in this order) hero, date form and features sections, followed by up to two additional content blocks. Hovering over each block will reveal options to delete, edit or swap it out for another block type.  

Inventory Page

The inventory page provides a grid of all the items or products available for booking on your site and features the navigation search bar at the top.  

Item/Product Grid

Your items or products will be displayed with the item’s or product's image and a category badge. The item’s or product's title will display below the image.  

Categories Page

The categories page shows a list of all the categories you’ve created in your Booking Manager, displayed in a grid similar to the inventory page. Each item or product 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 Pages

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 category feature block and the item or product grid.  

Item/Product Grid

Like the inventory page, your items or products will be displayed with the item’s or product's image and a category badge. The item’s or product's title will display below the image.  

Item/Product Pages

Your item or product pages comprise several static components and customizable blocks: the navigation search bar, item or product description, item or product images/video, and up to two 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 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, one date will be available to select, rather than a start and end date.

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

Summary & Details

Vast displays the item’s or product's summary (pulled from your Booking Manager) on the left of your item or product page. Below the summary, Vast will print the item’s details (also pulled from your Booking Manager).

Images and Videos

To the right of your item’s or product's description, Vast displays up to five images in a slideshow. If you’ve added a YouTube link to your Checkfront account, this video will be displayed below the summary and details.

Map

If configured in your Booking Manager, a map will also display below your summary and details.

Additional Blocks

At the bottom of every item or product page, you’ll find two customizable blocks that can be swapped for any available blocks or removed.