How to Use a Linklist in a Shopify Template File

In a Shopify theme, you can let the merchant choose a menu in the theme editor and then loop through its links in Liquid with the linklists object. You need two pieces: a link_list setting in the section’s schema and a for loop in the section’s markup.

Both go in the same section file (a file in your theme’s sections folder), because section.settings is only available inside that section. In Online Store 2.0 themes, sections are also the building blocks of JSON templates, as shown in converting an old theme to Shopify 2.0.

Add the menu setting to the schema

Put this object inside the settings array of the section’s schema tag.

   {
      "type": "link_list",
      "id": "blog_menu",
      "label": "Menu",
      "default": "main-menu"
    }

• link_list shows a menu picker for this section in the theme editor.
• id is the name you use in Liquid: section.settings.blog_menu.
• label is the text shown above the picker.
• default preselects the menu with the handle main-menu, the store’s default main menu.

Loop through the menu links with Shopify linklists in Liquid

<ul class="blog-nav-list">
   {% for link in linklists[section.settings.blog_menu].links %}
       <li><a href= "{{ link.url }}">{{ link.title }}</a></li>
   {% endfor %}
</ul>

linklists holds every menu in the store, and linklists[section.settings.blog_menu] picks the one selected in the setting. The loop then prints each link’s link.url and link.title as a list item. Rename the blog-nav-list class to match your CSS. If the list scrolls sideways on small screens, you can add a class on horizontal scroll with jQuery to show a shadow on the side that still has hidden links.

If you change the setting’s id, update it in the loop too. The loop only outputs top-level links; if the menu has nested items, each link has its own link.links that you can loop through the same way.

If you need custom menus and sections built into your theme, see my Shopify development services.

Related articles

• adding infinite scroll to collection pages: another Liquid and JavaScript edit to a Shopify theme