# Mobile Menu Halo theme allows you to set up the menu on mobile and desktop separately. ![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FG2hiCbiZLyRkPhS70CD1%2Fmenu-mobile-1.gif?alt=media\&token=902c2cc4-a8bd-479f-817c-4e2a4616749f) 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://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2F9yJJ5PWyJ567tJO2odlT%2Fmenu-mobile-2.gif?alt=media\&token=c600dcf3-14e9-4eed-b6cb-1caf26ccae10) ## How to configure Mobile Menu? Halo provides 3 Mobile menu tabs corresponding to 3 sections as shown below: ![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FxjKOMVDRdJOIr7wkV6RP%2Fmenu-mobile-3.gif?alt=media\&token=fda24c3e-4f59-4824-8444-5bf866c6ef87) Each section has different menu blocks and you can add the type of block you want. * Menu Item * Link Item * Menu List ![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FzBKwGsbHp1hDLNE9gvez%2Fmenu-mobile-4.gif?alt=media\&token=66c0ed4d-9d2e-411e-8508-55d94f355845) {% 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://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FWWwVadUkg2Xj4DbOKeSi%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://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2Fsa9grFBlleL2yu4Tj4qV%2Fmenu-mobile-2.png?alt=media\&token=e59a0c33-749c-4a42-bc15-79e3c5584416) ![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FEk0b3UU67ZnuN6o8D9Sk%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://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2Fkzgxf0gHiRIcS1D8Ww1e%2Fmenu-mobile-4.png?alt=media\&token=c377b60b-7e77-45d1-b85e-3e21db2a88fa) About images, you can upload PNG or JPG format: ![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FmcOALOWJSWnkVEWQXsOS%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://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FvpdzibHcVvCKHa9molFe%2Fmenu-mobile-7.png?alt=media\&token=951ad689-5485-4bf0-8422-5f92b9917856) ![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FiYCGGmaroVJ1GBJlSjAL%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://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FpP4QaCTLnDjVVKaoTk6N%2Fmenu-mobile-9.png?alt=media\&token=b40a2dc1-979d-4b14-81cc-2f85c60531fa) ![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FoGN47UmKXtGY7TVflU5t%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 {% embed url="" %}