# Mobile Menu

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

{% embed url="<https://www.youtube.com/embed/FCbhErO-M4M>" %}
Intro Video
{% endembed %}

{% embed url="<https://www.youtube.com/embed/8qgiB7ev6y8>" %}
Instruction Video
{% endembed %}

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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Faf75J2LtK9FOhfw3sCUj%2F116.jpg?alt=media\&token=52408954-1df4-4713-af85-85d747a18a4f)

## How to configure Mobile Menu?

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

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FDDaQb28f03STTcathWY1%2F117.jpg?alt=media\&token=9a16ddce-a724-4717-bb76-4b486d896ce0)

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

* Menu Item
* Link Item
* Menu List

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F4nEHumE4R8tKsjlAAGFq%2F118.jpg?alt=media\&token=8e35c61b-d14b-4709-bfb3-cc65d4dbaf2e)

{% 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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FOejxnYiqaScFIxQukzOm%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:

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FpTuToUP7tVEbqydI59X0%2Fmenu-mobile-2.png?alt=media\&token=e59a0c33-749c-4a42-bc15-79e3c5584416)

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FZnfCW56GaAd6Pp56yqB7%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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FBBfp1JfgBw7i1HGCGKCf%2Fmenu-mobile-4.png?alt=media\&token=c377b60b-7e77-45d1-b85e-3e21db2a88fa)

About images, you can upload PNG or JPG format:

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FaXmMMOCNVz9LMMF7sYj9%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:

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FTQCJvtX5yk1rJzaFXTII%2Fmenu-mobile-7.png?alt=media\&token=951ad689-5485-4bf0-8422-5f92b9917856)

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FkDKJmRfIhCp4Os5gcxfO%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:

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FV6I4aoKPdQWK3uheKnfo%2Fmenu-mobile-9.png?alt=media\&token=b40a2dc1-979d-4b14-81cc-2f85c60531fa)

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FUa1tmpPlwj0KC5ZTLnXu%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 ELLA

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