Next we will look at how to manage your store's navigation. Every online store and indeed website, as already noted, needs a good navigation so that visitors can move around it quickly and easily.

Through the navigation, your store's visitors will be able to access the homepage, specific collections, products, the blog and other pages in your store. In the admin for your store, click on Navigation in the navigation panel. In this section you will manage your store's navigation. And this is done through what are called link lists.

Working with link lists

Hyperlinks, or links for short, are fundamental to the web. Clicking on a link moves you from the current page to a new page. Links have two essential elements: the name of the link and the address of the page that it links to. A link list is simply a list of these links.

Every store has two default link lists: "Main Menu" and "Footer". The "Main Menu" is the main navigation for your store and the "Footer" is generally a smaller navigation in the footer at the bottom of each page in your store. Notice the links listed in the "Main Menu" link list: Home, Catalog, Blog, About Us (see the screenshot above). They correspond directly with the main navigation in your store (see the screenshot on the next page).

Adding A New Link To A Link List

Let's start off by looking at how to add a new link to an existing link list. I'm going to add a link to one of the collections I created earlier in this chapter.

Starting off in the navigation section, click the Edit Link List button for the link list you want to add a new link to. This will show you the details and the links for this link list. For my example, I want to add a link to the main navigation so I clicked into "Main Menu".

You'll notice the link list has a name and a handle. For the two default link lists, "Main Menu" and "Footer" you can change the name but not the handle. I recommend you leave them as they are.

Below the link list details, you'll see the links included in this link list. Click on the Add another link button. This will add a new line for you to fill in the new link's details.

In the "Name of link" textbox, fill in the name that you want for the link. Note that this is exactly how it will appear on your storefront. I filled in "Trees" with a capital T so that it matches up with the rest of the navigation.

Next click on the dropdown menu. There are eight different types of links that you can put in: shop frontpage, collection, product, all products, page, blog, search page or a web address. Most of these are self explanatory. "All Products" will link to a page with a list of all the products in your store. "Search page" will link to the search page on your store. Web address will link to any specific web address that you like. I chose "Collection" as I want to link to a collection. This will reveal a dropdown list of collections to choose from.

For each different link type, this next step is a little different. Shop frontpage, all products and search page refer specifically to one page so there is no more information required. The others require further information so there is one or two more steps involved. For web address, you will need to type or paste in the exact address of the page you want to link to (for example: Svpply). For the rest you will have to choose a collection, product, page or blog from a dropdown. For a collection, a new dropdown menu has appeared with a list of all the collections. I chose "Trees (Automatic)" from the list.

If as in my example, the link is to a collection, I also have the option to show only products with particular tags from that collection. So if for example I tagged each of my tree posters with one of "Spring", "Summer", "Autumn" or "Winter" then using this tag option, I could link to the collection "Trees (Automatic)" but only show those that are tagged "Winter". Or I could just show those that are tagged both "Spring" and "Summer". To do this, I would click on the link Filter with tags and type in "Spring, Summer" in the textbox.

Click Save to save the link list with the new link. The link list will update to include the new link and a quick look at the storefront will show the link in the navigation.



A link to the collection "Trees" is now clearly available on the right-hand side of the store navigation.

The Other Types Of Links That You Can Use

As mentioned, there are eight different types of links that you include in your linklist. You can see some good examples in the "Main Menu" link list in the screenshot above.

It shows you how each link in the link list is defined:

• "Home" links to the shop frontpage.
• "Catalog" links to a web address "/collections/all" that shows all the products. This can also be done by simply selecting "All Products" in the dropdown menu.
• "Blog" links to the blog called "News".
• "About Us" links to the page called by the same name.
• "Trees" links to the collection "Trees (Automatic)" as I put in earlier.

Reordering The Links In A List

Now that my new link to the collection "Trees" is in place, I have noticed that it's at the end of the list, whereas I would like it after "Catalog".

To move a link, just drag it using the dotted rectangle to the left of the link name. Drop it where you would like it to appear in the list. Click the Save button when you are finished.

Editing An Existing Link

When you have a link list open, editing an existing link is very straightforward. You can change the LINK NAME to whatever you want it to be. Remember this is what will appear in your storefront.

Change the LINKS TO dropdown if you want to change the type of link. And if there is a third field, edit it as required. Click the Save button when you are finished editing the link list.

Deleting A Link

To delete a link, click on the trash can to the far right of the link. You will be asked to confirm that you want to remove the link. I deleted the "Trees" link as I don't actually want it linked in this way from the main navigation.

Adding A New Link List

You will need to add new link lists if for example you want to create dropdown menus in your navigation. To add a new link list, from the navigation section, click on Add link list on the left-hand side.

• In the textbox "Name", type in whatever you want to call this new link list. The handle will then be automatically completed.
• When you first create a new link list, it will have a single link. You will need to choose its name and what it links to.
• You can add more links in the same way that we saw earlier by clicking on Add another link.
• Click on the Save button when you are finished.