Mega menu
Learn how to set up a mega menu
Last updated
Learn how to set up a mega menu
Last updated
Hyper theme offers a wide array of blocks for the mega menu, allowing you to create a highly functional and visually engaging navigation experience.
Steps:
In the theme editor (Customize), locate the Header section.
Click Add block, then select the add-on type you want for your menu.
Make necessary changes.
Click Save.
This block allows you to make certain links stand out in the menu.
Menu item: Type the name of the menu item exactly as it appears in your store’s navigation.
For example, if you want to highlight the menu item "On Sale", ensure the spelling matches.
Color: Select a custom color for the highlight. This makes the link visually distinct from others in the menu.
Style: Choose a visual effect to enhance the link’s appeal. Available options include:
Text color for having the menu item in a different color.
Star twinkle for a subtle animated effect.
Button to convert the link into a button.
Add a personalized link to your header navigation. This is ideal for including additional actions like “Find a Store,” “Track Order,” or any page that doesn’t already exist in your main menu.
Label: Type the name you want for the custom link.
Link: Use the Link field to connect the label to a specific page. You can:
Select an existing page from the dropdown.
Paste a URL for external pages or links.
Icon: Choose a built-in icon that matches the purpose of the link. For instance, select the Location icon for a store locator.
Upload your own icon using the Select or Explore free images option.
Icon size: Adjust the size of the icon to fit your design preferences.
Add banners to your mega menu to enhance navigation and showcase promotions or featured content.
Menu item: Type the name of the menu item exactly as it appears in your store’s navigation.
For example, if you want to add a banner to the menu item 'Shop By Categories', ensure the spelling matches.
Menu columns: Set the number of columns for your nested menu items.
Highlight link: Enable this feature to draw attention to that main menu item.
Color: Select a color to highlight it from others.
Style: Adjust the text style to text color, star twinkle, or button for better visibility.
Banner settings:
Width: Adjust the width of the banner.
Number of columns: Specify how many columns the banners take up.
Add up to 5 banners in each main menu item.
Each banner can be customized individually.
Feature stunning image cards in your mega menu.
Menu item: Type the name of the menu item exactly as it appears in your store’s navigation.
For example, if you want to add a custom card to the menu item 'Chairs & Stools', ensure the spelling matches.
Menu columns: Set the number of columns for your nested menu items.
Highlight link: Enable this feature to draw attention to that main menu item.
Color: Select a color to highlight it from others.
Style: Adjust the text style to text color, star twinkle, or button for better visibility.
Card settings:
Width: Adjust the width of the banner.
Number of columns: Specify how many columns the custom cards take up.
Add up to 5 custom cards in each main menu item.
Each banner can be customized individually.
Add a featured product list to your mega menu to boost sales.
Menu item: Type the name of the menu item exactly as it appears in your store’s navigation.
For example, if you want to add a banner to the menu item 'Tables & Desks', ensure the spelling matches.
Menu columns: Set the number of columns for your nested menu items.
Show menu column divider: Toggle this on/off to display a divider between menu columns for better structure.
Highlight link: Enable this feature to draw attention to that main menu item.
Color: Select a color to highlight it from others.
Style: Adjust the text style to text color, star twinkle, or button for better visibility.
Products list:
Heading: Give the product list a heading.
Width: Adjust how much space the product list takes up in the menu dropdown.
Number of columns: Choose how many product columns to display.
Products: Select the products you want to display in your mega menu.
Show vendor: Enable this setting to display the vendor/brand name for the products.
Show type: Toggle this on to display the product type.
Organize and display your store categories with added visuals. 2nd-level menu items will be display as a sidebar on the left.
Settings include:
Menu item: Type the name of the menu item exactly as it appears in your store’s navigation.
For example, if you want to add a banner to the menu item 'Shop By Room', ensure the spelling matches.
Highlight link: Enable this feature to draw attention to that main menu item.
Color: Select a color to highlight it from others.
Style: Adjust the text style to text color, star twinkle, or button for better visibility.
Right sidebar:
Menu columns: Adjust the number of columns of 3rd-level items to organize content.
Show collection image: Display a featured image for each collection in the sidebar.
Use the first product image as the collection image: Automatically use the first product’s image from the collection instead of a custom collection image.
Image ratio: Define how the collection images are displayed.
