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:


            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.

            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:


            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:

            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.
            Updated: 18 Apr 2019 10:17 PM
            Helpful?  
            Help us to make this article better
            0 1