The Power of Link Lists

The Power of Link Lists

One of the most underused features in Shopify are "link lists". As its name suggests, a link list is a simple collection of links. The link items can be created to point to a page, collection, or product within Shopify, or to a URL outside of the store's domain.

It's possible to use a link list for a variety of reasons. In this tutorial we'll examine a common theme-use case: nested navigation using an unordered list. By using link lists and Liquid, we'll have full control over the menu from within the admin, giving flexibility to the merchant running the store.

You might also like: How to Use Liquid's "case/when" Control Tags in Shopify Themes

No Native Nesting

Unlike other platforms, Shopify doesn't have the option of having one "super menu" which we can nest our sub-menu items in. However, by following a simple naming convention, it's possible to generate multi-level menu structures.

Whilst it's common to include the navigation in a layout file, the default one being theme.liquid you can test out this concept in any template.

Creating Menus

We'll begin by creating a new menu, our parent menu, by heading to the Navigation tab in the Shopify admin, which resides under the Online Store link in the sidebar.

All new stores have a predefined default menu called "Main Menu". To add items to the list, simply click the "add another link" button and give your new item a "link name" and a destination. The select drop down will allow you to easily link to internal sections such as a particular product or collection. Alternatively, you can enter your own URL (either internal or external) by choosing "web address" from the options.

Once we have this in place we can start to consider the Liquid code we will need to output this in our theme.

Outputting the Menu

In order to output the menu in a theme file we'll need to know the "handle" of the menu. As discussed in previous chapters, handles are unique identifiers within Shopify for products, collections, link lists, and pages.

Let's begin by outputting all the items from the "main menu" link list. In order to do this we can use a simple for loop we've used many times before to output the link list items in turn:

<ul>
{% for link in linklists.main-menu.links %}
<li><a href= "{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>

This Liquid syntax isn't new to us, however it's worth examining the opening Liquid section:

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

Once again we are using the variable link to hold the data relating to each item in the link list, as we loop over all the items. In order to access the data, we need to access all the links in the link list with a handle of main-menu. If our menu had a handle of uk-brands the syntax would be refactored as:

{% for link in linklists.uk-brands.links %}

Each link item has properties including:

  • url
  • title

In our example above, {{ link.url }} will output the url we entered or generated in the admin and {{ link.title }} will output the text we attributed to the link.

You might also like: Creating Useful CSS Hooks in Liquid

Multi-level Navigation

Now that we have the basic Liquid structure in place for a single level menu, we need to consider how to create a sub-menu for our top level items. Firstly, we need to head back to the Shopify admin and create our first sub-menu.

The way we are able to relate independent menus together is by the use of the link list handles. It might not be 100% clear initially but every link in a link list, in addition to the menu itself, has a unique handle that we have access to in Liquid.

Let's have a look at an example. If our main-menu has three links as follows:

  • T-Shirts
  • Books
  • Other Stuff

Each of these three items would have their own unique handle attached to them. These are automatically created but can be amended in the Shopify admin. Here's what each of our link items handles will be:

  • T-Shirts → t-shirts
  • Books → books
  • Other Stuff → other-stuff

In order to relate a sub-menu to the books handle, we simply use the same handle for our sub-menu's link list.

Here's an example of how we can use these related handles to output a sub menu:

<ul>
{% for link in linklists.main-menu.links %}
<li><a href= "{{ link.url }}">{{ link.title }}</a>
{% if linklists[link.handle].links.size > 0 %}
<ul>
{% for sublink in linklists.[link.handle].links %}
<li><a href= "{{ sublink.url }}">{{ sublink.title }}</a></li>
{% endfor %}
</ul> {% endif %}
</li>
{% endfor %}
</ul>

You'll notice that we are now introducing an if statement in our refactored example directly after we output the first level of our mail menu:

{% if linklists[link.handle].links.size > 0 %}

This if statement checks to see if a link list with the same handle as the current link item in our loop exists. If it does exit and has more than one item in it, the template moves forward and loops over all the items in the sub menu.

It's worth having a quick look at the syntax used here as we haven't come across it before. You'll notice the use of square brackets [] around [link.handle]. This syntax allows us to pass in data from our initial for loop and for Liquid to treat it as a property of the linklists object. Let's use an example to solidify this concept.

If the current link items handle is t-shirts we would reference it as follows:

link.handle

As such the following statement:

linklists[link.handle]

is the same as:

linklists.t-shirts

The brackets denote we are passing in a variable. We'll see this again later on, when we examine some more advanced Liquid constructs.

Final touches

I'd like to quickly mention one extra link property that will be useful - link.active. This is a boolean property (true/false) that allows you to easily tell if the current page is the same as a link in a link list. Here's the syntax:

{% if link.active %} class="active"{% endif %}

In this example, we'll add a CSS class of active if the current page URL is the same as the list item. Here's the full code example for completeness:

<ul>
{% for link in linklists.main-menu.links %}
<li><a href= "{{ link.url }}" {% if link.active %} class="active"{% endif %}>{{ link.title }}</a>
{% if linklists[link.handle].links.size > 0 %}
<ul>
{% for sublink in linklists.[link.handle].links %}
<li><a href= "{{ sublink.url }}" {% if link.active %} class="active"{% endif %}>{{ sublink.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>

Summary

Link lists are a very powerful element of the Shopify platform. Having the ability to create an array of list items that can be changed in the admin gives you lots of flexibility. I've seen theme developers use them far beyond menu structures. However, knowing how to create nested navigation that can then be styled with CSS is a great tool to have at your disposable. Here's what we looked at:

  • How to create a link list in the Shopify admin
  • How theme developers need to know the role that the link lists handle plays when outputting in a template
  • How each list item also has its own handle that can be used to relate link lists together
  • How the use of [] in Liquid allows us to pass in a variable and for it to act as a property on a Liquid object

Looking to take your Shopify and Liquid skills to the next level? Make sure to check out our other Shopify Tutorials.

You might also like: 4 Advanced Shopify Theming Techniques to Add to Your Workflow

Photo of Keir Whitaker

About the Author

Keir is based in the UK and works on the Partner Growth Team at Shopify. You'll often find him at conferences and running workshops on Shopify theme building. You can subscribe to his newsletter, read his latest articles on Medium, listen to his podcast, and follow him on Twitter.

Grow your business with the Shopify Partner Program

Learn more