Shopify. How to add drop-down menu to Mega Menu

This tutorial shows how to add a drop-down menu to Mega Menu of your Shopify store.

1. Open site admin panel and navigate to the Online Store -> Themes.

   

2. Find the theme you want to edit, click the … button, then click on Edit HTML/CSS.

   

3. Under the Config folder, locate and click on settings_schema.json Datei und öffnen Sie sie im Online Code editor.

4. In the online code editor, add this code:

   ?

   1 2 3 4 5

   { "type": "link_list", "id": "megamenu5_sub", "label": "Dropdown" },

   

5. Under the Snippets folder, locate and click on widget-megamenu.liquid file to open it in the online code editor.

6. In the online code editor, add the code for dropdown after line of the 5th item:

   {{ settings.megamenu5_text }}{% if settings.megamenu5_badge and settings.megamenu5_badge != '' %}{{ settings.megamenu5_badge }}{% endif %}

   ?

   1 2 3 4 5 6 7 8

   {% capture linklist_iteration %}megamenu5_sub{% endcapture %}          {% capture linklist_name %}{{ settings[linklist_iteration] }}{% endcapture %}           <ul>       {% for link in linklists[linklist_name].links %}       <li class="first last">{{ link.title | link_to: link.url }}</li>       {% endfor %}        </ul>

   

7. Under the Assets folder, locate and click on style.css.liquid file to open it in the online code editor.

8. In the online code editor, add the dropdown styles:

   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   li.megamenu_item_5 {   position: relative;   }   .sf-menu > li.megamenu_item_5 > ul {   width: 200px;   position: absolute;   left: 0;   top: 50px;   } .sf-menu > li.megamenu_item_5 > ul li a {   padding-left: 5px;   padding-bottom: 10px;   font-size: 25px;}

   

9. Save your changes.

10. Navigate to Online Store -> Themes > Customize theme > Mega Menu and add the dropdown menu for the menu item (in our case it is 5th item).

Feel free to check the detailed video tutorial below: