Navigation Menu (eCommerce App)

Navigation Menu (eCommerce App)

The Navigation Menu allows displaying the main navigation menu of the app.
It allows for links to direct the user toward the content of your app and/or actions.
When you create a new section in your app, a link opening this section is automatically created in your navigation menu.

To set up your Navigation menu:
1. Go to the menu Content & Design > Content > Sections
2. Click "Menu " from the right panel



1. Template Choice

1. Click Select under the template of your choice for your navigation menu in the right column of your back office
The template applied is shown in Green.
Choose between different navigation menus:
- Swipe, Little Swipe, Grid, and Slate are accessible from a button in the header of the application.
This button is displayed on content pages accessible from your navigation menu (unless you set your menu always be visible on the web app, or to be displayed upon launching depending on the options available).
- TabBar is displayed at the bottom of the screen on native apps, and as a banner on the web app under the header.
The TabBar is displayed on content pages accessible from your navigation menu.
 


2. Build your menu

1. Click "Edit" under your template or select a new template
2. Click the green "+ Add an element" button to add an element* to your menu.

*The elements

- Separator: design element to mark a separation
- Title break: allows you to insert a title
- Link: directing to a page, action, or external link
- Shortcut: a group of links
- Logo: element allowing you to title or display an image
- Copyright: element allowing you to display static information

Depending on the navigation menu you choose, the elements can be placed in different areas of the menu.

Swipe, Little Swipe, Grid, Slate
These navigation menus are divided into 3 areas that can hold elements.
- Header: used to give a title to the navigation page, display a user account, links, and shortcuts 
- Main navigation: the main area of the navigation menu. Contains separators or title breaks
- Footer: at the bottom of the page, it's used to display the user's account, the copyright, links, and shortcuts

TabBar
This navigation menu is split into 2 areas that can hold elements. 
- TabBar: add up to 5 links here
- "Others" menu: With more than 5 links in the menu, the last position of the TabBar becomes the "Others" menu.
It allows access to add links.


Note: you can manage the display of your collections in the menu directly from your collection page. Refer to this online help.



1. Go to the menu Content & Design > Content > Sections
2. Drag and drop your section to the "Main navigation" or to the menu below "Other sections"

The top menu Sections - Main navigation is the list of the sections which are displayed in the main navigation menu of your app.
The order of the sections is the same as for your menu:
- Order your sections from the navigation menu settings or from your sections list by drag and drop.
 
The bottom menu Other sections - Sections used outside of the navigation is the list of the rest of your sections, which do not appear in the main navigation menu of the app.



To create a link directly in the Main pages part of your navigation menu:
1. Go to the menu Content & Design > Content > Sections
2. Add a Click-to section, which behaves the same way as a link. 

To create a link in the Footer of your navigation menu:
1. Go to the menu Content & Design > Content > Sections
2. Click "Menu  " from the right panel
3. Click the green "+Add an element" 
4. Choose the "Link" element in the popup that will appear
Once the link is added to your menu, click on it to set it up :
- Title: this is the text that appears in your menu
- Link: this is the destination your link points to
- Feature this link: this option allows you to apply colors and a specific font to the link



5. Navigation menu settings

Manage the display options in each of the areas of your navigation menu.
1. Go to the menu Content & Design > Content > Sections
2. Click "Menu  " from the right panel
3. Click the tab "Settings "
4. Modify your settings (alignment, images, fonts, color, and others)
 

    • Related Articles

    • Section Design (eCommerce App)

      1. How to modify the design of your sections By default, your shop has a global style  applied to all your app's pages. For more info, please refer to this online help. You can modify the default design of each section to fit the image of your brand. ...

    • Customize the Icon of your Navigation Menu (eCommerce App)

      When setting your navigation menu, you can choose to display icons. Those icons can be displayed in your shortcuts, or in the main navigation depending on the template you chose. To set your navigation menu: 1. Click "Menu " from the right panel in ...

    • Design the Categories of your Sections (eCommerce App)

      Depending on the type of content you have on your app, you can add categories to your CMS content section or filter your external content when using an external source (Youtube, WordPress, etc.). Please refer to this online help for more ...

    • Navigation Menu

      The Navigation Menu allows displaying the main navigation menu of the app. It allows for links to direct the user toward the content of your app and/or actions. When you create a new section in your app, a link opening this section is automatically ...

    • Section Design

      By default, your application has a global style applied to all your app's pages. To modify colors, fonts, backgrounds, formats, etc... of each element of your application: 1. Go to the menu Design & Structure > Structure > Sections, which will show ...