How to create a Tabbed Mega Menu

Overview

The Tabbed Mega Menu in the Concept theme is a highly customizable navigation system that enhances user experience by displaying product categories with interactive tabs, featured products, and promotional content. This guide walks you through setting it up and customizing it to fit your store’s needs.

💡 Note: Tabbed Mega Menu is available from Concept v4.0.0 only. If you’re using an older version of the theme, check out this article for a simplified mega menu version.

How to configure the Tabbed Mega Menu

1. Adding a Tabbed Mega Menu

1. Go to your Shopify Admin Panel.
2. Navigate to Online Store > Themes.
3. Click Customize on the Concept theme.
4. In the left sidebar, find and select Header section.

5. Under the section, click to add a block then select Tabbed mega menu.

   

2. Configuring the main settings

1. Under Menu item, enter the name of the menu item (e.g., "Shop") that will trigger the mega menu.
2. Enter the Button label (e.g., "View All Products"). Leave blank to hide the button.
3. Set the Button link as you want, e.g, to redirect users to a collection or category.
4. Define Heading 1 (e.g., "Collections") and Heading 2 (e.g., "Most Popular") to label sections.
5. Toggle options for Mobile layout, such as showing the product vendor or price.

3. Adding tabs to the Mega Menu

The Tabbed Mega Menu supports 5 tabs in a vertical layout, as seen in the first screenshot. Each tab is configured similarly using the following steps:

Adding a product category

1. Under the Tab 1:
   • Set the Target, which is the label displayed for the tab (e.g., "Headphones").
   • Select the Target Link, which must be linked to a collection, to ensure the tab navigates correctly.
   • Choose Products to display under this tab. On desktops, depending on the screen size, the number of products displayed can be adjusted automatically from 2 to 4. Adding more than 4 products here will result in the extra items being removed.
2. Upload a Custom icon for the tab.
   • Recommended size: SVG or PNG format.
   • Adjust Icon width (e.g., 42px).

Adding a promotional banner

1. Locate the Promotion 1 section.
2. Upload a Promotion image.
3. Adjust the Mobile image ratio.
4. Set a Heading (e.g., "Build Your Bundle").
5. Add a Subtext (e.g., "Buy 3 and save 30%").
6. Toggle Overlay text on image on/off. Enabling this will move the text overlay on the image, allowing you to create a more visually integrated design.
7. Set a Link for the promotion.
8. Optionally, set a Tag, which adds a tag-like label overlay on the image, as shown in the screenshot.
9. Customize the Text color, Overlay color, and Overlay opacity as you want.

Optionally, repeat these steps for the other 4 tabs.

6. Finalizing & Testing

1. Preview the menu on desktop and mobile.
2. Ensure smooth hover and click interactions.
3. Adjust settings if needed for better user experience.
4. Save changes and publish when ready.

Conclusion

The Tabbed Mega Menu is a powerful tool to enhance navigation and showcase key products effectively. By following this guide, you can create a visually appealing and user-friendly menu that boosts engagement and sales.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please reach out to our support guys via our Ticket System for assistance within 8 hours.

Scan the QR code below to join our WhatsApp community for updates, news, and announcements.