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 is perfect for creating hierarchical menu structures with unlimited levels. It is particularly suited for websites with extensive content organization needs. Here are the key features:
Refer to the screenshot 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!
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 alongside your menu. Here’s how to configure it:
>> 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:
>>
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, learn more about selector >> click here
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, learn more about embedded code >> click here
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.
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.
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.
1) First, select the Embedded Code option in your settings, then switch to mobile view.
2) Scroll to the bottom of the Design Tab to access the hamburger button style options.
Note: Hamburger button style options are specifically designed for mobile menus. These options will only appear when the menu is set to use embedded code.
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).
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.
>> Export: To create a backup of your menu, you can export the menu data as a JSON file.
>> Click on the export icon to download the menu data in JSON format and save it as a backup.
>> Import: To restore or update your menu, you can import the previously saved menu data.
Steps to Import:
Important: After importing the menu data, you must Save it to apply the changes. If you change your mind or encounter issues, you can always revert the changes using the Reset option.
>> 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.
>> 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