Your Treez Ecommerce website comes with standardized navigation menus for both desktop and mobile:
Desktop menu = Main Navigation module
Mobile menu = Side Navigation module
These menus are configured separately to give you more freedom in how you optimize your menus for each device type (mobile vs. desktop.) It's super simple to update your menus as you edit and build out your site.
The processes to update each menu are essentially the same, except targeting a different module in your Treez Ecommerce CMS (Prismic): Main Navigation for mobile, and Side Navigation for mobile. is similar to the main nav menu for desktop, but targeting the Side Navigation module instead.
Let's see how to add a new link to each menu. We'll use adding a link to the Promotions page (default URL: /promotions) as an example.
Add a Link to Your Desktop Navigation Menu
In your Treez Ecommerce content management system (CMS), Prismic, navigate to Main space → Work tab, then find and open the Main Navigation module. (You can filter by Type → Navigation or search in the upper right corner.)
In the Main Navigation module editor, scroll down to the bottom of the page until you find the "Add item in "Links"" button.
Click the "Add item in "Links"" button to create a new blank menu item.
In the new item, fill out the Label field with the text you want to display in your desktop nav menu (e.g. Current Promotions)
Then, fill out one of the link fields depending on what kind of page you're linking to:
To link to a page within your Treez Ecommerce site: Fill out the link field with only the portion of the URL that contains the page's unique Navigation UID with a preceding backslash (e.g. /promotions). You'll find the UID at the top of each page editor in Prismic.
To link to a page outside of your Treez Ecommerce site: Within the external_link field, click the Choose link type dropdown menu and select Link to web page. Then fill out the URL field with the full URL of the web page (e.g. https://treez.io/) and click Update.
Once you've filled out the correct link field and the label, click Save and then Publish in the upper right corner.
Voila! Your changes have been published.
Refresh your site on desktop to see where the page appears in your updated nav menu.
Example Desktop Menu — Before
Example Desktop Menu — After
Add a Link to Your Mobile Navigation Menu
In your Treez Ecommerce content management system (CMS), Prismic, navigate to Main space → Work tab, then find and open the Side Navigation module. (You can filter by Type → Side Navigation or search in the upper right corner.)
In the Side Navigation module editor, scroll down to the bottom of the page until you find the "Add item in "Links"" button.
Click the "Add item in "Links"" button to create a new blank menu item.
To link to a page within your Treez Ecommerce site: In the new item, fill out the Label field with the text you want to display in your mobile nav menu (e.g. Current Promotions) and the link field with only the portion of the URL that contains the page's unique Navigation UID with a preceding backslash (e.g. /promotions)
To link to a page outside of your Treez Ecommerce site: Within the external_link field, click the Choose link type dropdown menu and select Link to web page. Then fill out the URL field with the full URL of the web page (e.g. https://treez.io/) and click Update.
Once you've filled out the correct link field and the label, click Save and then Publish in the upper right corner.
Voila! Your changes have been published.
Refresh your site on a mobile device to see where the page appears in your updated nav menu.
Click the icon with three horizontal lines in the upper right corner (commonly known as a hamburger menu) to expand the side nav menu
Example Mobile Menu — Before
Example Mobile Menu — After
