Go to the new documentation
EN IT

Create a menu

You can create as many menus as you want. Individual menu items can then be easily added, edited, and removed from the admin for each menu.

See also

If instead you simply want to add a menu item to a menu already present on the site then...

Before you continue

Creating a menu, even if it may seem simple, still requires some knowledge of HTML and CSS. You may also need to modify the HTML and CSS code to display the menu correctly and with the desired styling on the store.

Add a menu

  1. Go to the Website section in the admin.
  2. Go to the Design subsection.
  3. Click Customize on the template where you want to create the menu. The template editor will open.
  4. Click HTML and CSS.
  5. Click the file name where you want to create the menu. The file source will open in the middle of the page.
  6. Insert the following code in the position where the menu should appear. 
      <!-- .for menus(15) -->
  <div class="menu vertical">
    <!-- .if title --><h3><!-- .show title --> Title <!-- .end --></h3><!-- .end if -->
    <!-- .if items -->
    <ul>
      <!-- .for items -->
      <li><!-- .show item --> Item <!-- .end --></li>
      <!-- .end for -->
    </ul>
    <!-- .end if -->
  </div>
  <!-- .end for -->
    where instead of "15" in "menus(15)" you should write a unique menu number not used by another menu in the template. If the menu should appear horizontally, replace "vertical" with "horizontal".
  7. Click Save to save the file changes.
  8. Click < at the top right next to HTML and CSS.
  9. Click Menus; the new menu will appear in the left column.

Give a menu a name in the admin

When you add a menu in the template source code, the menu appears in the admin among the menus but without a name.

  1. Go to the Website section in the admin.
  2. Go to the Design subsection.
  3. Click Customize on the template for which you want to name the banner section. The template editor will open.
  4. Click HTML and CSS.
  5. Click editor.json in the file list in the left column. The file source will open in the middle of the page.
  6. Inside the "menus" field add the following: 
      {
      "menu" : 5,
      "label" : {
          "en" : "Winter promotions",
          "it" : "Promozioni invernali"
      }
  }
    where instead of 5 you should indicate the menu number as it appears in the template code:
    <!-- for menus(5) -->
  7. Click Save to save the file changes.