# Mobile Menu Ella theme allows you to set up the menu on mobile and desktop separately. {% embed url="" %} Intro Video {% endembed %} {% embed url="" %} 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 -> Menu Mobile Layout.** 4. Choose **Layout Custom**. If you choose **Layout** **Default**, the desktop menu is applied.
## 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. * 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="" %}