Mobile Menu

PreviousLabel For Menu NextFooter Layout

Last updated 1 year ago

Mobile Menu

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

To set up the mobile menu, please follow instructions below:

From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme Settings -> Multiple Layouts -> Menu Mobile Layout.
Choose Layout Custom. If you choose Layout Default, the desktop menu is applied.

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

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

Menu Item
Link Item
Menu List

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.

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

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

About images, you can upload PNG or JPG format:

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

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.

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

Please turn on "Show Images Below The Sub Menu Items?" checkbox to show Grid Layout for Menu Level 3:

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.

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