Using the Vast theme in Site Builder

Site Builder is a legacy product and is no longer available to new Customers.

 

---

Learn more about the Vast theme in Site Builder, including activation and the multiple settings available.

---

Site Builder is an optional add-on to all plans.

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, new or both?

• 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 items (Inventory > Items) and is available in our newest version of Checkfront. Not yet on our newest version and interested in upgrading? Please get in touch with 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 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 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.  

 

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 and slightly desaturated version of your primary brand colour.  

 

Primary Font

Used anywhere there is long-form content and for 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 to choose from for your header and footer: standard, contrast and shade. The standard option will apply the same background colour as your site, which is derived from your chosen text colour. The contrast option will use your secondary colour as the background. Similar to the way 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 will appear 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 a 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 (ie. 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 the fonts and colour scheme of your website with a few simple clicks. If design isn’t your forte, Vast 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 Vast's theme presets: • Calm Preset • Bold Preset

 

---

Vast comes with four default menus: categories, header, footer and pages. You will find detailed information on how to configure menus in our Site Builder Navigation Guide. The categories and pages 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 or 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 which will display the number of items or products that 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 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.  

 

 

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 that lists links to your various 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 blocks are the customizable components that 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 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 in detail how to change a block type, edit a block's content and add/remove blocks from the page.

 

Vast comes with 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 is comprised of 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 heading and subheading, 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. As well, the block itself can 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 at once. Scrolling through the images is automatic, but navigation buttons allow the user to click through at their own 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’re able to add the author’s name, other details, quote, and a star rating. You’re also able to 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 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 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 own title, description, and customizable link. You can also customize the display of the map by adjusting the level of magnification at which is 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 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.  

 

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, coupled with 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 that are 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 that 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 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 component blocks: a category feature block and the item or product grid.  

 

Item/Product Grid

Same as 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 are comprised of 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:

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, there will only be one date 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, again, 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 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

On the left of your item or product page, Vast displays the item’s or product's summary (pulled from your Booking Manager). 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 also 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 which can be swapped for any of the available blocks, or, simply removed.