
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 }}
- {{ link.title }}
- {% for l in linklists[link.handle].links %}
- {{ l.title }}
- {{ child_l.title }}
{% if linklists[l.handle] != empty %}
- {% for child_l in linklists[l.handle].links %}
{% endfor %}
{% endif %} {% endfor %}
{% else %}
{% 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
Kong
Hi, i am using shopify “new standard” theme, but i dont see the dropdown.liquid in snippet, please suggest where to add above code? Thanks!