The StoreConnect Menu Builder

Available on Website v7.78.1.0 and above. Check your version

Your site navigation becomes even more powerful and flexible when using the StoreConnect Menu Builder.

To create a custom menu, you create a single Menu record and for each menu item you want, a Menu Item record. The Menu Builder gives you powerful options to build custom menus that include dropdown menus and mega menus (menus that include images).

Note: At this point in time, there is no ability to preview your menu within Salesforce.
If you want to preview the menu, our recommended way is to create a test store and assign your menu to it while you are testing.

Ways to Customise your Header

StoreConnect allows you to customize your store header in 3 ways.

  1. Using the default menu which allows you to only adjust which product categories are shown in what order to the left of the Account menu option. How to do this is detailed in our Navigation Product Categories help article.

  2. Using the menu builder with the default header including search and account login, but completely customising what appears in the navigation menu using our Menu Builder. This article shows you how to do this.

  3. Completely replacing the Header Menu HTML in it’s entirety and optionally use the Menu Builder to control the navigation menu from within your Salesforce environment. How to do this is detailed in our Custom Header help article.

How to create a custom header menu

When you create and associate a custom menu as a header menu, it will replace the default menu created with your Naviagtion Product Categories and will be shown in this area of the default header.

assigning custom footer menu


Creating a custom header menu will

Step 1: Create a Menu with the identifier header and the style class name1 dropdown.

Creating a Custom Header


Step 2: Create Menu Items

  1. From your Menu record, select “Related” and find “Menu Item”

  2. Click on New, this will bring up a new window.

  3. In the new window, fill in the information fields “Name”, “Display Name”, “Identifier” and “Menu”. (These are required in order for the menu item to display within the menu header).

    If a Menu Item has child you’ll need to add the style class name dropdown or mega to display them as desired.

    Creating Menu Items


  4. Select one “Target” type for where the menu item will navigate to. If you choose an article category, product category or a page, any child of that category can be made to show from a dropdown.

For example, choosing a product category such as Cars will show Cars in the menu and if dropdown is entered as the “style class name” of that menu item, it will show a drop down list of products within Cars.

Choose the URL field if you want to send the user to a custom url or site.

Repeat steps 1 - 4 to create as many items as you want.

Note: Each menu item can have child menu items. If you have three Menu items related under each, your menu will create a third tier.
Don’t use dropdown or mega class from the child item’s, as it will prevent your third tier of menu items displaying, only use the style class name from the top menu item.


Step 3: Associate your header menu to your store following these sub steps:

  1. Go to your store settings
  2. Under the ‘Content Management (CMS)’ tab look for the Header Menu field
  3. Click on the pencil icon to the edit the field
  4. Search for your header menu using its identifier or name
  5. Select your header menu
  6. Click on ‘Save’ and you will see your changes shortly on your site

Selecting your header menu


Once the above is done, your site will now display the selected menu.

Optional: How to use your menu in a Custom Header

If you have chosen to build a completely custom header, then it is also advantageous to use a Menu object within it, this allows non technical users within your Salesforce org to edit the menu without having to edit the HTML of the custom menu you built.

Assuming you are using our recommended HTML markup on the custom header article you will need to insert your menu as follows:


  <nav class="SC-Navbar">
    <div class="Navbar_inner"> {{ 'header' | menu }} </div>
  </nav>

If you are using StoreConnect 10.5.0 and up use:


  <nav class="SC-Navbar">
    <div class="Navbar_inner"> {{ all_menus["header"].render }} </div>
  </nav>

You can also use the liquid tag to insert your header menu on any HTML markup of your own creation and with your custom CSS classes.

Step 1: Create a Menu with an identifier of your choice (e.g. footer) and add your desired Menu Items as described above (How to create your header menu step 2).

Step 2: Go to your store settings and under the ‘Content Management (CMS)’ tab you will find the “Footer Menu” field.

Step 3: Click on the pencil icon to edit the field.

Step 4: Search for your menu by typing its name or identifier and select it.

Step 5: Click ‘Save’ and you will be able to see your footer menu shortly on your store.

Note: Don’t use the dropdown class on your footer menu as it will hide your items on handheld devices.

assigning custom footer menu


Again, if you have chosen to build a completely custom footer, then it is also advantageous to use a Menu object within it, this allows non technical users within your Salesforce org to edit the menu without having to edit the HTML of the custom menu you built.

You will need to insert your menu as follows:


  <footer class="SC-Footer"> {{ 'footer' | menu }} </footer>

If you are using StoreConnect 10.5.0 and up use:


  <footer class="SC-Footer"> {{ all_menus["footer"].render }} </footer>

Note: If you want your footer menu items vertically aligned then you need to add the stacked class to the “Style Class Names” field when configuring your footer menu.

General Information

Native child categories, articles, or pages

Use the child_category_levels setting to show a menu item’s native children without needing to configure Menu Items manually. Any manually-configured Menu Items will be displayed after these native children.

Images

This feature is perfect for social bars, boxes with images within your header menu, or any type of custom menu where you would like to display a thumbnail within it.

Styling Customisation

Classes can be added to the style_class_names field. Each name should be separated by a space. We’ve designated a number of keywords that change the display of individual menus and menu items. These include:

**dropdown** Can be used on Menus and Menu Items to display their children in a dropdown format.

**mega** Can be used on Menu Items to display their children in a full-width mega menu.

**wrap** Wraps columns so Menu Items without children are properly vertically aligned.

**subtle** Makes Menu Item links semi-transparent

**end** Can be used on a Menu to align child Menu Items to the right/end of the block. Dropdowns inside this Menu are anchored from the right; the account menu is an example of this.

**center** Menu Items are positioned in the centre.

**space-between** Menu Items will have space between them.

**space-around** Menu Items will have space around them (i.e. before, between, and after).

Including in other Content Blocks

You can embed menus within other content blocks automatically, for example, to build a social bar for your site driven by a footer menu, you could make a content block using the “No Added Styling” type with the following in the content section which would render the footer-menu followed by the sitemap-menu. You would then add this to the “Footer” field of your store record.

<footer class="SC-Footer">
  {{ "footer-menu" | menu }}
  {{ "sitemap-menu" | menu }}
</footer>

If you are using StoreConnect 10.5.0 and up use:

<footer class="SC-Footer">
  {{ all_menus["footer-menu"].render }}
  {{ all_menus["sitemap-menu"].render }}
</footer>

Troubleshooting

When updating your header and footer items, you may notice a delay in them updating on your site. These changes can take up to two minutes to come through.

If your menu is not showing up, we recommend checking if your menu has been assigned to the current store you are working on. If you are working with multiple stores at once, you should create a unique name for each menu to avoid confusion when assigning menus to every given store.

When you are creating multiple menus for one store, you notice that they disappear on handheld devices. The first thing to check is that the menu doesn’t contain the dropdown class. The dropdown or mega classes are primarily used on menus at the header level. However, we don’t discourage using it and play around with it in multiple scenarios.

Don’t hesitate to contact the support team if you encounter any issues.

 


 

  1. Class Name: A Class Name is the name given to a template of software code predefining visual or functional behaviour. 

 

 
Back to Documentation