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: