Design

---

Prerequisites: 

• Site Builder is available to those using items (Inventory > Items), a feature of our classic version of Checkfront.
• Interested in using Site Builder with products (Inventory > Products)? Your account must be a member of our Early Access Program. Please reach out to Checkfront Technical Support to learn more.

 

Early Access Program To learn more about becoming part of our Early Access Program check out our related blog post or contact our Technical Support team. Find our complete set of help articles related to the Early Access Program here: Early Access Program.

 

---

 

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 labeled Design. This brings you to the design screen in your Site Builder account.  

 

 

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

 

 

---

Here, you can choose a style for your website. You are able to select a colour scheme for your pages as well as the fonts that are used for the page titles and body text. It's important to realise at this point that the options here may vary slightly from theme to theme.

For instance, some themes have four areas for which you can choose your colour palette, whereas other themes offer only three.  

 

 

     

---

 

The branding tab allows you to really 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 choose to display the site title which 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 either 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 on that and the logo is removed. You are now using the site title again.  

 

Favicon

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

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

 

 

Upload your favicon in the same way as the company logo by either 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.  

 

 

---

 

The custom tab enables you to further customise the look and feel of your website. Depending on the theme you are using, you can choose the way your header and footer looks in terms of the colour scheme, plus various other aspects of your design.  

  

   

---

 

If design isn’t your forte, then each theme 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 .  

 

 

---

 

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

 

 

First of all, 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.