Tag Archives: Shopify menu

Shopify menu

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.

Shopify menu

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
shopify_menu1-1024x478

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

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

shopify_menu

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

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 %}

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