If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

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.

    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_1

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

    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_2

  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"
    },
             

    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_3

  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>

    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_4

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

    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_5

  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:

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