Quantcast
Channel: Shopify Tutorials and Notes – Web Work Garage
Viewing all articles
Browse latest Browse all 12

Using linklists in Shopify to create and manage navigation menus

0
0

Making and managing navigation menus in Shopify is easy to do using the linklist functionality already built into the system. At various places in the interface and documentation, you might see this feature referred to as “Links” or “link list” and I’ll refer to it sometimes in this tutorial as a “menu” but it’s all based on using the linklist variable in Liquid (Shopify’s templating language/library).

When you are building and placing menus with the linklist functionality, there are basically 2 ways that you will deal with the link lists / menus:

  • In the Shopify admin panel, you’ll define your various linklists via an easy-to-use interface. In Shopify 1, you’ll find this interface by clicking Navigation from the top green menu in the admin panel. In Shopify 2, you’ll get it by choosing Links from the main menu on the left side of the admin panel.
  • Once you’ve set up your linklist(s) via that interface, you’ll place the menus wherever you want them on your site by writing some code (HTML and Liquid) into your theme.

Here are a couple of screenshots that show what the first part of this process looks like in Shopify 2 (the Beta version anyway). The first screen lists all the menus (or link lists) you have defined. In the screenshot below, I have 4 menus defined, but as of this writing, Shopify will always start you off with a main menu and a footer menu by default, so even if you haven’t added those, they’ll be there.

Shopify Linklist Choose Menu Screen

From that screen, you pick the menu (link list) you want to edit or select Add link list to start making a new one. The screen for editing an existing link list or adding a new one looks like this:

Shopify Linklist Menu Editing Screen

Shopify has done a good job of making this screen fairly self-explanatory, but here are a couple things to know that may or may not be obvious at first glance:

  • The top part of the screen where you create or edit each link list allows you to select a Name and a Handle for your link list. The Name gives you a title for the link list and the handle gives you a way to access this link list via the code (more on both of these later).
  • The bottom part of this screen is where you add in the various links that will comprise each link list. The Link Name will be the text that displays for a given link (menu item). The Links To… dropdown let’s you choose from different things such as a collection, a certain page on your Shopify site, your Shopify blog, or several other things, including a link to some web page that isn’t part of your site at all.

Let’s say you use all this great functionality to build 4 of 5 menus, or even 1 menu — it really doesn’t matter how many you make, just that you make what you need. The next question is how do you get this new menu to show up on your website?

This is where the code side of things comes in. You’ll need to go into your theme editing environment (depending on your setup that might be the Template Editor within Shopify or some kind of external code editor) and write a Liquid for loop to display each item of a particular menu as an unordered list on your website. The code might look something like this:

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

Earlier I mentioned that whenever you create a link list, you’ll set a Handle for it on one of the screens we talked about above. In this case, we’re writing code to display the Main Menu on the page, which has a handle of main-menu. If we had made a custom link list called Featured Collections and given it a handle of featured-collections then we would call it with this code:

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

We also mentioned earlier that there was a place on the link list editing screen to give each link list a Name value. If you want to use that value to give your menu a little headline above it, you can do that with the following code:

<h2>{{ linklists.featured-collections.title }}</h2>
<ul>
{% for link in linklists.featured-collections.links %}
   <li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>

You can do a lot with Shopify’s linklists functionality to build whatever menus you want and to place them exactly where you want them within your website / Shopify store.


Viewing all articles
Browse latest Browse all 12

Latest Images

Trending Articles





Latest Images