Integrating Navigation into Your Theme​

Merchants possess the ability to craft menus for navigation within their store, which can be structured hierarchically to form dropdown menus.

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

Resources​

• linklists object

Implementation of Navigation​

To integrate navigation into your theme, follow these steps:

1. Create Navigation Menus: Navigate to Online Store > Navigation Menus in the SHOPLINE backend and generate your navigation menus.

2. Access Navigation Menus: Once your navigation menus are created, you can access them within your store using the linklists global object. SHOPLINE furnishes a menu_picker menu picker, allowing merchants to designate menus themselves. You can reference the menu by its assigned name.

{{ assign 'main_menu' section.settings.main_menu_link_list }}
...
{{#schema}}
{
  "settings": [
    {
      "type": "menu_picker",
      "id": "main_menu_link_list",
      "label": "Navigation Menu",
      "default": "Main Menu"
    }
  ]
}
{{/schema}}

3. Output Menu Links: For each menu link, output pertinent information such as title and URL. For instance, if you've established a menu navigation named main_menu_link_list and merchants can select the menu they desire to employ in the header section, the following code snippet illustrates how you might output the menu.

<ul class="menu">
  {{#for main_menu.links as |link|}}
    <li class="menu-link">
      <a href="{{ link.url }}">{{ link.title }}</a>
    </li>
  {{/for}}
</ul>

Implementation of Multi-level Navigation​

In certain scenarios, you may desire to output child links for the links. You can nest up to three levels of links, accessible via the links property object.

<ul class="menu">
  {{#for main_menu.links as |root_link|}}
    {{#if (size root_link.links) > 0}}
      <ul class="menu dropdown__secondary">
        {{#for root_link.links as |secondary_link|}}
          {{#if (size secondary_link.links) > 0}}
            <ul class="menu dropdown__child">
              {{#for secondary_link.links as |child_link|}}
                <li class="menu__link">
                  <a href="{{ child_link.url }}">{{ child_link.title }}</a>
                </li>
              {{/for}}
            </ul>
          {{else}}
            <li class="menu__link">
              <a href="{{ secondary_link.url }}">{{ secondary_link.title }}</a>
            </li>
          {{/if}}
        {{/for}}
      </ul>
    {{else}}
      <li class="menu__link">
        <a href="{{ root_link.url }}">{{ root_link.title }}</a>
      </li>
    {{/if}}
  {{/for}}
</ul>

Depending on the type of navigation you're constructing, include the navigation menu either in the header or footer section.