- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
Shopify. How to add drop-down menu to Mega Menu
June 13, 2016
This tutorial shows how to add a drop-down menu to Mega Menu of your Shopify store.
Open site admin panel and navigate to the Online Store -> Themes.
Find the theme you want to edit, click the … button, then click on Edit HTML/CSS.
Under the Config folder, locate and click on settings_schema.json Datei und öffnen Sie sie im Online Code editor.
In the online code editor, add this code:
{ "type": "link_list", "id": "megamenu5_sub", "label": "Dropdown" },
Under the Snippets folder, locate and click on widget-megamenu.liquid file to open it in the online code editor.
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 != '' %} {% endif %}
{% capture linklist_iteration %}megamenu5_sub{% endcapture %} {% capture linklist_name %}{{ settings[linklist_iteration] }}{% endcapture %}
-
{% for link in linklists[linklist_name].links %}
- {{ link.title | link_to: link.url }} {% endfor %}
Under the Assets folder, locate and click on style.css.liquid file to open it in the online code editor.
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;}
Save your changes.
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