To add a mega menu on the Shopify Dawn theme, open the theme editor, click the Header section, and set “Desktop menu type” to “Mega menu.” To display images, edit the header-mega-menu.liquid snippet and pull each collection’s featured image using Liquid — no paid app required.

if you’ve ever clicked through a big store like Gymshark or Allbirds, you’ve seen a mega menu in action. Hover over “Shop,” and instead of a skinny dropdown list, a wide panel opens up with organized columns, category links, and — most importantly — images that guide shoppers exactly where they want to go.

Now here’s the frustrating part. If you’re running your store on Shopify’s free Dawn theme, you’ve probably noticed that the default dropdown menu looks… plain. Just text links stacked in a column. It works, but it doesn’t sell.

Most store owners assume they need a paid app to fix this. Apps like these typically cost $10–$15 per month, add extra JavaScript that slows down your store, and lock your navigation into someone else’s system. Over a year, that’s $120–$180 spent on something you can build yourself in under an hour.

The good news? Dawn already has a built-in mega menu. And with a small amount of custom Liquid code, you can add collection images to it — completely free, with no app, and no monthly fees.

In this tutorial, I’ll walk you through the entire process: setting up your navigation structure, enabling Dawn’s native mega menu, adding images with copy-paste code, styling it with CSS, and fixing the most common problems along the way. I’ve built mega menus for dozens of client stores as a Shopify developer, and this is the exact method I use.

Let’s get into it.

Table of Contents

• What Is a Mega Menu and Why Does Your Store Need One?
• Mega Menu App vs. Custom Code: Which Should You Choose?
• Before You Start: Prepare Your Store
  • Step 0: Duplicate Your Theme (Don’t Skip This)
• Step 1: Build Your Navigation Menu Structure
• Step 2: Enable the Built-In Mega Menu in Dawn
• Step 3: Add Images to Your Mega Menu (Custom Code)
  • Locate the Mega Menu Snippet
  • Add the Image Code
  • Add the CSS
• Step 4: Assign Images to Your Collections
• Step 5: Test Your Mega Menu on Desktop and Mobile
• Mega Menu Best Practices for Higher Conversions
• Common Mistakes to Avoid
• Troubleshooting: Mega Menu Not Showing or Images Missing
• FAQ
• Conclusion

What Is a Mega Menu and Why Does Your Store Need One?

A mega menu is a large, expandable navigation panel that displays multiple levels of links at once — usually organized into columns, sometimes with images, banners, or featured products.

Compare that to a standard dropdown, which shows one narrow column of text links and often requires shoppers to hover through nested submenus to find anything.

For an eCommerce store, the difference matters more than you might think:

• Better product discovery. Shoppers see your full catalog structure in one glance instead of digging through nested dropdowns.
• Lower bounce rate. When visitors find what they’re looking for in one click, they stay. When they can’t, they leave.
• Visual selling. Images in your menu act like mini banners. A shopper who hovers over “Men’s” and sees a photo of your best-selling jacket is far more likely to click it.
• Stronger internal linking for SEO. A well-structured mega menu links to your key collection pages from every page of your site, which helps Google understand your site architecture and distributes link equity to the pages that make you money.

If your store has more than 10–15 collections or product categories, a mega menu isn’t a luxury — it’s the standard shoppers expect.

Mega Menu App vs. Custom Code: Which Should You Choose?

Before we build anything, let’s settle the app question, because it’s the first thing most store owners search for.

My recommendation: if you’re on Dawn (or any recent Online Store 2.0 theme), use the built-in mega menu plus the small image snippet I’ll give you below. The only situation where an app makes sense is if you need highly complex layouts — promotional banners, tabbed menus, countdown timers inside the menu — and you have zero comfort touching theme files.

For 90% of stores, custom code wins on cost, speed, and reliability.

Before You Start: Prepare Your Store

You’ll need three things:

1. A Shopify store running the Dawn theme (version 7.0 or later — the mega menu option has been built in for a while now)
2. Collections created for your main product categories, each with a featured image
3. About 30–60 minutes

Step 0: Duplicate Your Theme (Don’t Skip This)

Any time you edit theme code, work on a copy. It takes ten seconds and saves you from disasters.

1. In your Shopify admin, go to Online Store → Themes
2. Next to your live theme, click the ⋯ (three dots) button
3. Click Duplicate
4. Rename the copy something like “Dawn – Mega Menu Dev”

Do all the code edits in this duplicate. Once everything works, publish it. If anything goes wrong, your live store never sees it.

Step 1: Build Your Navigation Menu Structure

The mega menu is powered entirely by your navigation menu, so the structure has to be right first. A mega menu needs three levels of links to look like a proper mega menu:

• Level 1: Top-level items in your header (e.g., Shop, Men, Women)
• Level 2: Column headings inside the panel (e.g., Tops, Bottoms, Accessories)
• Level 3: The individual links under each column heading (e.g., T-Shirts, Hoodies, Tank Tops)

Here’s how to set it up:

1. Go to Online Store → Navigation
2. Click your Main menu
3. Click Add menu item, name it (e.g., “Shop”), and link it to a collection or page
4. To create a Level 2 item, add another menu item and drag it slightly to the right underneath “Shop” until it nests
5. To create Level 3 items, drag them to the right underneath a Level 2 item
6. Click Save menu

Important tip: link your Level 2 items to collections, not just pages or “#” placeholders. This matters for the image step later — our code will automatically pull each collection’s image into the menu. Collection links = automatic images.

A good structure for a clothing store might look like:

Shop
├── Men (→ Men collection)
│   ├── T-Shirts
│   ├── Hoodies
│   └── Jackets
├── Women (→ Women collection)
│   ├── Dresses
│   ├── Tops
│   └── Outerwear
└── Accessories (→ Accessories collection)
    ├── Bags
    └── Hats

Step 2: Enable the Built-In Mega Menu in Dawn

Here’s the part most tutorials overcomplicate. Dawn has had a native mega menu option for years — you just have to switch it on.

1. Go to Online Store → Themes and click Customize on your duplicated theme
2. Click the Header section in the left sidebar
3. Find the setting called Desktop menu type (in some Dawn versions it’s simply labeled Menu type)
4. Change it from Dropdown to Mega menu
5. Click Save

Preview your store and hover over “Shop.” You should now see a full-width panel with your Level 2 items as bold column headings and Level 3 items listed underneath.

At this point you have a working, text-only mega menu — free and app-less. Now let’s make it visual.

Step 3: Add Images to Your Mega Menu (Custom Code)

This is where we go beyond Dawn’s default. We’re going to edit one snippet file so that any menu item linked to a collection automatically displays that collection’s image above its title.

The beauty of this approach: you never hard-code image URLs. Change a collection’s image in Shopify admin, and the menu updates itself.

Locate the Mega Menu Snippet

1. Go to Online Store → Themes
2. On your duplicate theme, click ⋯ → Edit code
3. In the left file browser, open the Snippets folder
4. Click header-mega-menu.liquid

Inside this file, you’ll find a loop that outputs the Level 2 links. Look for a line similar to this (the exact classes may vary slightly by Dawn version):

liquid

{%- for childlink in link.links -%}
  <li>
    <a
      id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
      href="{{ childlink.url }}"
      class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
      ...
    >
      {{ childlink.title | escape }}
    </a>

Add the Image Code

Directly inside the <a> tag, just before the {{ childlink.title | escape }} line, paste this:

liquid

{%- if childlink.type == 'collection_link' and childlink.object.image -%}
  <img
    src="{{ childlink.object.image | image_url: width: 400 }}"
    srcset="{{ childlink.object.image | image_url: width: 300 }} 300w,
            {{ childlink.object.image | image_url: width: 400 }} 400w"
    sizes="(min-width: 990px) 200px, 150px"
    alt="{{ childlink.object.image.alt | default: childlink.title | escape }}"
    class="mega-menu__image"
    width="400"
    height="{{ 400 | divided_by: childlink.object.image.aspect_ratio | round }}"
    loading="lazy"
  >
{%- endif -%}

What this code does, line by line:

• Checks whether the menu item is a collection link and whether that collection has an image — so nothing breaks for page links or empty collections
• Uses Shopify’s image_url filter to serve a properly sized, CDN-optimized image
• Includes srcset and sizes so mobile devices download a smaller file (good for Core Web Vitals)
• Sets a proper alt attribute for accessibility and SEO
• Uses loading="lazy" so menu images never slow down your initial page load

Bonus: if some of your menu items link directly to products instead of collections, add this variation right after the block above to handle those too:

liquid

{%- if childlink.type == 'product_link' and childlink.object.featured_image -%}
  <img
    src="{{ childlink.object.featured_image | image_url: width: 400 }}"
    alt="{{ childlink.title | escape }}"
    class="mega-menu__image"
    width="400"
    height="{{ 400 | divided_by: childlink.object.featured_image.aspect_ratio | round }}"
    loading="lazy"
  >
{%- endif -%}

Click Save.

Add the CSS

Now let’s style those images so they sit nicely above each column heading. Open Assets → base.css, scroll to the very bottom, and paste:

css

/* ===== Mega Menu Images ===== */
.mega-menu__link--level-2 {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.mega-menu__image {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mega-menu__link--level-2:hover .mega-menu__image {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Keep columns tidy when some items have images and others don't */
.mega-menu__list > li {
  vertical-align: top;
}

Click Save, then preview your store. Hover over your main menu item — each collection column should now show its image with a subtle zoom effect on hover.

Feel free to adjust:

• aspect-ratio: 4 / 3 → change to 1 / 1 for square images or 16 / 9 for wide banners
• border-radius: 8px → set to 0 for sharp corners or 50% for circular category images
• max-width: 20rem → make images larger or smaller

Step 4: Assign Images to Your Collections

If some menu items show no image, it’s almost always because the collection itself has no image assigned. Fix it in two minutes:

1. Go to Products → Collections
2. Open a collection used in your menu
3. In the Image section on the right, upload a photo (1200 × 900 px works well for the 4:3 ratio)
4. Click Save
5. Repeat for every collection in your mega menu

Use consistent image styles across all collections — same background tone, same crop style. Mismatched images make even a well-coded menu look amateur.

Step 5: Test Your Mega Menu on Desktop and Mobile

Before publishing, run through this checklist:

• Desktop hover: every top-level item with children opens a full-width panel
• Images load: each collection column shows the right image
• Links work: click every Level 2 and Level 3 link — no 404s, no “#” dead links
• Mobile: open the hamburger menu on a phone. Dawn’s mobile drawer intentionally stays text-based (images in a narrow drawer hurt usability), and that’s fine — but confirm all links and nesting still work
• Speed check: run your homepage through PageSpeed Insights before and after. Because we used lazy loading and Shopify’s CDN, you should see no meaningful difference

Once everything passes, go to Online Store → Themes, click ⋯ → Publish on your duplicate, and your new mega menu is live.

Mega Menu Best Practices for Higher Conversions

Building the menu is half the job. Making it convert is the other half. From client projects, these are the practices that consistently move the needle:

Keep it to 4–6 columns. More than that and the panel becomes a wall of choices. If you have 12 categories, promote the 5–6 that drive revenue and group the rest under “More.”

Put your money-makers first. Menu items get read left to right. Your best-selling category belongs in the first column, not buried at the end.

Use real product photography, not icons. Photos of actual products outperform generic category icons because shoppers recognize what they came for.

Match menu labels to search language. If customers search “hoodies,” don’t label the link “Cozy Layers.” Clever names cost you clicks and keyword relevance.

Link Level 2 headings, don’t leave them dead. Every column heading should be clickable and point to its collection page. Dead headings frustrate users and waste internal-link SEO value.

Review quarterly. As your catalog grows, revisit the structure. A menu built for 30 products rarely fits a 300-product store.

Common Mistakes to Avoid

1. Editing the live theme directly. One typo in a Liquid file can break your header storewide. Always work on a duplicate.
2. Skipping the three-level structure. Dawn’s mega menu only triggers when a top-level item has nested children. Two flat levels = ordinary dropdown.
3. Uploading massive images. Don’t paste raw 4000px photos into collections and hope for the best — though our image_url filter resizes them, starting with reasonably sized uploads keeps your admin fast too.
4. Inconsistent image dimensions. The CSS aspect-ratio crop hides most of this, but wildly different source crops still look uneven. Standardize before uploading.
5. Forgetting alt text. The code pulls the collection image’s alt text automatically — but only if you’ve set it. Add descriptive alt text to every collection image for accessibility and image SEO.
6. Overstuffing the menu. A mega menu is for navigation, not your entire sitemap. Ten focused links beat forty noisy ones.

Troubleshooting: Mega Menu Not Showing or Images Missing

The mega menu option doesn’t appear in my Header settings. You’re likely on an old Dawn version. Check Online Store → Themes — if an update is available for Dawn, add the latest version from the Theme Store and rebuild your customizations, or apply this tutorial to your updated copy.

Hovering shows a normal dropdown, not a wide panel. Two usual causes: (1) “Desktop menu type” is still set to Dropdown — recheck Step 2; (2) your menu item has no Level 2 children, so there’s nothing to expand into a panel.

Images aren’t showing for some items. Check three things in order: the menu item is linked to a collection (not a page or URL), that collection has an image uploaded, and your code edit sits inside the Level 2 <a> tag rather than outside the loop.

Images show but look stretched or misaligned. Make sure the CSS block was saved at the bottom of base.css and that the class name in your Liquid (mega-menu__image) exactly matches the CSS selector. Class name typos are the #1 culprit.

The menu broke after a theme update. Theme updates replace code files, which wipes custom edits. Keep a copy of your snippet and CSS changes in a note or a Git repo, and re-apply them after updating. This takes five minutes when documented.

Everything is broken and I want to start over. This is exactly why we duplicated the theme. Delete the broken copy, duplicate the live theme again, and retry.

FAQ

1. Can I add a mega menu to Shopify Dawn without an app? Yes. Dawn includes a native mega menu — just set “Desktop menu type” to “Mega menu” in the theme editor’s Header settings. Adding images requires the small code snippet covered in this tutorial, but no app or monthly fee.

2. Does the Dawn mega menu work on mobile? Dawn converts the mega menu into a collapsible drawer menu on mobile. All your links and nesting carry over, but images are desktop-only by default — which is actually better for mobile usability and speed.

3. Will adding images slow down my store? Not with this method. The code uses Shopify’s CDN, responsive srcset sizes, and lazy loading, so menu images only download when needed and never block your initial page load.

4. How many menu levels does Dawn’s mega menu support? Three levels: the top-level header item, column headings, and links under each heading. That’s the standard structure for virtually all eCommerce mega menus.

5. My mega menu option is missing — why? You’re probably running an older Dawn version. Update to the latest Dawn from the Shopify Theme Store, or check whether your header section has the setting under a slightly different label like “Menu type.”

6. Can I show product images instead of collection images? Yes. If a menu item links directly to a product, use the product_link variation of the code (included above), which pulls the product’s featured image automatically.

7. Do I need to know how to code? No. This tutorial is copy-paste. If you can find a file and paste code in the right spot, you can do this. Just work on a duplicate theme so mistakes are risk-free.

8. Will this work on other Shopify themes besides Dawn? The concept works on any Online Store 2.0 theme, but file names and class names differ. Free Shopify themes built on Dawn’s architecture (like Craft, Sense, Studio, and Refresh) use nearly identical code, so this tutorial usually applies with minor tweaks.

9. What image size should I use for mega menu images? Upload collection images around 1200 × 900 px (4:3). The code serves resized 300–400 px versions automatically, so you get sharp images on retina screens without heavy files.

10. Can I add promotional banners inside the mega menu? Yes, but it requires extra custom Liquid — typically a hard-coded promo block or a metafield-driven image inside the mega menu snippet. Start with collection images first; add promos once the basics work.

11. Is a mega menu good for SEO? Generally yes. It creates consistent internal links from every page to your key collection pages, helping Google crawl and understand your site structure. Just keep the link count reasonable and use descriptive, keyword-relevant labels.

12. What happens to my mega menu if I update the Dawn theme? The built-in mega menu setting survives updates, but your custom image code and CSS will be wiped because updates replace theme files. Save your snippets somewhere safe and re-apply them after each update.

13. Why do some columns have images and others don’t? Only menu items linked to collections (or products, with the bonus code) that actually have an image will display one. Link the item to a collection and upload an image to that collection.

14. Can I make the mega menu open on click instead of hover? Dawn’s mega menu uses the HTML <details> element, which is click-based by default with hover behavior layered on. Changing the interaction pattern is possible with JavaScript edits, but for most stores the default behavior is exactly what shoppers expect.

Conclusion

You don’t need a $15/month app to give your Shopify store professional navigation. The Dawn theme already ships with a capable mega menu — most store owners just never flip the switch. And with one small Liquid snippet and a few lines of CSS, you can add automatic collection images that turn a plain text menu into a visual shopping experience.

To recap the whole process: duplicate your theme, build a three-level navigation menu with collection links, enable “Mega menu” in the Header settings, paste the image code into header-mega-menu.liquid, add the CSS to base.css, assign images to your collections, and test on desktop and mobile before publishing.

The result is a faster, cheaper, and more reliable mega menu than any app can offer — because it’s built directly into your theme, exactly the way Shopify intended.

If you want to keep leveling up your store’s design and functionality, the resources below will help you take the next step.

Keep Learning and Get Help

Watch the video version of this tutorial — sometimes it’s easier to follow along visually. You’ll find this walkthrough and dozens of other Dawn theme customization tutorials on my YouTube channel: youtube.com/@foysalshopifyexpert

Want it done for you? If you’d rather have an expert build your mega menu — or handle any Shopify customization, SEO, or store optimization project — you can hire me directly on Upwork: My Upwork Profile

Ready-made Shopify sections and code snippets. If you liked the copy-paste approach in this tutorial, I sell polished, plug-and-play Shopify sections (hero sliders, mega menus, popups, and more) with lifetime access and no monthly fees: ecommercethesis.gumroad.com

Learn Shopify professionally. If you want to go beyond one tutorial and build real freelancing skills with Shopify, check out my structured course: Freelancing with Shopify — or browse all available courses to expand your digital skills.

Stuck on a step? If something in this tutorial isn’t working on your store, you can reach me directly on WhatsApp for personal help: wa.me/8801991505652

Happy building — and enjoy your new app-free mega menu.