We are Underground support

Mega Dropdown

Last Updated: Aug 28, 2016 11:44AM EDT

Looking to access your theme's code or language options with Shopify's new theme editor layout?

In your Shopify admin click on Online store > Themes
Next to the theme that you want to edit click on the Menu button which is a small square with 3 blue dots
This will open a submenu of options which includes: Edit HTMl / CSS and Edit Language

The Mega Dropdown contains 4 sections each of which can carry a link list from the Navigation section of your admin.
This Mega Dropdown needs a parent link assigning to it in order to appear when that link is hovered.

As standard we have assigned this to the Catalog link which is a default in all new Shopify stores.
If you would like to change this to show when a different link is hovered simply add the name of that link Exactly as you have entered it within the main menu link list

If your Main Menu contains a link typed as: Shop Now and this will trigger the mega dropdown simply type Shop Now into the field within the customise theme > Navigation section.

From your Online Store > Navigation > Main Menu Link list
Make note of the name of the link and the Case it is typed in as... For the Example we are choosing: Explore

In Themes > customise theme > Navigation Re-Type the Link title into the Mega Dropdown Link Text box.

Click Save and then test the link on your Store Front.

For further illustration please see this video

Showing products in drop downs
For all other drop down menus that you have in the Main menu navigation, where the link in the main menu that is hovered to show a drop down points to a collection you will see the first 5 products from that collection within it's child drop down.

For example if you have a link in your main menu named: Shop and this points to a collection.
If you have a drop down menu from that Shop link it will show the links in the drop down + the first 5 products

If the link in the main menu that has a drop down does not point to a collection but instead points to a page or other content it will simply list the drop down items without showing products.

How do i remove the products from the dropdown?
To remove products from showing within this drop down a small code adjustment will be needed.
  1. Click on Themes > Customize theme > Theme options > Edit HTML / CSS
  2. On the next page click on the Snippets folder
  3. Open the file named: navigation.liquid
  4. On line: 125 delete this:

      {% endif %}
  5. Then delete lines: 67 - 107 which comprise of the following:

      {% if linkurl contains 'collections/' %}
      {% assign collection = link.object %}
      <ul class="megamenu">
        <div class="mega-container">
          <!-- Start Megamenu Inner Links -->
          <li class="desktop-2 tablet-1">
            <h4>{{ link.title }}</h4>

            <ul class="mega-stack">
              {% for l in linklists[child_list_handle].links %}
              {% capture child_list_handle %}{{ l.title | handleize }}{% endcapture %}
              <li><a href="{{ l.url }}">{{ l.title }}</a></li>    
              {% endfor %}
          {% for product in collection.products limit: 5 %}
          <li class="desktop-2 product-index">
            <div class="ci">
              <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
                <img src="{{ product.featured_image | product_img_url: 'medium' }}" alt="{{ image.alt }}" />
            <div class="product-details">  
              <p><a href="{{ product.url | widthin: collection }}">{{ product.title }}</a></p>
              <div class="price">
                <a href="{{ product.url | widthin: collection }}">
                  {% if product.price < product.compare_at_price %}
                  <div class="onsale">{{ product.price | money }}</div>
                  <div class="was">{{ product.compare_at_price | money }}</div>
                  {% else %}
                  <div class="prod-price">{% if product.price_varies %} {{ 'products.general.from' | t }} {{ product.price_min | money }} - {{ product.price_max | money }} {% else %}{{ product.price | money }}{% endif %}</div>
                  {% endif %}    
          {% endfor %}        
      {% else %}

  6. Click save when done but do not close this page
  7. Open your website in a new window and test your navigation
  8. If all is working OK you may close the editor if it is not look to the top of the navigation.liquid page that you have been editing for the older revisions link. Here you can roll back through the last few saves to roll back this change. If you are having difficulties making this change please contact us for support.

Get help

Note We can not offer individual theme modifications, however are happy to advise on the best Shopify resources and finding developers to work on your theme.
Want to customize your theme?
Have questions not covered in our docs?
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found