How to create Multi-level menus in Shopify.

There are many designers and developers having this question. And in every free theme or instruction of Shopify, you will see that it seems to be allowed to 2 levels. Now we provide the way that creates 3- level menu (see the image below). If you want more levels, please do the same.

Example: In the top menu you want to have the menu with 3 levels: Electronics (level1)-> Cell phones (level2)-> Apple, Samsung, HTC (level3).

Step 1: Go to the admin-> collections and create collections:

Electronics, Cell phones, Apple, Samsung, HTC

Step 2: Create Menu level 1: Go to the admin -> navigation -> Edit Link List -> Add another link

Step 3. Create Menu level 2 CellPhones. Go to the admin-> navigation -> Add Link List

Step 4. Create Menu level 3: Apple, Samsung, HTC. Go to the admin-> navigation -> Add Link List

After finishing, please click on navigation you will see that menus are listed as below:

Final Step.

We need to write the code that shows three levels. In this instruction, i’m using the launchpad theme. It is written in the file Snippets/dropdown.liquid, please replace the code by this code:

 

{% for link in linklists.main-menu.links %} {% if linklists[link.handle] == empty %}
• {{ link.title }}

{% else %}

• {{ link.title }}
  {% for l in linklists[link.handle].links %}
  • {{ l.title }}

  {% if linklists[l.handle] != empty %}

  {% for child_l in linklists[l.handle].links %}
  • {{ child_l.title }}

  {% endfor %}

  {% endif %} {% endfor %}

{% endif %} {% endfor %}

We need to write the code that shows three levels. In this instruction, i’m using the launchpad theme. It is written in the file Snippets/dropdown.liquid, please replace the code by this code