How to Make Nested Menus using LinkLists

From Shopify Wiki

First, back up your template. Or, for more fun, you could mess around in Vision before changing things online. Next, read up on Linklists in the wiki.

This is not a solution for Drop Down Menus! In the example below, Hats and Mittens are not clickable. This method creates a menu of links to collections in an ordered manner:

 Hats
  |_ Crazy Hats
  |_ Green Hats

 Mittens
  |_ Knit Mittens
  |_ Woven Mittens

Now for instructions. We'll use the Hats example.

1.) Open up your theme.liquid and go to the <div> for your navigation menu, and where you want your nested menu for Hats to be within that menu. Make sure you are pasting between the <div> and </div> tags.

Type in Hats. You'll probably want to make it a header: <h3>Hats</h3>

2.) Copy this code (it's from the linklists reference page in the wiki):

<ul>
{% for link in linklists.my-new-linklist.links %}
   <li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>

And paste it right under where you typed Hats. Change "my-new-linklist" to "hats". Save your theme.liquid.

3.) Go to your admin panel, and click Navigation. At the top, click "Add link list". Name the link list Hats and save it. (The name of the link list needs to match what you changed "my-new-linklist" to.)

Now you will have a new little box called Hats, and you can add links for your crazy and green hat collections.

If you want Mittens to be next on your menu you repeat steps 1-3, using "mittens" instead of "hats".