Working with site navigation in Site Builder

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

 

---

Learn how to set up navigation in Site Builder, including header page and footer page navigation options.

---

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

 

Do you want to try Site Builder to see if it's a good fit for your business? If so, get in touch with our Technical Support team and ask to enable Site Builder in your Checkfront account.

 

---

Site navigation is how your customers navigate your website and move from one page to another. Organizing your page links in a structured, user-friendly manner makes perfect sense.

As such, Checkfront provides menus at the top of your page (the header) and the bottom of your page (the footer). There is also a category filter which we look at later.  

 

Both the header and footer can be managed in your Site Builder web portal by clicking on the Navigation link in the left sidebar. This menu is always visible while working in Site Builder and can be easily accessed.  

 

Let's begin by exploring the header and the navigation menu associated with it.

Clicking on the Navigation link in the left sidebar slides out the navigation edit window.

You can return to the main menu anytime by clicking on the small arrow icon in the top left corner of the edit window, as highlighted in the image below.

 

 

What is the header menu?

The header menu is the set of navigation links at the top of your Site Builder website. Depending on the theme you have activated, this menu may look slightly different, but ultimately it should appear something like this...  

 

 

Looking at the header edit menu, it's easy to see how the options you choose translate into the menu at the top of your Site Builder page.

 

 

 

To edit the header menu, click on the blue Edit link, as seen in the image above. This slides out the edit window even further. You see a list of any currently active menu options.

This menu, by default displays some of the pages that come as standard with your theme.  

 

 

Steps to Edit the Header Menu:

1. Select a link type from the drop-down menu.

2. Select a destination from the drop-down menu.

3. Input or change the label in the text field. Please take a look below for detailed instructions on these steps.  

 

The link type enables you to connect that link to different items or products and features, both inside and outside your Site Builder page. The options are accessed via a drop-down menu.  

 

 

There are six link types you can choose from:

 

Page

Page enables you to create a link to another page on your website. The page must have already been created before updating the menu.

Select the page you want to link to from the drop-down menu highlighted below.  

 

 

You may also choose the text for the navigation button. Short and sweet is always better!  

 

Category

Choosing the category link type enables you to create a direct link to a particular category in your inventory. When clicked on, the user is presented with a polished page of all the items or products in said category.  

 

 

Select the category from the drop-down Destination menu. The text field contains the category name as configured in your Checkfront account.

If you'd like to change this text for your Site Builder pages, then you can do so here.  

 

Item

Like the category link, the item link type enables you to link directly to the booking page for a particular item or product. That item or product is chosen from the drop-down Destination menu.  

 

 

Update the link text as needed. Otherwise, it's good to go.  

 

URL

If you'd like to create a link to a page that isn't on your Site Builder website, then you can do so with the URL link type.

 

 

Enter the web address (URL) of the site you'd like to link to in the Destination field, and then enter a label for the link in the Text field.  

 

Post

If you use the blogging feature in Site Builder, you can link directly to one of your posts by selecting the Post link type.  

 

 

You can select the post from the drop-down Destination menu and change the link label in the Text field if necessary.

If your blog post title is a little long for this link label, you may want to condense it a bit.  

 

Submenu

 

The submenu option enables you to create a nested set of links under one main heading.

In the example below, the main menu link is used as a heading, which, when clicked on, opens up a drop-down menu of actual links that can be clicked on. The heading itself does not link to anywhere specific.  

 

 

Once you've entered a label for the main menu item, click + Add Item to Submenu.

Here, we've added two Item link types in the same way described above.  

 

 

You can add as many submenu links as you like by clicking on + Add Item to Submenu each time. Submenus can consist of multiple link types if you wish!

The finished article looks something like this...  

 

     

---

Once you've been using your menu for a while, you may decide to add some additional links or wish to reorder the links you already have. Site Builder has a built-in feature that allows you to do this.  

 

 

Steps to Reorder the Menu Links:

1. Hover your mouse over a link in your menu editor. Notice that the background turns blue, and two horizontal lines appear to the left of the chosen link type.

2. Click and hold your mouse on those horizontal lines and drag the link to a new position in the menu.

3. Release your mouse button, and the menu is now reordered.

4. Click the blue Update button to save your progress. The same applies to submenus, and they can be reordered in the same way.    

 

---

The footer navigation menu is configured just like the header navigation menu, so we won't go into the same amount of detail on how to set things up. Simply scroll back up and read the details there.

The footer is the area at the bottom of your web pages that can contain useful links, social media calls to action, and copyright details.

The idea is the same, though, and you can see in the image below how the links you make translate to the actual footer.  

 

 

The number of columns you can have in your footer is theme-dependent.

In the example we are creating, there are 3 columns for the footer navigation links. We've already looked at how to create menu links and the different types available in Site Builder.

So, let's have a look at how the footer menu can be used to navigate your website, social media, and third-party web pages. We do this by creating submenus under the 3 main headings.  

 

 

Looking at the structure above, you can see that we have the 3 main columns, each with its heading. These were created by selecting the submenu link type for each one.

We then added 3 links under each heading using various link types.

When finished, it looks something like this to your users...

  

---

Depending on the theme you're using, you may see a feature in the Navigation section called Category Filter .

 

 

This enables you to narrow down the search on your inventory page by selecting one or more categories to include. Items or products from categories not selected are filtered out from the search results.  

 

 

Steps to Add Additional Categories:

1. Click the edit link to open the category filter edit window.

2. Click + Add Item to Category Filter Navigation .

3. Select Category from the Link Type drop-down menu.

4. Select the category you wish to add from the Destination drop-down menu.

5. Change the text label if required.

6. If required, hold your mouse on the two horizontal lines to the left of the link type and drag the category into a new position.

7. Click Update to save your progress.  

 

Once you've configured the category filters, you see them at the top of your Inventory page.  

 

Click on the categories you wish to include in your search. Only the items or products from the categories selected are displayed. Everything else is filtered out.