How to Set Up and Use the Mega Menu in Your Surge Theme

Overview

The mega menu is an expanded navigation panel that goes beyond a simple list of links. It lets you show featured products, collections with images, and your main pages in one organized place, so customers can find what they're looking for faster.

Why use it:

• Faster product discovery: Customers see your top products and collections as soon as they open the menu.
• More sales opportunities: Featuring bestsellers with prices puts your strongest products in front of every visitor.
• Visual browsing: Collection images help shoppers recognize categories at a glance.
• Better mobile experience: A single scrollable panel is easier to use than nested dropdowns.
• Cleaner header: All your links live in one place, so the header stays uncluttered.
• Built-in promotion space: Highlight seasonal collections, new arrivals, or promotions without changing your page layouts.

This guide walks you through setting up the mega menu and styling it to match your brand.

Step-by-Step Guide

Step 1: Build your menu structure

1. In your Shopify admin, go to Content → Menus.
2. Create a new menu or select your existing main menu.
3. Add the links you want customers to see, such as Home, Catalog, Contact, Products, and Collections.
4. Click Save menu.

Step 2: Open the Header section in the theme editor

1. Go to Online Store → Themes.
2. Click Customize on your Surge theme.
3. In the left panel, click Header.

Step 3: Select your menu

In the Header settings, choose the menu you created in Step 1. This controls the main links that appear in the navigation, including the list shown inside the opened menu panel.

Step 4: Add featured products and collections

1. Within the Header section, add the mega menu content blocks.
2. For featured products, select your top 3 to 4 bestsellers. Their image, title, and price will display in the menu.
3. For collections, choose the collections you want to highlight. Each one shows with a thumbnail image and its title.

Note: If you see "Product title" or "Collection title" with placeholder prices and images, the blocks haven't been connected to real products or collections yet. Select your actual items to replace them.

Step 5: Style the menu

In the right-hand settings panel, you can customize the look of your menu:

• Colors: Adjust the background color, mobile background color, title color, mobile title color, and mega menu border color.
• Layout: Set the section width and choose whether to use a custom page width.
• Spacing: Adjust section padding, plus horizontal and vertical padding for desktop and mobile.

Step 6: Preview and publish

1. Click the menu icon in the header (the three horizontal lines) to open the panel and check how it looks.
2. Switch between desktop and mobile previews using the device icons at the top of the editor.
3. When you're happy with the result, click Save.

Pro Tips

• Keep it focused. Feature 3 to 4 bestsellers rather than your whole catalog. A shorter list gets more clicks.
• Use consistent images. Collection thumbnails with the same size, style, and background look more professional.
• Check text contrast. Make sure your title and link colors stand out clearly against the menu background, especially on dark backgrounds. Light text on a dark menu is easy to read, but dark text on a dark background will disappear.
• Write short link names. Clear, concise labels like "Collections" or "Contact" are easier to scan than long phrases.
• Update seasonally. Swap featured products and collections for holidays, sales, and new arrivals to keep the menu fresh.
• Always test on mobile. Most shoppers browse on their phones, so confirm everything is readable and easy to tap.
• Order matters. Put your most important links and collections first, since people read from the top down.

Closing

The mega menu is one of the simplest ways to guide customers to your best products and keep your navigation clean and easy to use. A few minutes of setup can make a real difference in how easily shoppers find what they want.

If you run into any issues or would like help setting up your mega menu, our team is happy to help. Please submit a ticket at [email protected] and include a screenshot of your Header settings if possible. We'll get back to you as soon as we can.