Thank you for purchasing C: Mega Menu Shopify App. If you have any difficulty with this App or you find an issue, please feel free to send us a message: shopify@capacitywebsolutions.com
Below you will find the detailed documentation on how to use our App and we wish you have a great experience with our Shopify App.
Visit our Shopify App page: C: Mega Menu.
Click on the Add app button to begin installation.
Pricing: $3.99/month with a 7-day free trial.
>> Go to Online Store >> Themes >> Current Theme >> Theme Customize >> App Embeds Section then please follow below screenshot OR watch video guide by (click here)
To access the Menu Editor, navigate to Admin >> Apps >> C: Mega Menu and click the Launch Menu Editor button.
Once opened, you will see the following screen:
Below are the key actions you can perform in the Menu Editor:
You can refer to the screenshots below to perform actions such as creating, deleting, updating, duplicating, adding submenu and root menu, toggling mobile view and desktop view, exiting menu editor, showing, and hiding submenus.
You cannot revert individual changes, but you can reset the entire menu editor using Reset and After performing any operation, it is essential to save the entire data.
Step 1: Navigate to Admin >> Apps >> C: Mega Menu >> Launch Menu Editor and click the Add a New Menu button.
Step 2: On the next screen, fill in the required details in the form and click the Add button. Your new menu item will be added and displayed in the preview section on the right side.
To understand the menu form in detail, click here.
This form allows you to create a root menu item by entering or selecting the required fields as shown in the image above.
This form allows you to create submenu items by filling in the required fields as shown above.
Explore a variety of linking options to enhance your menu functionality. Each option is designed to cater to specific use cases:
Specific Links: Some options require you to define additional fields to ensure proper functionality:
No Link: Select this option if the menu item is purely visual and not meant to be clickable. For instance, you might use this for section headings or separators within your menu.
Web Address: Allows you to input a custom URL for external or dynamic linking. This option is great for linking to third-party websites or dynamically generated pages.
Submenu-Specific Options:
Note: The Group and Block options are exclusive to submenu items and cannot be used in root menu items.
For additional guidance on setting up your menu links, explore our detailed guides on Block Options and Group Options.
Group: The Group option allows you to organize multiple menu items within a single container. This feature is particularly useful when creating structured and visually appealing mega menus. Here's how it works:
For a better understanding, refer to the following screenshot showing how groups are configured:
Mobile View: In the mobile view, the group will still be displayed during preview for reference. However, on the live front end, the group item will not appear, and only the submenu items within the group will be visible.
Refer to the screenshot below to see how the group functions in the mobile view:
Why Use Groups?
Use the Group feature to simplify menu design and improve navigation for your users!
Enhance your navigation experience by selecting from three versatile submenu types: Flyout, Mega, and Tabs. Each type is designed to suit different menu requirements, offering flexibility and customization options. Below is a detailed explanation of each submenu type:
The Flyout submenu allows you to create multi-level (hierarchical) menus where submenus open dynamically when users interact with a parent menu item. It is ideal for organizing large menus with multiple levels in a clean and user-friendly way.
Refer to the screenshots below for a visual representation:
The Mega submenu is ideal for displaying a large number of items within a single view. It provides a broad canvas to organize links and content effectively. Key features include:
Refer to the screenshot below to see how a mega menu appears:
The Tabs submenu allows you to display content in a tabbed interface, making it easier for users to switch between categories. This type is particularly useful for segmenting related content. Key features include:
Refer to the screenshots below for examples of tab menus:
Use these submenu types to create engaging, user-friendly menus tailored to your website's needs!
The Submenu Slider feature allows you to display submenu items in a horizontal slider layout. This is especially useful for showcasing products, collections, images, or promotional content in a visually engaging way inside your menu.
When enabled, submenu items are displayed as cards inside a slider with navigation arrows, making it ideal for modern eCommerce navigation.
Demo Preview:
The Items Per Row option lets you control how many submenu items appear in one row inside the slider.
For best results, keep your structure simple:
Parent Menu → Submenu (Slider Items)
You can also enable the slider for any specific submenu item, not just main(root) menu items. This allows you to create sliders for:
Example Screenshots:
By using the Submenu Slider wisely, you can create a modern, visually appealing navigation experience that highlights important content without overwhelming users.
Configure the submenu's width and position to align with your layout requirements. The available options are Full Width, Body Width, Center, Left, and Right. Each option allows for precise control over submenu placement to enhance the user experience. Below is a detailed explanation of each option:
The Full Width option expands the submenu to fill the entire width of its container. This is ideal for creating a seamless look within its parent container, ensuring it matches the overall design.
Refer to the image below for a visual representation:
The Body Width option expands the submenu to fill the entire width of the browser window or screen, providing a full-screen effect. This creates a distinct visual style compared to Full Width.
The Center option positions the submenu in the middle of the container, providing balanced spacing on both sides. This creates a symmetrical and aesthetically pleasing design.
See the example below for how the center alignment appears:
The Left option aligns the submenu to the left side of its container. This is particularly useful for navigation menus that need to begin at the left-most position.
Refer to the image below for an example:
The Right option aligns the submenu to the right side of its container. This can be used for modern layouts or for aligning menus to the end of a navigation bar.
Check the example below for how the right alignment appears:
By selecting the appropriate width and position, you can customize your submenu to match the design and functionality of your website seamlessly!
>> The "Block" feature allows you to create visually appealing and customizable menu items. This feature is designed to display additional content, including images, products, collections, Google Maps, contact forms, or custom HTML, based on your specific requirements. Here are the available options, along with detailed explanations and examples:
>> Image: Use this option to display an image inside your menu item. This is commonly used to showcase products, collections, or promotional banners.
>> Product: Display a specific product within the menu:
>> Collection: Show a specific collection of products:
>> Google Map: Integrate a map into your menu by entering the Google Maps iframe code. This is ideal for showing your store's location or any other geographical point of interest.
Follow the steps below to obtain your Google Maps iframe code:
Click here to visit Google Maps and follow the instructions shown in the screenshots:
>> Custom HTML: Enter your own HTML code to display fully customized content, giving you complete flexibility to design unique elements.
>> Contact Form: Add a contact form to your menu by configuring the following fields:
>> Social Links: Add social sharing buttons to your menu, allowing users to share your content on platforms like Facebook, Instagram, LinkedIn, YouTube, Pinterest, TikTok, and X (formerly Twitter).
The Recommended Block (Mobile Only) option is designed specifically to improve the mobile navigation experience. When enabled, selected submenu items are displayed directly inside the root menu on mobile devices.
This feature has no impact on desktop view. Desktop behavior remains unchanged, and all submenu levels continue to work normally on desktop.
Structure on Mobile:
Main Menu → Recommended Submenu Items
The Submenu Slider on mobile works only when Recommended Block is enabled. Outside of the Recommended Block, sliders are not supported on mobile.
When the slider is enabled, submenu items inside the Recommended Block are displayed as a horizontal slider with navigation arrows.
When the slider is disabled, submenu items inside the Recommended Block are displayed as a normal grid or list layout without sliding behavior.
When the slider is disabled but the Recommended Block is enabled, submenu items are displayed in this layout on mobile view.
The Items Per Row (Mobile) option allows you to control how many submenu items are displayed in a single row inside the Recommended Block on mobile devices.
If the slider is enabled, the Items Per Row (Mobile) value controls how many items appear in one slide.
If the slider is disabled, items are displayed in a normal grid layout based on the selected row count.
Using the Recommended Block correctly ensures a clean, fast, and user-friendly navigation experience on mobile devices.
Step 1: To modify a menu item, locate the item you wish to edit and click on the edit icon. This will open the menu modification form. The screenshots below provide an example of how this looks:
Step 2: Update the desired fields in the form. You can modify fields such as:
Important Notes:
By following these steps, you can easily modify any menu item and ensure that your updates are reflected accurately on the frontend.
>> The following options are available for menu design:
Auto - Replace Main Menu: Automatically replaces the main menu with the configured settings without any additional manual intervention.
Manual - Replace Menu by CSS Selector: Allows manual replacement of the menu by specifying a CSS selector. Enter the appropriate selectors for both mobile and desktop views to customize the replacement based on your requirements
Embedded Code - Replace Menu by Short Code: Utilizes embedded code, such as a shortcode, to replace the menu. Simply input the provided code to achieve the desired menu replacement
When selecting the Manual option, ensure to enter the CSS selectors for both mobile and desktop views to precisely target the menus for replacement. This enables you to have specific control over the appearance and functionality of the replaced menu.
Learn more about menu replacement by
Horizontal Menu: Displays the menu items in a horizontal layout, typically positioned at the top of the webpage. This orientation is common for traditional navigation bars.
Vertical Menu: Presents the menu items in a vertical layout, usually aligned to the left or right side of the webpage. Vertical menus are often utilized for sidebars or navigation panels.
Choose the menu orientation that best suits your website's design and layout requirements.
On Hover: Menu items are activated when the user hovers over them. Submenus and dropdowns appear instantly upon hovering over the parent menu item, providing a dynamic and responsive user experience.
On Click: Menu items are activated when the user clicks on them. Submenus and dropdowns appear upon clicking the parent menu item, offering a more deliberate and user-controlled interaction.
Choose the trigger option that aligns with your design preferences and enhances the user experience on your storefront.
Mobile Breakpoints refer to specific screen width thresholds that determine when a website's layout should adapt for mobile devices. This field allows you to set or customize these breakpoints to ensure an optimal viewing experience on various screen sizes.
When designing the root menu, you have various customization options to enhance its appearance and functionality:
These design options provide flexibility to tailor the root menu to your visual preferences and ensure a cohesive design with the overall theme of your website, You can refer to the screenshots below for references
Customize the appearance of submenus using the following design options:
These design options offer flexibility to tailor the submenu's visual style and ensure a seamless design integration with your website theme. Refer to the screenshots below for visual references.
This section controls the appearance and behavior of the left-side tab menu inside the Mega Menu. These settings apply only when your menu layout uses a left-side tab structure.
You can customize colors, text styles, borders, and font weight to match your store’s branding and improve menu clarity.
Note: These settings do not affect top menus or mobile menus. They apply only to Mega Menus that use a left-side tab layout.
Enhance the appearance of your mobile menu with the following design options:
Utilize these design options to create a visually appealing and cohesive mobile menu design. Explore the screenshots below for visual references.
This option lets you choose the visual style of your mobile menu. There are seven different menu layouts, designed for different replacement methods and design preferences.
Note: Some layouts are mainly used with Auto or Manual menu replacement, while others are design-focused.
1. None: No predefined layout is applied. Use this option when handling the mobile menu completely through custom code or manual setup.
2. Hamburger: Displays the mobile menu using a hamburger icon. This layout works with both Liquid Code(Shorcode) menu replacement.
When a position is selected (Top Left, Top Right, Bottom Left, Bottom Right), the hamburger button is sticky and remains fixed at the chosen location on the screen, meaning it remains in a fixed position while scrolling, ensuring accessibility at all times.
If no position is selected, The hamburger button remains sticky but is confined to the selected position.(wherever you place the shortcode).
3. Standard: A clean and simple mobile menu layout suitable for most stores.
4. Classic: A traditional mobile menu style with clear spacing and straightforward navigation.
5. Rounded: A modern layout with rounded corners for menu items and buttons, ideal for soft or friendly design themes.
6. Boxed: Menu items are displayed inside boxed sections, giving a structured and card-based appearance.
7. Modern: A contemporary mobile menu design with a sleek look, best suited for modern and minimal store designs.
You can further customize the menu using background color, icon color, active button background color, and active button text color to match your brand.
Step 1: After making any changes or creating new items in the menu editor, it is essential to save your work to avoid losing the updates. Saving stores your changes in the database but does not automatically update the frontend. To make changes visible to users, you will need to Publish the Menu.
Step 2: To save your data, locate the Save button in the top-right corner of the menu editor. Click on this button to store your changes securely in the database.
Additional Notes:
The screenshot below illustrates where to find the Save button and how it appears:
By following these steps, you can ensure your menu and design changes are saved and ready to be published when needed.
>> Before updating the menu on the front end, ensure that you have saved your data in the database. Saving your data ensures that all the changes are properly stored and ready for publication.
>> Once the data is saved, you can proceed to publish the menu. Clicking on the Publish Menu button will apply all the latest changes and reflect them on the front end of your website, so users can see the updated menu.
>> Note: The changes will only be visible on the front end once the menu is published. Make sure you have reviewed all your changes before publishing.
>> If you encounter any issues while publishing, double-check that the data has been saved successfully and that there are no errors in the changes you made.
>> If you have made changes to the menu—such as creating, modifying, reordering, importing, or designing the menu—and decide you want to start over, you can reset the entire menu editor to its original state.
>> To reset the menu, simply click the Reset button located at the top right of the menu editor. This will undo all recent changes and restore the menu to its initial configuration.
>> Important: This action cannot be undone. Once you click the Reset button, all unsaved changes will be lost, and the menu will return to its original state before any modifications were made.
>> Make sure to save your changes first if you want to keep them, as resetting will erase all modifications that haven’t been saved.
>> To reorder menu items using the drag-and-drop feature, click and hold the drag icon (located at the beginning of the menu item). Then, drag the item to your desired position and release it to drop it in place. See the screenshots below for visual guidance.
>> Please note: Once you reorder the menu items, you cannot undo individual changes. However, you can reset the entire menu to its original state using the Reset option.
>> It’s important to save your changes after reordering the menu items. Click the Save Menu Order button to save the new order.
>> When dragging a root (level 0) menu item, it can only be placed in another root menu, not inside any submenu (level 1 or deeper). Similarly, submenu items can only be dropped into other submenu sections, not into the root menu.
Important: While rearranging menu items, the options to edit, delete, duplicate, or add new items will be temporarily disabled. This is to prevent accidental changes during the reordering process. Once you click the "Save Menu Order" button, these options will be re-enabled, and you can continue editing the menu items as needed.
This functionality is designed to protect the menu structure and avoid unintended modifications while you're reordering items.
The Import & Export feature allows you to back up your menu and design or restore them whenever needed using a JSON file.
Important: Importing data does not apply changes automatically. You must click Save to apply the imported menu and design.
If you import the wrong data or want to discard changes, you can use the Reset option to revert everything back to the last saved state.
The Default Language option allows you to choose which language will be shown by default in your menu. This setting is useful when your store supports multiple languages and you want to control the primary menu language.
Follow these simple steps:
The selected default language is used when a customer visits your store and their browser or store language does not match any available translations.
Changing the Default Language does not automatically translate your menu items. All menu texts must be updated manually for the selected language.
Suppose your current default language is English. You change the default language to Italian.
After changing the default language to Italian, your English menu will still display Italian text until English translations are added.
After this, English visitors will see the menu in English, and Italian visitors will see the menu in Italian.
If you later change the default language back from Italian to English, the same process applies.
Following this process ensures your menu displays the correct language for all users and avoids mixed-language issues.
This ensures your menu displays correctly for customers across different languages and regions.
>> Step 1: Click on the Translation option to open the translation editor.
>> Step 2: Select the language in which you want to translate the menu. The language selection dropdown is located at the top right corner of the screen.
>> Step 3: Enter the translated menu titles and badges for the selected language that you wish to display on the front end.
>> Step 4: After entering the translations, click on the Save button at the top right corner to save your changes.
>> Repeat these steps for each language you want to translate the menu into.
Our Mega Menu now allows you to replace Desktop and Mobile menus separately. This gives you full flexibility to use different methods based on your theme structure and requirements.
Below is a clear explanation of each option shown in the above screenshot:
Under “Choose option to Mega Menu on Desktop”, you will find the following choices:
Auto mode automatically detects and replaces your theme’s existing desktop menu.
Manual mode allows you to replace the desktop menu using a specific CSS selector.
header nav)You can find the correct CSS selector by inspecting your menu in the browser (right-click → Inspect → Copy Selector).
Liquid Code mode is for advanced users and developers.
Under “Choose option to Mega Menu on Mobile”, you can configure the mobile menu independently from the desktop menu.
Automatically replaces the mobile menu detected in your theme.
Replace the mobile menu using a CSS selector, similar to desktop manual mode.
This option allows you to replace the mobile menu using Liquid or shortcode-based output.
The code dynamically loads the Mega Menu from metafields and ensures proper rendering for mobile devices.
This separation ensures better compatibility, performance, and full control over how your Mega Menu appears across devices.
>> To locate the CSS selector for replacing the menu, watch video guide by click here or follow these steps:
Step-1: Visit the webpage where you want to replace the menu.
Step-2: Right-click on the existing menu or the area where the menu is located.
Step-3: Select "Inspect" or "Inspect Element" from the context menu. This opens the browser's Developer Tools.
Step-4: In the Elements panel of Developer Tools, the corresponding HTML code for the selected menu element is highlighted.
Step-5: Right-click on the highlighted HTML code, and from the context menu, choose "Copy" and then "Copy Selector."
Step-6: The copied selector now represents the menu element and can be used for replacement in your CSS or menu editor settings.
By following these steps, you can easily find and copy the CSS selector for the existing menu, enabling a seamless replacement with your customized menu design.
To identify the CSS selector for replacing the mobile menu, you can follow a similar process as mentioned below:
Step-1: Access the webpage on the mobile view where you want to replace the mobile menu.
Step-2: On your mobile device, open the browser and access the website.
Step-3: Enable the browser's developer tools or inspect element mode. This may vary depending on the mobile browser you are using.
Step-4: Locate the mobile menu or the area where the mobile menu is present on the webpage.
Step-5: Tap on the mobile menu or its surrounding area to highlight the corresponding HTML code in the developer tools.
Step-6: Once highlighted, access the context menu and choose "Copy" and then "Copy Selector" to copy the CSS selector for the mobile menu.
Step-7: Use the copied selector for replacing the mobile menu in your CSS or menu editor settings.
Following these steps will help you find the CSS selector for the mobile menu, allowing you to seamlessly replace it with your custom-designed mobile menu.
After copying both selectors, follow the steps as indicated in the screenshots, to paste them into the relevant field settings:
>> To use the Embedded/Short Code method, follow the steps below:
Step 1: Copy the short code from the text area provided in the app, as shown in the screenshot below.
Step 2: Paste the copied short code into your theme file where you want the menu to appear on your website.
This will display the menu in the location of your choice on the site.
For a detailed, step-by-step guide on how to copy and insert the embedded code into your theme, watch our example video guide.
You can view the video guide by clicking here.
If you used the embedded code method to display the menu, it is essential to remove it after uninstalling the app to avoid any issues.
If you have embedded the code into your theme, follow these steps:
If you did not use the embedded code method, then no action is needed, and your theme will remain unaffected.
For a visual guide on how to remove the embedded code, watch our example video by clicking here.
>> Please take note of the following important points to ensure a smooth experience while using the menu editor:
After making any changes in the menu editor, it is essential to:
Both actions are necessary for the changes to appear on your live site.
Note: Some features may not function as expected in the Mobile or Vertical menu layouts. Please check compatibility before making extensive changes for these layouts.
Ensure all translations are saved: After making modifications in the menu editor, especially if you are working in multiple languages, save your translations to make sure the changes are visible in different markets.
To save translations, go to the Translation tab and click the Save button.
During drag-and-drop mode: The options to edit, delete, duplicate, or add new menu items will be disabled until you save the current menu order. This ensures that no unintended changes are made while rearranging menu items.
Once you click "Save Menu Order," these options will be re-enabled, allowing you to make further adjustments to the menu items without disrupting the order.
This process is designed to maintain the integrity of your menu structure and avoid confusion or unintentional modifications during the rearranging process.
If you have any questions or require further assistance, please refer to the documentation provided or contact our support team for help.
Horizontal
Vertical menu - Left
Vertical menu - Right
Mobile Menu
The menu's appearance in the mobile view may vary regardless of whether the Menu orientation is vertical or horizontal.
If you'd like to apply your own CSS styling to the C: Mega Menu app within your online store's theme, follow the steps below:
Step 1: Navigate to the following settings in your Shopify admin:
Once you're in the C: Mega Menu CSS app embed block, scroll to the bottom of the page where you will see the Custom CSS section.
Step 2: In the Custom CSS section, you can add your own custom CSS styles to personalize the appearance of the Mega Menu. There's no need to wrap your code in a <style> tag; just directly paste your CSS rules into the box provided.
Step 3: Review the screenshot below to see how the Custom CSS section appears on the page:
If you encounter any issues or need further assistance with customizing your Mega Menu, feel free to reach out to our support team.
If you have any questions, please do not hesitate to contact us at shopify@capacitywebsolutions.com.We are happy to help!
Please add our email: shopify@capacitywebsolutions.com to your address book to ensure our response email isn’t marked as spam mail.
We will try our best to reply your emails as soon as possible , except weekends and National Holidays.
Thank you.
Capacity Web Solutions Team