How to add Mega Menu in Shopify Theme

How to add Mega Menu in Shopify Theme

18
3



1. From your Shopify admin, click Online Store, then click Navigation

2. At first you need to create another menu for each menu item/link that will have submenu.

3. then, you need to create menu for each sub menu item/link that will have megamenu.

3 Comments

  1. can you please show how to add product or feature image in mega menu?

  2. Follow this code:

    <nav>
    <ul>
    {% for link in linklists.main-menu.links %}
    {% assign child_list_handle = link.title | handle %}
    {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
    <li><a class="{% if link.active %}active{% endif %}" href="{{ link.url }}">{{ link.title }} <i class="fa fa-angle-down"></i></a>
    <div class="mega-menu menu-minus">
    {% assign count = 0 %}
    {% for child_link in linklists[child_list_handle].links %}
    {% assign grand_child_list_handle = child_link.title | handle %}
    {% if linklists[grand_child_list_handle] and linklists[grand_child_list_handle].links.size > 0 %}
    <div class="tas">
    <h3 class="hedding-border">
    <a href="{{ child_link.url }}">{{ child_link.title }}</a>
    </h3>
    {% for grand_child_link in linklists[grand_child_list_handle].links %}
    <a href="{{ grand_child_link.url }}">{{ grand_child_link.title }}</a>
    {% endfor %}
    </div>
    {% assign count = count | plus: 1 %}
    {% else %}
    <a href="{{ child_link.url }}">{{ child_link.title | escape }}</a>
    {% endif %}
    {% endfor %}
    </div>
    </li>
    {% else %}
    <li><a class="{% if link.active %}active{% endif %}" href="{{ link.url }}">{{ link.title }}</a></li>
    {% endif %}
    {% endfor %}
    </ul>
    </nav>

Leave a Reply

Your email address will not be published. Required fields are marked *