How to show Smart Menu on your storefront
After creating your menu in Smart Menu, you can choose a current menu on your store to be replaced by Smart Menu.
There are 3 ways to do it: Auto - Replace Main menu, Manual - Replace menu from Shopify, or Manual - Replace menu by CSS selector.
By default, the option "Auto - Replace Main menu" is selected.
With this option, the app will automatically find the main menu in your theme to replace.
In some cases, the app can't find the main menu to replace. Please try other manual options: Manual - Replace menu from Shopify and Manual - Replace menu by CSS selector
With this option, you need to manually select the menu you added in the theme.
So, our app can find and replace it.
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.
If you do not enable the app on the live theme, the app can't get the data from your Shopify store and it will show "List is empty".
Please go to the live theme > App embeds and enable our app.
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, please use Replace menu by CSS selector method instead or contact us to help you.
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:
After choosing this method, scroll down and you'll find an Advanced section in Step 2 for further styling customization.
If you enable Smart Menu, the app's script may override the selector of your theme's menu.
Hence, you should disable Smart Menu first.
Go to your storefront to find the theme's menu that you want to hide
Right-click on any element in the menu to inspect
The developer tool will appear. Here you need to find the correct HTML element of your theme's menu.
When you hover over HTML elements in the development tool, the corresponding element will be highlighted with the blue color on the storefront.
Right-click on that element in the development tool > Copy > Copy selector
You've successfully copied the CSS selector of your desktop menu.
Now, please go back to Smart Menu settings → paste it to CSS Selector of your menu field.
Save and Smart Menu will replace your desktop menu on the storefront.
Go to the storefront
Press Ctrl + Shift + I (or right click on anywhere → Inspect)
The developer tool will show up → press Ctrl + Shift + M to change to the mobile view (or click on the button in the screenshot below)
Click on the mobile menu button to open the mobile menu
After the mobile menu is opened, please detect the mobile menu to replace
Right-click on any element in the menu to inspect
When you hover over HTML elements in the development tool, the corresponding element will be highlighted with the blue color on the storefront.
Right-click on that element in the development tool > Copy > Copy selector
You've successfully copied the CSS selector of your mobile menu.
Now, please go back to Smart Menu settings → paste it to CSS Selector of mobile menu field.
If you are not familiar with the code and it is too complicated with you, please contact us via the live chat and we can assist you find the menu selectors.
There are 3 ways to do it: Auto - Replace Main menu, Manual - Replace menu from Shopify, or Manual - Replace menu by CSS selector.
1. Auto - Replace Main menu
By default, the option "Auto - Replace Main menu" is selected.
With this option, the app will automatically find the main menu in your theme to replace.
In some cases, the app can't find the main menu to replace. Please try other manual options: Manual - Replace menu from Shopify and Manual - Replace menu by CSS selector
2. Manual - Replace menu from Shopify
With this option, you need to manually select the menu you added in the theme.
So, our app can find and replace it.
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.
If you do not enable the app on the live theme, the app can't get the data from your Shopify store and it will show "List is empty".
Please go to the live theme > App embeds and enable our app.
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, please use Replace menu by CSS selector method instead or contact us to help you.
3. 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:
3.1. Switch to CSS selector - advanced option
After choosing this method, scroll down and you'll find an Advanced section in Step 2 for further styling customization.
3.2. Disable Smart Menu
If you enable Smart Menu, the app's script may override the selector of your theme's menu.
Hence, you should disable Smart Menu first.
3.3. Find CSS selector of your theme's desktop menu
Go to your storefront to find the theme's menu that you want to hide
Right-click on any element in the menu to inspect
The developer tool will appear. Here you need to find the correct HTML element of your theme's menu.
When you hover over HTML elements in the development tool, the corresponding element will be highlighted with the blue color on the storefront.
Right-click on that element in the development tool > Copy > Copy selector
You've successfully copied the CSS selector of your desktop menu.
Now, please go back to Smart Menu settings → paste it to CSS Selector of your menu field.
Save and Smart Menu will replace your desktop menu on the storefront.
3.4. Find CSS selector of your theme's mobile menu
Go to the storefront
Press Ctrl + Shift + I (or right click on anywhere → Inspect)
The developer tool will show up → press Ctrl + Shift + M to change to the mobile view (or click on the button in the screenshot below)
Click on the mobile menu button to open the mobile menu
After the mobile menu is opened, please detect the mobile menu to replace
Right-click on any element in the menu to inspect
When you hover over HTML elements in the development tool, the corresponding element will be highlighted with the blue color on the storefront.
Right-click on that element in the development tool > Copy > Copy selector
You've successfully copied the CSS selector of your mobile menu.
Now, please go back to Smart Menu settings → paste it to CSS Selector of mobile menu field.
If you are not familiar with the code and it is too complicated with you, please contact us via the live chat and we can assist you find the menu selectors.
Updated on: 26/02/2025
Thank you!