Multi-level menus in Vend Ecommerce

Multi-level menus can be quite daunting for a first time Vend Ecommerce user. We have aimed to supplement Vend's official instructions with a series of written and visual instructions on this article. If you haven't already, it is worth looking at Vend's navigation article here


For this explanation we'll take the following menu as our example:


We are first going to explain how to replicate up to 2 levels of dropdown. 

First, there is the main dropdown menu with the title "About Us" that looks like this:

  • About us
    • Hello Digital
    • Features
    • How to Buy
    • Kokoa Presets

Then, there is a second dropdown to give the menu this structure:

  • About us 
    • Hello Digital
      • About Hello Digital
      • View our main website
    • Features
    • How to Buy
    • Kokoa presets

First of all you'll want to setup your main navigation menu. 

1) Go to your Design > Navigation settings and "Add Navigation List"
First of all take a look below. We have our "Main Menu" (the menu bar across the top), but we have also setup a separate menu for each dropdown. These are "About" and "Hello Digital" as these are both dropdowns. You will need to setup a new menu for each dropdown you wish to add.


Fill out your main navigation list, but every time you want to have a dropdown do the following:

  • Fill in the link title as you want it to appear. For example, I am doing the "About us" dropdown so I will call the link title "About us".
  • Set the type to "Web address"
  • In the URL, enter the name of menu from the other page. Looking above I can see the "list handle" is called "about" so that is what I will put in here.


This will make a dropdown for the about menu.

So now we have a main menu with a dropdown "About us" but we still need to add that extra dropdown called "Hello Digital". This extra dropdown will contain 2 more links, thus completing our menu structure shown at the beginning.

So, we're going to open up the menu and do the same as above.
Add a link title called Hello Digital, set it to be a web address and the URL "hello-digital" (this matches the menu we made called Hello Digital)


If we were to open up Hello Digital you will see it contains only those 2 links that we want in that second level:
​​

Finally, for Kokoa or Fleur users, if you have called your main menu something other than "main menu", just make sure to head into the theme settings and add the handle in there too:
ezgif-2-b6afd84454.gif

If you use a third party theme it is best to consult your own theme documentation in regards to the final step and linking your menu to your theme.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.