Install Theme

Shopify Mod: Collection or Page Based Smart Sub-Navigation Menus

So I’ve been working on (among other things) launching a Daily Deals site for Ani.ME and decided since we were closer to Woot.com than GroupOn AND we wanted to offer branded swag, so a modified shopping cart / eCommerce system would be best. After much deliberation and research I went with Shopify, and so far its been great. SIDENOTE: As far as I researched, IMHO the best hosted SaaS ecommerce platforms are Shopify and BigCommerce, and the best self-hosted solutions are Magento and OSCommerce.

Customizing Shopify has been relatively easy and the Liquid templating system can be very powerful. One thing it doesn’t support by default however is easy sub-navigation. It has Link Lists for main navigation but it doesn’t allow more than 1 level of menus. There are a few posted workaround methods to create dropdowns and tag based sorting but I wanted a solution that met the following requirements:

Functional Requirements

  • Once setup, be able to edit/manage each sub-menu using Link Lists, a menu/link management feature in the Shopify admin, and not have to edit template code. This allows you to use the link list filters and other dynamic features and easily create smart collection-based sub menu links.
  • Each sub-menu should automatically load up the correct Link List based on page it is on.
  • If no sub-menu exists for the page, automatically either display a specified message or simply not load any sub-menu at all. This means you only have to define the pages you want a sub-menu on, while not requiring you to specify every instance or mess up the rest of your store pages.

Assumptions

  • You already have an area defined where you want the sub-menu to appear.
  • This sub-menu area already appears where desired in the template (as with most themes).
  • You use pages or collections on your main menu navigation, at least on the pages where you want a sub-nav.
  • NOTE 1: The example below is shown using collections as the list identifier, if you use pages then change collection.title to page.title.
  • NOTE 2: I use sub-menu, subnav and sub-nav interchangeably. They refer to the same thing.

How To

  1. Determine which main menu/top level pages or collections you want to have a sub-menu for.

  2. For each such page/collection that you want a sub-menu for, go to the NAVIGATION in the Shopify Admin and create a Link List with the desired sub-menu links.



  3. Write down the Handle of each Link List. In this case it is daily-deals.



  4. Go to the Template Editor and open the theme template file that contains the area where you want your subnav to appear. In this case, I am using the free Structure theme, and it is in the subnav.liquid snippet.



  5. In the above image and below snippet, you see the code we are about to create already inserted. The code consists of 2 parts. The first part identifies the page that is loaded and pulls the page title or (as above) the collection title. It then creates a variable value that corresponds to load the correct Link List. The second part, simply outputs the links in the format you specify. If a link list doesn’t exist for the page that is loaded, you can specify a different output or none at all.

    <!-- BEGIN COLLECTION-BASED SMART SUB-NAVIGATION -->
    <!-- From mikeprasad.com, visit for detailed instructions. -->
    
    <!-- Determine Page or Collection and assign matching LinkList Handle -->
    <!-- Edit 'Title' and 'link-list-handle' to match each main nav page.collection with the desired link list -->
    
    {% if collection.title == 'Title 1' %}
    {% assign linklistHandle = 'link-list-handle-1' %}
    
    <!-- Repeat additional 2-line sets of elsif and assign code for each additional submenu -->
    
    {% elsif collection.title == 'Title 2' %}
    {% assign linklistHandle = 'link-list-handle-2' %}
    
    {% elsif collection.title == 'Title 3' %}
    {% assign linklistHandle = 'link-list-handle-3' %}
    
    {% else %}
    {% endif %}
    
    <!-- Print the matching linklist as a sub-nav -->
    
    {% if linklists.[linklistHandle].links.size > 0 %}
    {% for link in linklists.[linklistHandle].links %}
    
    <!-- This formats the output of each link, modify as needed -->
    <a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a>
    
    <!-- This is the divider HTML that is output between each link, modify as needed -->        
    {% unless forloop.last %} <span>&#124;</span>{% endunless %}
    
    {% endfor %}
    {% else %}
    
    <p>This is the output if there is no matching linklist for {{ collection.title }}. Modify or delete this line as desired.</p>     
    
    {% endif %}
    
    <!-- END COLLECTION-BASED SMART SUB-NAVIGATION -->
    
  6. If you have any basic experience, you can stop at this step and simply copy and paste the above code, then follow the inline comments. If you don’t, the next steps should help you out.

  7. For the first page or collection you want a submenu for, you simply replace Title 1 with the page or collection title that Shopify generates. This is the title (with spaces and capitalization) you input when you created the page or collection in the Shopify admin.

    NOTE: To make it easy, once you save the above code snippet in your theme (but before you modify the last few lines), it should display this in the subnav area when you browse each page in the statement saying there is no matching subnav. You can also insert {{ collection.title }} anywhere to display this.

    Next for the corresponding link list that you want to show as the subnav for this page/collection, just replace link-list-handle-1 with the correct link list handle as shown when you edit the link list in the Shopify admin.

    {% if collection.title == 'Title 1' %}
    {% assign linklistHandle = 'link-list-handle-1' %}
    
  8. For each additional page of collection, simply add the following 2 lines of code, replacing Title and link-list-handle as done in the last step.

    {% elsif collection.title == 'Title 2' %}
    {% assign linklistHandle = 'link-list-handle-2' %}
    
  9. This line determines how each subnav link is output. Edit as needed. Also, the active class part will show the link as the active link if its url is the same as the loaded page. This class is usually already in the css of most themes, if not, the link style will default to your normal theme look.

    <a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a>
    
  10. This outputs the divider separating each link. Edit as needed.

    {% unless forloop.last %} <span>&#124;</span>{% endunless %}
    
  11. This last part is what is output when there is no defined link list for the loaded page/collection. You can delete this line if you want to display nothing or edit it as desired.

    <p>This is the output if there is no matching linklist for {{ collection.title }}. Modify or delete this line as desired.</p>     
    

That’s it. The code should load wherever your theme template has a subnav area and automatically populate it based on the loaded page. You can now manage each sub-menu using the Link List/Navigation screen in the Shopify Admin. If you decide you want to remove a sub-menu for a defined page/collection, just remove its links in its matched Link List. The only time you need to go into the template code again is to define new sub-menus for new pages or collections.

Enjoy!