To adjust the ‘mega’ menu on the left hand side or the top menu bar of your website, go to ‘manager’ and then ’em menu manager’.
You’ll see a list of menus – some of which are samples. There are two which are relevant to you – the horizontal top menu and the vertical left menu.
The horizontal menu is generally quite static (ie it doesn’t change much over time), so you won’ t need to touch this. However the vertical left menu is the one that can change due to new product categories being added and other being removed.
Click to edit the vertical left menu.
Here you will see the currently configured menu set-up:
To edit one of the categories, click on the respective arrow (next to the plus button). You’ll get a ‘columns layout’ box, click on the arrow again, and again on the rows layout until you have hit the the ‘text’ box. On the text box – hit the + symbol.
Use your mouse to drag open the box even further by clicking and dragging the bottom right corner.
The first thing to do before making any edits to this field is to put your cursor somewhere in the box, press CTRL and A (to mark everything), then CTRL and C (to copy everything) and the CTRL and V into a text editing program (NOT microsoft word or similar program) – a text editor is a program such as ‘notepad’ which comes with all windows computers as standard.
The reason you are copying this is because in case you make an edit and make a mistake, you always have the original code to copy back in, in case something goes wrong.
You’ll see a few sections here – one is the text in the ‘h3’ tags which is the title of the menu. Below this is a section called ‘shop by brand’, and below that ‘shop by application’ which list the sub categories in this category.
To add brands or categories, simply ‘copy and paste’ the a line that starts with <li> and ends with </li> (li stands for Line Item).
so I’d copy this line:
<li><a href=”{{store direct_url=’levels/level-survey-books.html’}}”>Level & Survey Books</a></li>
and copy it just below it.
The ‘a href={{‘ code stands for – ‘Anchor Hypertext Reference’ which in laymans terms means ‘link it to this page’. So whenever it says ‘a href’ you are linking the referenced text or image to some other web page.
In the above case, the linked text is the title ‘Level & Survey Books’. So all you need to do is
a. adjust the title of the new category
b. adjust the url link (ie change levels/level-survey-books.html with the new url)
One important thing is to make sure all the dots and t’s are included – including all the symbols (such as ‘ – ” and {‘s). If they are not included or in the wrong place, then something can go wrong. But just copy what has already been done and just adjust the title and the relative url.
If you have any questions, just let me know.
