> For the complete documentation index, see [llms.txt](https://docs-en.shoppy.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-en.shoppy.is/shoppy-dashboard/app-builder/navigation.md).

# Navigation

Set the order of your app’s Navigation Menu and define how you make information available to your users. his section includes the ability to reposition Home Page, Catalog, Wishlist, News, Shopping Cart, Profile and the different Pages created. You can even choose from an array of icons which you prefer, and you also can upload your own custom icon!&#x20;

Being able to configure your app’s navigation allows you to further customize your app in what is navigation, **a crucial aspect of overall design and usability.**&#x20;

See the quick tutorial below to get a feel for how to set up your own navigation bar!

{% embed url="<https://cdn.mburger.cloud/356937/Screen-Recording-2024-09-25-at-17.12.14.mp4?data=eyJtZWRpYV9pZCI6MzU2OTM3LCJieXRlcyI6MTM3NTI1MCwicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

* To change the order of the icons on the Navigation Bar of your app, click on one of the icons and drag it up or down to reposition it. Click 'Save' when finished to record your changes.
* Click "Add Section" and scroll or use the search bar to find a section that you'd like to add. You  may enter the title and choose from a selection of icons to use, or **upload your own app icon.**
* Click the **star icon** next to a section to make it the **landing page** that users are first taken to when they open your app.&#x20;
* To remove a navigation item, click the three dots on the right side, then select 'Remove'

### Custom Icons

To select a custom icon, please make sure that it meets the following criteria:

{% hint style="warning" %}

* PNG or SVG format
* No greater than 500 KB&#x20;
* Has a **transparent** background
* \*Please note that these icons are meant to be graphic icon assets, not photos! Photos, or any other element added here will not be shown in the app if the background is not entirely transparent.
  {% endhint %}

### **Brand List Page**

You can add a dedicated **Brand List** page to your app's navigation bar. This page automatically displays all the vendors from your Shopify store in alphabetical order, giving your customers a quick and intuitive way to browse products by brand.

To add the Brand List page to your navigation:

* Click **"Add Section"** and scroll or use the search bar to find the **Brand List** page in the list.
* Select it and choose your preferred icon, or upload a custom one.
* Drag it to your preferred position in the navigation bar, then click **'Save'**.

Once added, you can also customize how the Brand List is displayed in your app by navigating to the **Layout** section, where you can choose between two display options.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs-en.shoppy.is/shoppy-dashboard/app-builder/navigation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
