Add Mobile Menu app to your store

After creating your menu in Mobile Menu app (not Smart Menu), you can go to Display settings tab to:

Replace theme menu: select a current menu on your store to be replaced with Mobile Menu
OR
Add an extra menu separately with floating button, not affect your current menu

1. Replace theme menu

Our app will show up in place of your original mobile menu. Some styles (eg. background color) will base on your theme's original menu.

There are 2 methods: Replace by select menu from list or Replace by CSS selector.

1.1. Select menu from list (recommended):

Click on the Select your mobile menu option, it will show all available menus taken from your Shopify navigation.

Choose the name of your current mobile menu (eg. Main menu).

Smart Menu can't replace a menu item in a menu, it can only replace the whole mobile menu, so you should select your Main menu.

In case you have selected your mobile menu but Smart Menu doesn't show up or shows incorrectly, you can:

Try the second method: Use CSS selector
Contact us to help you

1.2. Use CSS selector

You need to find the selector of your current mobile menu so our app can know where to replace.

Read instruction below to know how to find the right CSS selector:

Disable Mobile Menu app

Navigate to your store (abc.myshopify.com) → Press Ctrl + Shift + I (or right click on anywhere → Inspect)
The developer tool will show up > press Ctrl + Shift + M to open mobile view.
Your mobile menu will show up.

Click on mobile menu icon to open mobile menu → Right click on a menu item → Inspect
(make sure you're inspecting your original menu from Shopify navigation)

It will auto detect the HTML tags of your mobile menu

Find the closest <ul> tag above → Right click on it → Copy → Copy selector

You've successfully copied the CSS selector of your mobile menu.

Go back to Mobile Menu app → Display settings → paste it to CSS Selector of your mobile menu field.
Save it and Mobile Menu app will show up in place of your previous mobile menu.

In case you have pasted CSS selector of your mobile menu but Smart Menu doesn't show up or shows incorrectly, you can:

Try the first method: Select menu from list
Contact us to help you

2. Add an extra mobile menu with floating button

In case you want to keep your original mobile menu, use this option to add Mobile Menu app as a separate menu.

After choosing this method, scroll down in Display settings and you'll find options to customize Hamburger Button style and Menu Box style.

If there's any problem, please contact us for help.