# 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="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F5FzhOV4WNZXt8bRB8HIh%2FHero%20Banner.png?alt=media&#x26;token=c54037d5-5c43-46de-91a7-05a459cab468" 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="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FioUgVtMawE5JUJct3rwd%2FHighlighting%20Collections.png?alt=media&#x26;token=3e23ed6b-6225-4fce-b781-0db9ea20e7d2" alt=""><figcaption></figcaption></figure>