How to show Smart Menu on your store

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.

First, please read the comparison table below to understand which way is the best for you.


Suitable for
Who wants to quickly apply theme's style
Who wants more controls of menu
Explanation

Replace each current menu item with Smart Menu, the style of menu bar & top menu (level 0) is based on theme.
(Technically: replace each <li> tag, keep the parent <ul> or <nav> the same as theme's menu).

Replace the whole menu, including menu bar, top menu (level 0) and all submenu items.
(Technically: replace the parent <ul> or <nav> tag with Smart Menu tag).
Advantage

✔ Easily replace menu
✔ Based on the style of your theme's top menu (font, submenu width, menu bar background, menu bar height)
✔ Keep some icons of your theme's original menu (social icons, account icon, cart icon... if available)


✔ Customize font
✔ Customize menu bar (including color, height, align, padding)
✔ Enable submenu full width

Disadvantage

✘ Cannot customize font (font is based on theme style)
✘ Cannot customize menu bar, including color, height, align or padding (menu bar is based on theme style)

✘ Need to find the right CSS selector (instruction below)
✘ Can override some icons on your original menu (such as social icons, account, cart icon...)
✘ Might need to restyle (because it won't base on theme's style)



1. Replace menu from Shopify

Go to Step 2: Add & Design tab > Add menu to store > choose "Manual - Replace menu from Shopify" option.



If it shows "List is empty" and you can't select menu, try turning off password on your store and reload app.
  • Select your main menu: select your desktop menu that you want to replace with Smart Menu
    (Smart Menu can't replace a menu item in a menu, it can only replace the whole menu, so you should select your Main menu)

  • Select mobile menu: select your mobile menu that you want to replace with Smart Menu
    If you want to only show Smart Menu on desktop and keep your original menu on mobile, leave the this field blank.

  • Menu orientation: select the orientation bases on your original menu

You may want to check out the List of compatible themes and notes for some themes.

In case you have selected your menu to replace, but Smart Menu doesn't show up or shows incorrectly, you can try one of these solutions:


2. Manual - Replace menu by CSS selector

If you want to have advanced options to customize your menu, you need to use this method to replace Smart Menu on desktop and mobile separately.

Before following this method, please make sure: you have disabled all menu-related app that can affect your current menu.

You can read the instruction below or watch tutorial video here:




2.1. Switch to CSS selector - advanced option 

Go to Step 2: Add & Design tab > Add menu to store > choose "Manual - Replace menu by CSS selector".



After choosing this method, scroll down and you'll find an Advanced section in Step 2  for further customization.


2.2. Disable Smart Menu

If enabled, Smart Menu script can override the selector of your original menu. Hence, remember to disable Smart Menu by turning off the "Enable app" button on the bottom right corner first. 


You can enable it back after finding the right CSS selector.

2.3. Find CSS selector of your theme's desktop menu:

  • Navigate to your store (abc.myshopify.com)
  • On desktop view, find the desktop menu you want to replace it with Smart Menu (make sure the existing menu is your original menu created in Shopify navigation)
Example: Original Main menu on header
  • Right click on that menu → Inspect
CSS inspect - Smart Menu

  • The developer tool will appear and auto detect the HTML tags of your selected menu
Element detect - Smart Menu


  • Find the closest <ul> tag above
ul element - Smart Menu ul element - Smart Menu

  • Right click on <ul> tag → Copy → Copy selector


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

  • Head back to Smart Menu settings → paste it to CSS Selector of your menu field.



  • Save it and Smart Menu will show up in the place of your selected menu.



In case you have inserted the right CSS selector, but Smart Menu doesn't show up or shows incorrectly, you can try one of these solutions:

2.4. Find CSS selector of your theme's mobile menu:

  • 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 created in 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.

  • Head back to Smart Menu settings → paste it to CSS Selector of your mobile menu field.


  • Save it and Smart Menu will show up in place of your previous mobile menu.



In case you have inserted the right CSS selector, but Smart Menu doesn't show up or shows incorrectly, you can try one of these solutions:



    • Related Articles

    • 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 ...

    • How to uninstall Smart Menu completely?

      UPDATE (30.11.2023): With users installing our app after November 30, 2023, the app does not add any code or store any file in the theme anymore. Therefore, you don't need to delete anything after uninstalling the app. When installing, Smart Menu ...

    • 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 ...

    • My old menu is still showing up, how can I hide it?

      To achieve the best user experience, Shopify always loads your website first, and then apps, that's why your old navigation still appears. If you want to hide your old navigation, please follow these steps: Update - from Jan 2021: We provide a ...

    • Style & Advanced settings

      1. Style Step 2: Add & Design > Style All settings in this section apply globally to all menu items. Animation *Available in Premium plan only. There are 4 animations to appear submenu: fade in, shift up, flip in, zoom in. Note: select "none" if ...