Search code examples
shopifyshopify-appshopify-template

shopify deeply nested menu, where to put?

Shopify, out of the box, only supports 3 levels deep menus (welcome to 2021).

What is a good approach to implement deeper nested menus?

things that come to mind:

manually sub-nest menus in the theme files.

E.g. create menu

MAIN

and another menu MAIN1-LVL2

then put the MAIN1-LVL2 like so

MAIN -> MAIN1-LVL2

same with MAIN2-LVL2

Another approach I thought about putting the menu data into settings_data.json

Is there another good way to do that?

Solution

  • The usual way is to create a recursive snippet that will check if there is a menu dropdown OR an another menu with the same menu title and output the links.

    So for example if you have:

    Navigation Title: Main menu
- Home
- About
- - Company
- - History
- - - Link 1
- - - Link 2
- - People
- Contact

Navigation Title: Company
- Link 1
- Link 2

    There will be a standard dropdown for the About and History, but Company will render the second menu called with the same name.

    If you are worried that you will have name collision you can prefix the menu with dropdown- and the snippet will check if the navigation has the same title with the prefix.

    This is how most premium themes handles mega menus in Shopify.