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:

   {
   "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:

   <a href="{{ settings.megamenu5_link }}">{{ settings.megamenu5_text }}{% if settings.megamenu5_badge and settings.megamenu5_badge != '' %}<span class="menu_badge">{{ settings.megamenu5_badge }}</span>{% endif %}</a>

   {% capture linklist_iteration %}megamenu5_sub{% endcapture %}
            {% capture linklist_name %}{{ settings[linklist_iteration] }}{% endcapture %}
   	
   	<ul>
   	  {% for link in linklists[linklist_name].links %}
   	  <li>{{ 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:

   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: