# Mobile Menu

Bonnita theme allows you to set up the menu on mobile and desktop separately.

To set up the mobile menu, please follow instructions below:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme Settings ->** **Multiple Layouts / Mobile Menu Layout.**
4. Choose **Custom Menu**. If you choose **Default**, the desktop menu is applied.

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2F1zRWwcxZcnCikKrr4zmW%2F116.jpg?alt=media\&token=52408954-1df4-4713-af85-85d747a18a4f)

## How to configure Mobile Menu?

Bonnita provides 3 Mobile menu tabs corresponding to 3 sections as shown below:

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FBKrMmLyqu1hd2SHvqctO%2Fimage.png?alt=media&#x26;token=e65bcd4c-8771-403b-875e-5437f81e2398" alt=""><figcaption></figcaption></figure>

Each section has different menu blocks and you can add the type of block you want.&#x20;

* Menu Item
* Link Item
* Menu List

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FxkG7yPXJt9vD8eULuncd%2Fimage.png?alt=media&#x26;token=9991c3c2-c43d-45aa-98ed-c0ac507bcca5" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Note: Please fill out **Heading** text box of Mobile Menu. **The heading must be different for each mobile menu section.**

After adding the menu item, please reload Theme Editor View to see the change. You can check the change on actual devices like mobile or tablet.
{% endhint %}

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FocEMAXuUZ5hIPjcGZfDS%2Fmenu-mobile-1.png?alt=media\&token=3ea63f23-f0c7-42c1-8f0e-f46024606f25)

## How to set up icon / image for Mobile Menu?

### Menu Level 1

You can set up icons or images for Menu Level 1:

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2Fu0ItSkqvVzzooR0cz0B6%2Fimage.png?alt=media&#x26;token=b33254b6-352f-43e1-9322-4a06fbfd8589" alt=""><figcaption></figcaption></figure>

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2Fx4kCeCXHHN4iL3ukt2Ww%2Fmenu-mobile-5.png?alt=media\&token=dda92564-4bf1-43ee-b19d-5ee0ebc8116f)

About icons, you can upload SVG format: enter the SVG code of the icon in the **SVG Icon** field:

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FDrxOJfq4znyRZpo2nBhI%2Fmenu-mobile-4.png?alt=media\&token=c377b60b-7e77-45d1-b85e-3e21db2a88fa)

About images, you can upload PNG or JPG format:

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FnTJq6vslxPOzwL0sRjqD%2Fmenu-mobile-6.png?alt=media\&token=4e0b9595-952f-4962-b5f3-d8df99f87ee7)

### Menu Level 2 & Menu Level 3 (List Layout)

About level 2, level 3 menu, you can set up images only:

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FphN2MPlsincO47Zo9Fcq%2Fimage.png?alt=media&#x26;token=20d223a4-bdcd-40bf-aaff-f304d2b2a840" alt=""><figcaption></figcaption></figure>

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FylEvaI2vJb9k6lplr95P%2Fmenu-mobile-8.png?alt=media\&token=6230428d-e30a-4502-b067-9c98cc595a5a)

{% hint style="info" %}
Upload image with the same name as the \[handle-of-menu]\[menu-level-2-name].\[IMG FORMAT]

To get the image URL, please upload the image in **Settings** **->** **Files**. Then copy the link. You can refer to [this link](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).

Naming convention: lower cap and use "-" to replace white space. For example: with the menu level 2 "Top Rated" and menu handle "menu-mobile-new-in", the image name will be menu-mobile-new-intop-rated.jpg or menu-mobile-new-intop-rated.png
{% endhint %}

### Menu Level 3 (Grid Layout)

Please turn on "**Show Images Below The Sub Menu Items?"** checkbox to show **Grid Layout** for Menu Level 3:

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FiBeGJ4MSL6OQLJbUdPVL%2Fimage.png?alt=media&#x26;token=b8df2185-0a70-4546-80ef-9a35bc748216" alt=""><figcaption></figcaption></figure>

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FFaERl8qkbmetp0006q8l%2Fmenu-mobile-10.png?alt=media\&token=ab855213-8208-458f-9f5d-eaa0894bbb43)

{% hint style="info" %}
Upload image with the same name as the \[handle-of-menu]\[menu-level-3-name].\[IMG FORMAT]

To get the image URL, please upload the image in **Settings** **->** **Files**. Then copy the link. You can refer to [this link](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).

Naming convention: lower cap and use "-" to replace white space. For example: with the menu level 3 "Shoulder Bags" and menu handle "menu-mobile-new-in", the image name will be menu-mobile-new-inshoulder-bags.jpg or menu-mobile-new-inshoulder-bags.png
{% endhint %}

## Instruction Video. Follow the same below instruction for BONNITA

{% embed url="<https://youtu.be/QeWgsaf7gwI>" %}