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.
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 follow), enabling you to tweak just a few choice elements.
ColoursBack to top
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 pages, and the category badges in the item 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 pages), highlight for the date field in search forms, text colour for navigation search bar, and timeslot options on item 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 complimentary 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.
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 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.
When enabled, a subtle light grey border will appear around all category and inventory images.
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)
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, 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
Site NavigationBack to top
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.
On a desktop, the categories menu appears on your inventory, category, and item pages as a sticky left sidebar. On mobile, the menu will stack below your items 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.
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.
Vast’s header includes a My Cart icon which will display the number of items that a user has added to their cart. Clicking the icon will open a fly out Quickcart, showing the items in the cart, the parameters selected for each, and a subtotal.
While the Quickcart is read-only and items 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 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.
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 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 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 to 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.
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.
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.
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.
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.
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 it’s the 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.
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.
This block allows you to list up to six of your items. In the block editor, you’ll find inventory search dropdowns, allowing you to select the items you would like to display. Your items will be displayed with the item’s image and a category badge. The item’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.
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 displays 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.
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.
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.
Page Types & FeaturesBack to top
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.
The inventory page provides a grid of all the items that are available for booking on your site and features the navigation search bar at the top.
Your items will be displayed with the item’s image and a category badge. The item’s title will display below the image.
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 in the grid shows the category’s image, description, and a view category link that takes the customer that category’s page, listing the individual items in that category.
A category page is similar in function to the inventory page except that instead of listing all your items, it lists the items specific to one category. It is made up of two component blocks: a category feature block and the item grid.
Same as the inventory page, your items will be displayed with the item’s image and a category badge. The item’s title will display below the image.
Your item pages are comprised of several static components and customizable blocks: the navigation search bar, item description, item images/video and up to two custom sections.
Making a BookingBack to top
Each item 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 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 time slot items, 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 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, 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 drop-down menus. Depending on the configuration of your hourly item, the time options available in the drop-downs 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 drop down will be fixed, account for the fixed length of the booking.
Item Booking DetailsBack to top
Summary & Details
On the left of your item page, Vast displays the item’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 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.
If configured in your Booking Manager, a map will also display below your summary and details.
At the bottom of every item page, you’ll find two customizable blocks which can be swapped for any of the available blocks, or, simply removed.