> 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/menu.md).

# Menu

### **Overview**

In this section you can choose the collections that will be displayed in the **Menu Tab** of your Shoppy app. On the right you can see a preview of how they will be displayed in the app.  

You can add a new collection by clicking the **⊕ *****Add Collection*** button.   

You can drag and drop collections with the icon on the right to change their order and to organize their order. If you do not want a collection to appear in the list, it can be deleted by going  ***Edit -> Remove***.

See the tutorial below:

{% embed url="<https://cdn.mburger.cloud/336380/categorie-nuove.mp4?data=eyJtZWRpYV9pZCI6MzM2MzgwLCJieXRlcyI6NDgxNTQ3NywicHJvamVjdF9pZCI6MjAzLCJoYXNfaW1naXgiOjB9>" %}

### Multiple Menu <a href="#sub-catalogue" id="sub-catalogue"></a>

You can now create up to five separate menus (e.g., Men, Women, Kids), visible in the tab bar. This allows users to browse product categories with ease and speed. Create these different sections by clicking the **⊕&#x20;*****Add Menu*** button. You can then add collections underneath each Catalogue to differentiate your product categories.&#x20;

{% embed url="<https://cdn.mburger.cloud/347427/Catalgouesubmenu_-2023-07-18-at-18.00.38.mp4?data=eyJtZWRpYV9pZCI6MzQ3NDI3LCJieXRlcyI6MTc3MDM1MCwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

### Hero Banner

You can now add a **Hero Banner** to any menu to visually highlight content, promotions, or categories at the top of the screen.

To enable it:

1. Go to the menu where you want to add a banner.
2. Click **Edit**.
3. Enable the **Hero Banner** option.
4. Upload your banner image.
5. Choose the **display format** that best fits your layout (e.g., full width or aspect ratio).

Hero banners are a powerful way to make your app more engaging and aligned with your brand identity.

<figure><img src="/files/nxlFnV001taUUOhXNR2S" alt=""><figcaption></figcaption></figure>

### Collections customizations <a href="#catalogue-customizations" id="catalogue-customizations"></a>

Click on **Actions -> Customize Widget** to customize the collections in your app's menu:

* **Use Another Image**: Upload a custom image to replace the default one from Shopify.
* **Aspect Ratio**: Choose between **3:2**, **1:1**, or **16:9** aspect ratios for collection images.

### Highlighting Collections

To emphasize key collections, you now have three options:

1. **Pin to Top:** Fixes the collection at the top of the list and displays it with **bold text** and **larger font size**.
2. **Title Color Customization:** Change the color of the collection title to make it stand out.
3. **Add a Badge:** Add a custom badge next to the collection name (e.g., *NEW*, *SALE*, *PROMO*) to highlight special categories.

<figure><img src="/files/mIVRI1pQcxUCah0uZtjK" alt=""><figcaption></figcaption></figure>

### **Brand List Page**

In addition to collections, you can now add a dedicated **Brand List** page to any menu section in your app. This page displays all the vendors from your Shopify store in alphabetical order, allowing your customers to browse products by brand directly from the menu.

To add the Brand List page to a menu section:

* Open the menu you want to edit, or create a new one.
* Click **"Add Section"** and select **Brand List** from the available options.
* Enter a title for the section and choose your preferred icon, or upload a custom one.
* Click **'Save'** to apply your changes.

Once the Brand List page is live in your app, you can customize how vendors are displayed by navigating to the **Layout** section in the App Builder and selecting your preferred display mode.


---

# 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/menu.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.