Multi Level Link List Menus in Shopify Themes

Shopify makes creating multi-level and nested navigation easy.

But what if you want to do something a little different?

Shopify’s theming engine is not good at state management.  There isn’t a lot of bells and whistles that allow you to know where you are in a theme or what your current view is.  Specifically how sort and filter functionalities work as URL parameters.

Take this url as an example: https://gear.bethesda.net/collections/apparel/category-:-hoodies .

I can use this bit of liquid code to know what collection i’m currently viewing.  {{ collection.handle }} and if i’m currently in a collection it will return the collection handle.  In this case it would be ‘apparel’.

But let us say I wanted to know what my current filter was.  How would I go do that? {{ request.path | split: ‘/’ }} is a good approach.  It is the only .liquid object that has access to the current URL.  However it doesn’t capture the filter at the end of the URL.  Dead end right?

Here is how to do a decoupled multilevel link list menu while maintaining the .active state for links in that menu.

{% assign request_path = request.path | split: '/' %}
{% assign request_path_size = request_path | size %}

{% for link in linklists.main-navigation.links %}

  {% for child_link in link.links %}
    {% if child_link.handle == collection.handle %}
      {% assign child_link_handle = child_link.handle %}
    {% endif %}
  {% endfor %}

  {% if template.name == 'collection' and
    link.links != blank and
    link.handle == collection.handle or
    child_link_handle == collection.handle
   %}

  {% for child_link in link.links %}
    {%- if child_link.handle != 'all' and request_path_size == 4 -%}
      <a class="{% if child_link.active %}active{% endif %}" href="{{ child_link.url }}" title="{{ child_link.title }}">
       {{ child_link.title }}
      </a>
    {%- else -%}
      {%- if child_link.handle == 'all' and request_path_size == 3 -%}
        {% assign class = 'active' %}
      {%- else -%}
        {% assign class = '' %}
      {%- endif -%}
      <a class="{{class}}" href="{{ child_link.url }}" title="{{ child_link.title }}">
        {{ child_link.title }}
      </a>
    {%- endif -%}
  {% endfor %}
  {% break %}
 {% endif %}
{% endfor %}