Configuring design options in Site Builder – Checkfront

Learn about the design options available in Site Builder, including styling, branding, and themes.

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

Site Builder Design Basics

The Design page in Site Builder enables you to customize the look and feel of your website in a way that most closely resembles your business brand.

To access the design screen, locate the main navigation menu on the left side of your screen and click on the link labelled Design. This brings you to the design screen in your Site Builder account.

You see three main tabs from here: Style, Branding & Custom. Let's begin by looking at the style tab.

Style Tab

Here, you can choose a style for your website. You can select a colour scheme for your pages and the fonts used for the page titles and body text. It's important to realize that the options here vary slightly from theme to theme.

For instance, some themes have four areas where you can choose your colour palette, whereas others offer only three.

Branding Tab

The branding tab lets you make the website your own by uploading a company logo and favicon.

Company Logo

When it comes to the logo, you have two choices. You can either display the site title you input during the setup process, or you can upload an image file of your actual company logo.

If you wish to change the name of your site and use that as the logo, then you can do so at Settings > Site Details . You need to update the Site Name field.

If you wish to upload a logo, then click on Use Image.

A new field opens below, and you can drag your logo file onto that field or click Select an Image to choose the file from your computer.

Remove Logo

To remove the logo you have uploaded, hover over the design pane, and you see a small trash can appear in the lower right corner.

Click the icon, and the logo is removed. You are now using the site title again.

Favicon

The favicon is a small icon in the browser address bar, tabs, and bookmarks. Uploading a custom icon helps your website stand out to the customer.

Below, you can see an example of the favicon used by Checkfront.

Upload your favicon by dragging it onto the upload area or clicking Select an Image.

The icon you upload should be a maximum of 60px tall and 60px wide.

Custom Tab

The custom tab enables you to customize your website's look and feel. Depending on your theme, you can choose how your header and footer look in terms of the colour scheme, plus various other aspects of your design.

Theme Settings

If the design isn’t your forte, each theme has 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 Updates

Occasionally, theme developers may update the Site Builder themes to improve functionality and security. There are two places where you can see the availability of an update for the theme you are using.

First, theme updates are indicated by a small green dot on the Design link in the left sidebar.

Secondly, a green dot is displayed by the Settings icon at the top of the design pane. This is accessed by clicking on the design link in the left sidebar.

Clicking on this icon opens the settings pane, where you will see a Theme update available message.

Click Update Now to begin the update process. You see a confirmation message. Simply click Update to continue.

Once the update completes, a confirmation message appears on the screen.

Click okay to dismiss this message and continue working on your Site Builder website.