> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/header/mobile-menu.md).

# 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 -> Menu Mobile Layout.**
4. Choose **Layout Custom**. If you choose **Layout** **Default**, the desktop menu is applied.

<figure><img src="/files/8wOTdSNPxKfexWdgjmzL" alt=""><figcaption></figcaption></figure>

## How to configure Mobile Menu?

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

![](/files/O715koXBhfAoqmJN3L0N)

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

* Menu Item
* Link Item
* Menu List

![](/files/IwrWQ9WEtzTGUbNN2QO0)

{% 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 %}

![](/files/0pYhtrpg4HU97IK7TTuz)

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

### Menu Level 1

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

![](/files/OLrwVEZEidBsD4dUGIu7)

![](/files/usaVWsks8tNcBsGChF5j)

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

![](/files/C2NLM47kKH8rq5btPPCe)

About images, you can upload PNG or JPG format:

![](/files/8B18PSBtJZWlIhRfkd7y)

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

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

![](/files/ATR20nTB5hRh6Yenrvkb)

![](/files/Gd1wEJbWBiYaKb9gycue)

{% 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:

![](/files/YTU282FyQhnjlFwHvPm6)

![](/files/g8Grs0p2KlQxn9lKJdcD)

{% 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>" %}