> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.qikify.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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**. ### 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. ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_1qjdyqy.png) || In some cases, the app can't find the main menu to replace. Please try other manual options: [Manual - Replace menu from Shopify](#3-2-manual-replace-menu-from-shopify) and [Manual - Replace menu by CSS selector](#3-3-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. ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_wirxcs.png) 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. ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_13pkst2.png) || You may want to check out the [List of compatible themes](/en/article/list-shopify-themes-integration-1o66flr/) 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](#3-3-manual-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: ${frame}[How to find CSS selector for Smart Menu on Shopify store](https://www.youtube.com/embed/tjRsYWMVhlQ?si=ygf5OSyC7JZhcJZd) ###### 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. ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_1d578s8.png) ###### 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. ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_16xxwzo.png) ###### 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 ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_u2jn2l.png) * Right-click on any element in the menu to inspect ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_16b0kh.png) * 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. ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_sn7yl3.png) * Right-click on that element in the development tool > Copy > Copy selector ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_1g7i3sq.png) 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. ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_1ur3ioo.png) Save and Smart Menu will replace your desktop menu on the storefront. ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_1viogwf.png) ###### 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) ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_goj8iu.png) * Click on the mobile menu button to **open the mobile menu** ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_1ahpvzc.png) * After the mobile menu is opened, please **detect the mobile menu to replace** ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_q1awlm.png) * 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. ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_uov8yv.png) * Right-click on that element in the development tool > Copy > Copy selector ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_9cj9h9.png) 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. ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_17s1ytg.png) | 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.