# Mega menu {% embed url="" %} Hyper theme offers a wide array of blocks for the mega menu, allowing you to create a highly functional and visually engaging navigation experience. {% hint style="success" %} Steps: 1. In the theme editor (**Customize**), locate the **Header** section. 2. Click **Add block**, then select the add-on type you want for your menu. 3. Make necessary changes. 4. Click **Save**. {% endhint %}

## Highlight link 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. ## Custom link 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. ## Banner (Mega menu) 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.

See settings

* **Color scheme**: Choose a predefined color scheme for the banner. See [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention") * **Image**: Upload a relevant image or choose one from Shopify’s free image library. * **Subheading, heading, description**: Add content for the banner. * **Button label** and **Button style:** Add a call-to-action button to the banner and choose the style for it. * **Content position** and Content alignment: Decide how the content show over the banner. * **Link**: Add the destination link for the button.

## Custom card 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.

## Product list 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. ## Sidebar Organize and display your store categories with added visuals. 2nd-level menu items will be display as a sidebar on the left. {% hint style="success" %} This works best when the **3rd-level menu items are collections**. {% endhint %}

{% hint style="info" %} A menu with 3-level nested items is suggested. See [Editing menus](https://help.shopify.com/manual/online-store/menus-and-links/editing-menus). ![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FdGGePwg5j0j8AR26YIGV%2Fimage.png?alt=media\&token=635bdc52-ce34-4312-846f-8e1e98023339) {% endhint %} **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.

See how to set up collection images for menu menu's sidebar

To display collection images in the Sidebar Mega Menu, you’ll need to configure a Shopify metafield with the specified namespace and key. Follow these steps: **Step 1: Add the Metafield definition** 1. Go to **Settings > Custom Data** in your Shopify admin. 2. In **Collections**, click **Add definition**. 3.

4. Fill in the following details: * **Namespace and Key**: `foxtheme.collection_megamenu_image` * **Select type:** File.

5. Click **Save** to create the metafield definition. **Step 2: Assign images to collections**: 1. Go to **Products** > **Collections** in your Shopify admin. 2. Select the collection you want to edit. 3. Add the metafield value under the newly created custom field (e.g., upload the desired image). ![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FPDLJI9iWazn6Kj88Xvyg%2Fimage.png?alt=media\&token=11a08adf-dc3d-4c56-b53a-10e7a8ecf8b3)

***