Add Mobile Menu app to your store

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.

    • Related Articles

    • How to show Smart Menu on your store

      After creating your menu in Smart Menu, you can choose a current menu on your store to be replaced with Smart Menu. There are 2 ways to do it: Auto - Replace Main menu, Manual - Replace menu from Shopify or Manual - Replace menu by CSS selector. ...

    • Add Sections in Mobile Menu app

      Mobile Menu app supports 12 types of section: Menu Use this section to add your Links list. Section settings: Section title (optional): Enter a title for the section. This title will be displayed in the menu. Disable title: If you don't want to show ...

    • Why is my Smart Menu not showing up or showing incorrectly?

      There are various reasons why Smart Menu is not showing up or showing incorrectly on a store. Please read these cases and check the following solutions. Loading time Our server is placed in the US, therefore, there might be a delay in loading time ...

    • Frequently Asked Questions for Smart Menu

      What is the difference among Free, Basic and Premium plans ? Please see the comparison table of three plans here. Can I downgrade to Free/Basic plan after upgrading? Yes you can. To cancel paid plans, please go to "Profile" page > click on "Cancel ...

    • FAQs for Mobile Menu

      Is the Free plan really free? Yes, it is 100% free and forever free to use. We won't even ask for a credit card. By default, when you install Mobile Menu, you will be in Free plan. You only get charged once you upgrade to Premium plan. What is the ...