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/33fPopularFrequently Asked Questions for Smart Menu - Mega Menu
Will the app slow down my store? No. We utilize optimized code along with Shopify’s latest technologies to keep your store running smoothly. The menu is loaded asynchronously, so it will not interfere with the loading of other page content. Is the app compatible with all Shopify themes? Yes. The app is compatible with all Shopify themes. For custom themes, the menu can be added using the CSS selector method. If you need help with this setup, our support team can assist you aPopularWhy is my Smart Menu not showing up or showing incorrectly?
There are various reasons why Smart Menu is not showing up or showing incorrectly in a store. Please read these cases and check the following solutions. Haven't selected the correct menu to replace Smart Menu works by replacing the whole theme's menu. Hence, if you use "Manual - Replace menu from Shopify" method, please make sure to select your main menu to be replaced in Step 2: Add & Design PleasPopularHow to display Smart Menu on preview theme?
In some cases, Smart Menu may not appear in unpublished themes when previewing (themes which have not been live yet), so you will need to enable App embeds in theme's settings. This article will help you to display Smart Menu in those unpublished themes. Step 1: In Shopify Admin, select Online Store > Themes > choose the unpublished theme you want to preview with Smart Menu app > Click on the “Customize” button ![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_PopularStyle & Advanced settings
1. Style All settings in this section apply to all menu items. Animation || Available in Premium plan only. There are 4 animations to appear submenu: Fade in Fhift up Flip in Zoom in. Trigger Select the trigger to open menu: Hover, Hover Intent, Click If you want to open menu when hover, recommend to select "Hover intent" option. Hover intent waits until the usPopularList Shopify themes integration
This is a list of the most popular Shopify themes and how Smart Menu works with them. || If your theme is not in the list, it does NOT mean Smart Menu is incompatible with it. Please contact us if you can add the menu to your theme. ✔ = fully compatible | Δ = work on some cases | ✘ = incompatible Theme Compatibility Menu type Note Debut ✔ Horizontal menu | Dawn | ✔PopularItem layout
Text link By default, the Item layout of all menu items is set as Text link (text only) when first created. Click "Edit" button (pencil icon) on the menu item to modify it. Title: enter a title for the menu item. This title will be displayed in the menu. Disable link: enable this option if you don't want to attach any link to this menu item. Link: select a link type or enter a weSome readersMy 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: Copy CSS selector of your old menu: Disable Smart Menu in your theme: Go to theme editor > App embeds Go to your storefront to find the theme's menu that you want to hide ![](https:Some readersArrange menu items in Masonry
Masonry grid is a Premium feature and is only available in Mega submenu and Tab submenu. Here is the difference when you enable the Masonry grid for the submenu. When Masonry grid is disabled, the position of menu items in the second row depends on the height of the first row, which can leave empty vertiFew readersSubmenu settings
There are 3 types of Submenu: Flyout submenu, Mega submenu, and Tabs submenu. Click the pencil button to edit a parent item and choose among the 3 types. Flyout menu settings When selecting Flyout Submenu type, your menu will be displayed as a normal drop-down menu. ![](https://storage.crisp.chFew readersColumn Width - Adjust width of menu items
The submenu item's width is divided into 12 in total. The Column Width option helps to adjust the number of columns which an item occupies in total of 12 columns. You can find the Column width option in the item editor on the left panel Or hover on that item in the preview panel, and click on ↔ button ![](httFew readersHow to add items vertically in mega menu?
Mega menu is a type of expandable menu which shows submenu items in horizontal order. There are 2 ways to adjust the position of menu items in vertical order: Set suitable Column Width: Set a number of columns which an item occupies in Column width, then when the total of columns in a row exceeds 12, the next item will be dropped to the second row. ![](https://storage.crisp.chat/users/helFew readersFix Menu not working in Horizon-Based Themes
Overview The app works by replacing the theme’s menu after it has been loaded. However, in Horizon-based Shopify themes, the menu is automatically re-rendered whenever there are changes in the DOM. As a result, the app’s menu can be removed and disappear from the storefront. Step 1: Add Menu Using CSS Selector Method To ensure compatibility, you need to use the Manual – Replace menu by CSS selector method. Use the following selectors for Horizon-based themes: **Desktop menu selectFew readersHow to change the color of a specific menu item?
The Title field of a menu item supports HTML, allowing you to customize how your menu titles appear on the storefront. You can use basic HTML tags to style text, highlight important items, or improve visual hierarchy in your menu. Common Use Cases 1. Change Text Color Use the <font> tag to apply a custom color: <font color="#ff0000">MENU TITLE</font> 2. Bold Text Make your menu itFew readers