Navigation

In this tutorial, you'll learn how to add navigation to your theme.

Resources

• The linklists object
• The linklist object
• The link object

Implementing navigation

To add navigation to your theme, you should reference a linklist object. Each linklist object represents a menu that's defined in the Online Store > Navigation section of the Shoplazza admin.

You can use the global linklists object to access all of the linklist objects in your store by their IDs. The default menu in the Shoplazza admin is the Main menu, which can be accessed with its id header.

For example:

{% for link in linklists['header'].links %}
  <!-- menu content -->
{% endfor %}

You can let merchants select their own menu using the link_list setting. You can reference the menu using the setting's id.

{% for link in linklists[section.settings.menu.id].links %}
  <!-- menu content -->
{% endfor %}

For each menu link, you should output information such as the title and URL. You might also want to output the link's child links. You can nest links up to three levels deep, and you can access them through the links attribute of the link object.

For example, if you've created a link_list type setting called menu, so that merchants can choose the menu they want to use in the header section, then the following code shows how you might output the menu.

📘

Note

The following example is only meant to illustrate how to iterate through a linklist and output multiple levels of links. It's not a complete navigation feature.

<ul>
  {% for link in linklists[section.settings.menu.id].links %}
    <li>
      <a href="{{ link.url }}">{{ link.title | escape }}</a>

      {% assign child_links = linklists[link.id].links %}
      {% if child_links %}
        <ul>
          {% for child_link in child_links %}
            <li>
              <a href="{{ child_link.url }}">{{ child_link.title | escape }}</a>

              {% assign grandchild_links = linklists[child_link.id].links %}
              {% if grandchild_links %}
                <ul>
                  {% for grandchild_link in grandchild_links %}
                    <li>
                      <a href="{{ grandchild_link.url }}">{{ grandchild_link.title | escape }}</a>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

Depending on the kind of navigation you're building, you should include your navigation code in your header or footer sections.