Code Snippet: Collection or Page Based Smart Sub-Navigation Menus

New Member
2 0 0

Just made this for my store (soon to launch animedailydeals.com) and figured it might be helpful to anyone else who wants to use category or page based subnavigations.

A full How To/Tutorial is posted at my blog at mikeprasad.com -> http://bit.ly/shopifynavmod

Let me know if you use it/improve it/what you think!

<!-- BEGIN COLLECTION-BASED SMART SUB-NAVIGATION -->
<!-- From mikeprasad.com, visit http://bit.ly/shopifynavmod 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 -->

0 Likes
Shopify Staff
Shopify Staff
5826 0 275

Thank you, Mike! Nice write-up!

http://www.mikeprasad.com/post/10137289772/shopify-mod-collection-or-page-based-smart

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
2 0 0

Thanks! I have a few other ones I'm going to post when I get the chance:

  • Smart Inventory Awareness with Item Request/Wait List for Sold Out Items
  • Simple Flex Image/Ad Box  for Sidebars (With Theme Settings-based Management)
  • Simple Flex Link Box for Sidebars (With Theme Settings-based Management)
  • Header Background Randomization (With Theme Settings-based Management)
  • Simple Slider/Rotating Linked Image Splash (With Theme Settings-based Management)

It's my first time using Shopify to set up 2 stores and it's been pretty fun to add in new functions. I needed all the ones above for the stores I've been working on, AnimeDaiyDeals.com and SugoiLife.MyShopify.com both launching soon!

0 Likes
Shopify Staff
Shopify Staff
5826 0 275

Theme Settings are so sweet. I have known the before and after of theme settings, because I have been on the Shopify scene for several years.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5841 0 121

No kidding! What did we do before theme settings? I don't remember now.... spoiled.

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Highlighted
Shopify Partner
49 0 1

Hi Mike -

What an awesome snippet you created! Thank you so much. I would like to use it in my site, but for some odd reason (and I have a feeling that it doesn't have anything to do with your code) it's not working out for me.

For all my attempts at using any navigation menu I created, I always get the message:

"This is the output if there is no matching linklist for . Modify or delete this line as desired" (as I left in from your code to check if it's working).

It seems that it can't find any linklist handle. Have you encountered anything like this? Can you shed some light? I would really love to use your code.

Thanks in advance!

Rony

0 Likes
Shopify Partner
49 0 1

Hi Mike-

Ignore my previous post - It's working!! Thanks a million for the cool code. I love it!

All the best,
Rony

0 Likes
New Member
5 0 0

Hi Mike, I am having a problem getting the sub-nav to only display when I am on a specific collection, for instance if I am on my homepage, I want no sub-nav to appear, If I am in the "Jewelry" collection, I want only the "Jewelry" sub-nav to appear and not the "Jewelry" & "Apparel" Sub-nav to appear. Hope this makes sense, I know I am missing something.. Here is my code.

 

<!-- 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 == 'Jewelry' %}
{% assign linklistHandle = 'Jewelry' %}

<!-- Repeat additional 2-line sets of elsif and assign code for each additional submenu -->

{% elsif collection.title == rings %}
{% assign linklistHandle = Jewelry %}

{% elsif collection.title == bracelets %}
{% assign linklistHandle = Jewelry %}

{% else %}
{% endif %}

<!-- Print the matching linklist as a sub-nav -->

{% if linklists.Jewelry.links.size > 0 %}
{% for link in linklists.Jewelry.links %}

<!-- This formats the output of each link, modify as needed -->
<a href="{{ collection.title }}"{% 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 -->

my website is www.tagsevolution.com

 

Thanks!

 

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5841 0 121

You have the same linklist assigned for all conditions:

 

{% assign linklistHandle = Jewelry %}

Those should be different and specific for those collections. Look at Mike's original code:

 

{% elsif collection.title == 'Title 2' %}
{% assign linklistHandle = 'link-list-handle-2' %}

{% elsif collection.title == 'Title 3' %}
{% assign linklistHandle = 'link-list-handle-3' %}

 

 

 

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
New Member
5 0 0

The Jewelry tab is a Main Navigation Collection, bracelets & rings would be sub-nav collections that I want to remain showing whether I am on the bracelets tab or the rings tab because they are subordinents to the Jewelry tab. 

I just added Apparel as another Main Navigation Collection with sub-navs for this as well. 

 

<!-- 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 == 'Jewelry' %}
{% assign linklistHandle = 'Jewelry' %}

<!-- Repeat additional 2-line sets of elsif and assign code for each additional submenu -->

{% elsif collection.title == rings %}
{% assign linklistHandle = Jewelry %}

{% elsif collection.title == bracelets %}
{% assign linklistHandle = Jewelry %}

{% else %}
{% endif %}

My question is say for instance I am on the homepage, www.tagsevolution.com, how do I get no sub-navs to appear and only have them appear when I click on a main navigation collection such as Jewelry or Apparel? If you look at Mike's website, ani.me, The sub-navs are hidden unless you click on one of his main navigation pages or collections and are only exposed as sub-navs once you click on the main collection. Hope that clears up my question and thank you for the help :)

 

0 Likes