How to create Multi-level menus in Shopify

There are many designers and developers having this question. According to leading Shopify SEO experts, a well-designed menu improves internal link architecture and improves your category pages’ chances of ranking well in Google search results. 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

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

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:

• {{ 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

>>>Read more: 8 EASY steps of SHOPIFY SEO optimization to TOP 1

>>>Improve Google rankings and drive more website traffic