2.7 Navigation Links

Navigation Links

An Overview of Navigation Links

By default storefront will create navigation menus based on your pages.  You have the option to allow storefront to automatically create the navigation links for you or to override the links it creates with your own navigation structure.

Accessing the Navigation Links

3cabb824-da33-4b26-a260-f04764eba397_3a937157

To access the navigation links edit pages, select the Catalog menu item and then select either “Nav – Header Links” to manage the header links or “Nav – Footer Links” to manage the footer links.

Managing Navigation Links

Once you’ve selected either of the Navigation Links edit menus you’ll be displayed with an edit page similar to the below.

83490365-857a-4748-bdfb-65838896fe96_90c9577f

From here you can select the default option “Use Root Pages” or change that by selecting “Use My Links” and clicking “Save Settings” as shown below.

027d529a-a018-4234-a282-1357fe56b782_95660669

Adding Custom Navigation Links

7d31d034-c8c0-4684-8f8c-cd188797b31f_fad0bc72

From the “Edit Page” You’ll enter the name to display for the link and the url to use.  The URL’s can be full urls like: https://www.storefront.net/my-page or relative paths like /my-page.  It’s recommended to use relative paths when possible and full urls when linking to an external or auxillary site.   Once you’ve entered the Name and URL click the “Add Link” button and the list of pages will update as shown below.

afc361a5-7db7-487b-ad36-68febe50c1e9_bc715c8c

You can continue to add navigation items in a similar manner.  

Editing Navigation Links

If you wish to edit a particular navigation menu link, simply click on the “Edit” button next to the link.

Deleting Navigation Links

If you wish to delete a navigation link, simply click on the red button with the trash can icon.

Ordering Navigation Links

04d93f57-eb6f-4f03-b623-84cd3bad71ed_97ccb01d

When you have multiple navigation links on your store you can order the links by clicking on the “+” button and dragging the item to a new location as shown below:

b5fade5a-4767-460c-81cf-b32dd40950c5_68cb5d04

Changes to the navigation structure are automatically saved once you make the change.

in 2. Catalog Management