Mega Menu for Magento 2. User Guide

Transcription

1 Mega Menu for Magento 2 User Guide

2 Table of Contents 1. Mega Menu Configuration 1.1. Accessing the Extension Main Setting 1.2. General 1.3. Top Menu Configuration 1.4. Left Menu Configuration 1.5. Mobile Version Configuration 1.6. Customize Styles 2. Mena Menu Management 2.1. Managing Mega Menu Edit Mega Menu Item 3. Front-End View 3.1. Horizontal and Vertical Menu 3.2. Submenu Types 3.3. Navigation menu s elements 3.4. Product Labels 3.5. Mobile Devices 4. Support Page 2

3 1. Mega Menu Configuration Once you are finished with installing the extension it is time to proceed to your Magento 2 backend to finalize the Mega Menu setup. Before creating your first mega menu item we suggest running through the Mega Menu settings and other options available to adjust the Mega menue. This will help in better understanding of how the extension functions and what can you expect your stores to look and feel like. Page 3

4 1.1. Accessing the Extension Main Settings To access the configuration settings for this extension, please go to Stores > Configuration > Ulmod Extensions > Mega Menu Page 4

5 1.1. Accessing the Extension Main Settings From here, you can manage all the main extension settings. Just select the tab you want to configure, and tweak its features as you need. Page 5

6 1.2. General Set the Enable option to Yes to enable the extension in frontend or to No to disable the extension. Choose the Menu Effect : Fade - menu item will be displayed immediately when you hover on menu title Slide - this effect is similar to Fade but menu item will be displayed more slowly Toggle - menu item will only be displayed when you click on menu title Page 6

7 1.3. Top Menu Configuration Set the Responsive Menu option to Yes to enable responsive top menu on mobile device or to No to disable the extension. Size to change menu to Mobile version - if the device size is lower than the number you enter (in px ) into this field, the menu will be changed to Mobile version. Menu Item height - Specify the height of the top menu bar (in px) Top Menu background color Define the top menu background color Choose the Top Menu alignment : Left the top menu items will be arranged from the left to the right of your store Right the top menu items will be arranged from the right to the left of your store Justify the top menu items will be justified both to the right and left of your store Menu item font size Specify the menu item font size Choose the top menu Text Label : Normal, Uppercase, Lowercase or Capitalize Page 7

8 1.3. Top Menu Configuration Customize your menu items style to fit your site by choosing the color of Menu item, Active Menu text, Active Menu item background, Submenu background, Submenu Box title, Submenu main text, and Submenu main link Page 8

9 1.4. Left Menu Configuration Left Menu background color Define the left menu background color Set the Responsive Menu option to Yes to enable responsive left menu on mobile device or to No to disable this functionality. Left Menu item font size Specify the menu item font size (in px) Size to change menu to Mobile version - if the device size is lower than the number you enter (in px ) into this field, the left menu will be changed to Mobile version. Choose the top menu Text Label : Normal, Uppercase, Lowercase or Capitalize Choose to the Left Menu item and Active Left Menu text color Page 9

10 1.4. Left Menu Configuration Customize your menu items style to fit your site by choosing the color of Active Left Menu Item background, Submenu background, Submenu Box title, Submenu main text and Submenu main link Page 10

11 1.5. Mobile Version Configuration Choose the Mobile Menu Effect : Blind or Slide. Customize your menu items style on mobile to fit your need by choosing the Anchor background color, Anchor color,mobile item font size (in px), Text label (Normal,Uppercase, Lowercase, Capitalize), Mobile Item text color, Mobile item background color. Page 11

12 1.5. Mobile Version Configuration Customize your menu items style on mobile to fit your need by choosing the Active Mobile item background color, Mobile submenu background color, Mobile Submenu Box title color, Mobile submenu main text color, Mobile submenu main link color Page 12

13 1.6. Customize Styles If you want to style your own menu without editing the css file, please insert the CSS code in Add CSS code to customize You can change any style, any menu position with custom CSS code. Page 13

14 2. Mega Menu Management Mega Menu Rich features of the extension allow you to create professional magento 2 navigation menu with the support of multiple submenu types such as Anchor Text, Default Category Listing, Static Category Listing, Dynamic Category Listing, Product Listing, Product Grid, Dynamic products listing by category, Static products listing by category, Content and Navigation menu's elements, such as Header Content, Main Content, Featured Content or Footer Content regardless your chosen menu layout. To view, edit and create mega menu item, please go to Marketing Mega Menu by Ulmod Mega Menu. A convenient grid displays all your mega menu items. Discover mass actions to manage mega menu items content faster and export them in CSV, XML and Excel file. To create new mega menu item, please click the 'Add New Megamenu' button in the upper right corner of the page. Page 14

15 2.1. Managing Megamenu To enable megamenu cache, hit the Enable Cache button. To refresh megamenu cache, hit the Refresh Menu Cache button. To create a new megamenu item, hit the Add New Megamenu button. On this convenient grid, you can manage all your mega menu items: Add New Megamenu Item Edit the existing ones or delete the megamenu items you no longer need. Mass delete/enable/disable the selected mega menu items Enable and Refresh Menu Cache Export all mega menu items in CSV, XML or Excel file Page 15

16 2.1.1 Edit Mega Menu Item : General Information Name Specify the name of the menu item. Link Specify the menu item link or url. Sort Order - Specify the sort order of the store on list page Store View Choose the store view to display menu item Menu Item Icon Upload the menu item icon image Choose the Menu Type: Top Menu the menu will be created as top menu. Left Menu the menu will be created as left menu. Set Status option to Yes to display the menu item in frontend or to No to do not display the menu item in frontend. Page 16

17 2.1.1 Edit Mega Menu Item : Content Information Width(%) set the menu width in % Choose the Menu item Alignment : From left item - menu item will be displayed from the left of item that you are adding. From right item - menu item will be displayed from the right of item that you are adding. From left menu - menu item will be displayed from the left of menu that you are adding. From right menu - menu item will be displayed from the right of menu that you are adding. Page 17

18 2.1.1 Edit Mega Menu Item : Content Information Choose the Featured Content Type of the menu : None the featured content will not be shown. Product the featured content will display as products. Please, specify the featured content width, box title, column number and choose products to display on featured content. Category the featured content will display as categories. Please, specify the featured content width, box title, column number and choose the categories to display on featured content. Content the featured content will display as content. Please, specify the featured content width and content to display. Page 18

19 2.1.1 Edit Mega Menu Item : Content Information Header Specify the content to display on header of the menu. Footer Specify the content to display on footer of the menu. Page 19

20 3. Front-End View Horizontal & Vertical Menu The horizontal and vertical menu help your customers save time, view shop easily and purchase quickly. You can show navigation menu as horizontal, vertical or both on same page.. Submenu Types The submenu allows customers to view your megamenu content as products, categories or custom content. Navigation menu's Elements All elements of navigation menu ( Header, Main, Featured or Footer Content) allows customers to view the header, footer, main and featured content on eye caching. Product Labels The product labels feature on Mega Menu is a perfect solution to highlight promoted items using color style and make them more visible and attractive for your customers. Mobile Devices Mobile-friendly design helps your customers navigate through your store with maximum comfort on tablets and smartphones. Page 20

21 3.1. Horizontal & Vertical Menu Page 21

22 3.2. Submenu Types Anchor Text submenu type Static products listing by category submenu type Content submenu type Default Category Listing submenu type Dynamic Category Listing submenu type Product Listing submenu type Static Category Listing submenu type Dynamic Products Listing by Category submenu type Product Grid submenu type Page 22

23 3.3. Navigation menu's Elements Header content navigation menu s element Main content navigation menu s element Featured content navigation menu s element Footer content navigation menu s element Page 23

24 3.4. Product Labels Product Label on menu content Product Label on menu content Product Label on menu content Product Label - Specify the product label. More than one label allowed separated by comma delimited (;) Product Label - Specify the color of product label. Page 24

25 3.5. Mobile Devices Mega Menu on mobile devices Page 25

26 3. Support Need Help? Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via and we will help you out. Got Questions? Should you have any questions or feature suggestions, please contact us at: Your feedback is absolutely welcome! Page 26