1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to create multi-level dropdown menus in shopify?

Discussion in 'Web Design' started by mlg131, Apr 12, 2017.

  1. mlg131

    mlg131 Junior Member

    Joined:
    Oct 11, 2016
    Messages:
    100
    Likes Received:
    24
    Location:
    Cali, Colombia
    Im using the supply theme. Ive googled it heaps but everything is out of date or too confusing for me to understand. Is anybody able to help me with this?

    Code:
    <ul class="site-nav" id="accessibleNav">
      {% unless linklists[section.settings.menu].links.first.url == '/' %}
      <li class="large--hide">
        <a href="/">{{ 'general.breadcrumbs.home' | t }}</a>
      </li>
      {% endunless %}
      {% for link in linklists[section.settings.menu].links %}
        {% assign child_list_handle = link.title | handleize %}
        {% if linklists[child_list_handle].links != blank %}
          <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true">
            <a href="{{ link.url }}">
              {{ link.title }}
              <span class="icon-fallback-text">
                <span class="icon icon-arrow-down" aria-hidden="true"></span>
              </span>
            </a>
            <ul class="site-nav--dropdown">
              {% for childlink in linklists[child_list_handle].links %}
                <li {% if childlink.active %}class="site-nav--active"{% endif %}><a href="{{ childlink.url }}">{{ childlink.title | escape }}</a></li>
              {% endfor %}
            </ul>
          </li>
        {% else %}
          <li {% if link.active %}class="site-nav--active"{% endif %}>
            <a href="{{ link.url }}">{{ link.title }}</a>
          </li>
        {% endif %}
      {% endfor %}
    
      {% if shop.customer_accounts_enabled %}
        {% if customer %}
          <li class="customer-navlink large--hide"><a href="/account">{{ 'layout.customer.view_account' | t }}</a></li>
          <li class="customer-navlink large--hide">{{ 'layout.customer.log_out' | t | customer_logout_link }}</li>
        {% else %}
          <li class="customer-navlink large--hide">{{ 'layout.customer.sign_in' | t | customer_login_link }}</li>
          <li class="customer-navlink large--hide">{{ 'layout.customer.create_account' | t | customer_register_link }}</li>
        {% endif %}
      {% endif %}
    </ul>
    
    Code:
    <!doctype html>
    <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
    <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
    <!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
    <!--[if IE 9 ]><html class="ie9 no-js"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html class="no-touch no-js"> <!--<![endif]-->
    <head>
    
      <!-- Basic page needs ================================================== -->
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
      {% if settings.favicon %}
      <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
      {% endif %}
    
      <!-- Title and description ================================================== -->
      <title>
      {{ page_title }}{% if current_tags %}{% assign current_tags_joined = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: current_tags_joined }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
      </title>
    
    
      {% if page_description %}
        <meta name="description" content="{{ page_description | escape }}">
      {% endif %}
    
      <!-- Product meta ================================================== -->
      {% include 'social-meta-tags' %}
    
      <!-- Helpers ================================================== -->
      <link rel="canonical" href="{{ canonical_url }}">
      <meta name="viewport" content="width=device-width,initial-scale=1">
    
      <!-- CSS ================================================== -->
      {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
      {% include 'google-fonts' %}
    
      <!-- Header hook for plugins ================================================== -->
      {{ content_for_header }}
    
      {% include 'oldIE-js' %}
    
      {% comment %}
        If you store has customers disabled, you can remove the following JS file
      {% endcomment %}
      {% if template.directory == 'customers' %}
        {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
        {{ 'customer_area.js'  | shopify_asset_url | script_tag }}
      {% endif %}
    
      {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
    
    
      <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
      <!--[if lte IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]-->
    
      <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
      <!--[if lte IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->
    
    
    </head>
    
    <body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}" >
    
      {% section 'header' %}
    
      <main class="wrapper main-content" role="main">
    
        {{ content_for_layout }}
    
      </main>
    
      {% section 'footer' %}
    
      <script>
      var moneyFormat = '{{ shop.money_format }}';
    
      var theme = {
        strings:{
          product:{
            unavailable: {{ 'products.product.unavailable' | t | json }},
            will_be_in_stock_after:{{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }},
            only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
          },
          navigation:{
            more_link: {{ 'layout.navigation.more' | t | json }}
          }
        }
      }
      </script>
    
    {% if settings.ajax_cart_method != 'page' %}
    
      {% include 'ajax-cart-template' %}
    
      <script>
      jQuery(function($) {
        ajaxifyShopify.init({
          method: '{{ settings.ajax_cart_method }}',
          wrapperClass: 'wrapper',
          formSelector: '#addToCartForm',
          addToCartSelector: '#addToCart',
          cartCountSelector: '.cart-count',
          toggleCartButton: '.cart-toggle',
          useCartTemplate: true,
          btnClass: 'btn',
          moneyFormat: moneyFormat,
          disableAjaxCart: false,
          enableQtySelectors: true
        });
      });
      </script>
    {% endif %}
    
    </body>
    </html>
    
     
    Last edited: Apr 12, 2017
  2. Dankmemez

    Dankmemez Jr. VIP Jr. VIP

    Joined:
    Jul 28, 2016
    Messages:
    197
    Likes Received:
    69
    Gender:
    Male
    It should be in the menus section of your theme. I've never used supply from shopify but all their themes work from the same basic backend.

    Youtube might be better than google.
     
  3. bartosimpsonio

    bartosimpsonio Jr. VIP Jr. VIP Premium Member

    Joined:
    Mar 21, 2013
    Messages:
    12,036
    Likes Received:
    10,822
    Occupation:
    WHEREZ MA
    Location:
    BITCOINS AT?
    Home Page:
    Try to use their own builder tool. Diving into the code of a custom template engine like they have is sure to confuse you.
     
  4. mlg131

    mlg131 Junior Member

    Joined:
    Oct 11, 2016
    Messages:
    100
    Likes Received:
    24
    Location:
    Cali, Colombia
    Yeah the code stuff is driving me nuts. The stuff i tried hasnt worked but the tutorials are all designed for coders so im just guessing where to put it lol. Im chatting to shopify support now, none of their themes support multi layered dropdown (WTF!), but there is an app for it
     
  5. Sythix

    Sythix Senior Member

    Joined:
    Sep 29, 2014
    Messages:
    961
    Likes Received:
    680
    Location:
    127.0.0.1
    Home Page:
    You should be able to do it in the menu section without breaking your code.. I can do this for you.
     
  6. mlg131

    mlg131 Junior Member

    Joined:
    Oct 11, 2016
    Messages:
    100
    Likes Received:
    24
    Location:
    Cali, Colombia
    Cheers for the offer man, appreciate it. I'll try out this app they recommend first, if I don't like it I'll get back in touch with ya.
     
    • Thanks Thanks x 1
  7. Dankmemez

    Dankmemez Jr. VIP Jr. VIP

    Joined:
    Jul 28, 2016
    Messages:
    197
    Likes Received:
    69
    Gender:
    Male
    Code editting isn't necessary rofl. Youtube "shopify drop down menu".
     
  8. mlg131

    mlg131 Junior Member

    Joined:
    Oct 11, 2016
    Messages:
    100
    Likes Received:
    24
    Location:
    Cali, Colombia
    Yes, a dropdown menu is easy, but shopify themes dont support multi layer drop down without editing code. or using an app, supposedly.
     
  9. mlg131

    mlg131 Junior Member

    Joined:
    Oct 11, 2016
    Messages:
    100
    Likes Received:
    24
    Location:
    Cali, Colombia
    Update for anyone who cares: A free App called Mega Menu can create multi layer dropdown menus, but it cant create a menu out of tags, only collections. PROBLEM SOLVED.
     
  10. illfounded21

    illfounded21 Senior Member

    Joined:
    Dec 19, 2011
    Messages:
    1,168
    Likes Received:
    1,178
    Location:
    UK
    Partially related supply question...

    Do you know how to integrate 'read more' into your collection descriptions? Vs having ALL of the text.