# Mobile Menu

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

![](/files/XRhPhYpTJdGm61C895Ga)

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.

![](/files/LX9nVbyGEPzMkw1lVrJf)

## How to configure Mobile Menu?

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

![](/files/8SMDLnB0kgh2gkyMGt5O)

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

* Menu Item
* Link Item
* Menu List

![](/files/VnOj6o04w8sFT5G5olFe)

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/halo-docs/header/mobile-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.