A mega menu is a great way to organize your store’s products and collections in a clean, user-friendly layout. It helps your customers find what they’re looking for faster and makes the overall shopping experience smoother — which means more chances of getting that sale!
If you’re using the Shopify Dawn theme, you might have noticed that it doesn’t support image-based mega menus by default. But don’t worry — in this guide, you’ll learn exactly how to add a custom mega menu with images on Shopify without using any apps.
You don’t need to be a developer or have advanced technical skills. Just follow the simple 3 steps (with helpful screenshots), and you’ll have a fully functional Shopify navigation menu with product images that looks professional and works beautifully.
Follow These 3 Steps to Add a Mega Menu with Images
- Prepare your menu, images, and metafields
- Edit a few theme files in the Dawn theme
- Save all your changes and preview your store, your new mega menu with images is ready
Let’s build a mega menu with image for your store and ensure a better customer shopping experience.
Step 1: Prepare Your Images and Menu
Before we start editing any code, let’s first set up the structure and images for your Shopify mega menu. We’ll do this in a few quick steps using Shopify’s built-in features- no app needed!
Create a Metafield for Mega Menu Images
This step allows you to link images to collections and use them later in the mega menu.
- Go to Online Store > Settings > Custom Data > Collections
- Click Add Definition
- Set the name as: Header Mega Menu
- Type: File
- The namespace and key will automatically become custom.header-mega-menu
- Save the definition
Now, the Metafield Definition Setup is done.
Create Collections and Add Images
Now, let’s create product collections and assign images to them using the metafield you just created. Follow the step-by-step instructions below, or you can follow the screenshots.
For each product category:
- Go to Products > Collections
- Click Create Collection
- Set the title (e.g., Headphones)
- Scroll down to the Metafield section called Header Mega Menu
- Upload the image that represents this collection
- Save the collection
Repeat the same steps for the rest of your mega menu categories. For example:
- Headphones
- Mobile
- Watch
- White Shoes
- Black Shoes
- Blue Shoes
- T-Shirt
- Long Sleeves
- Hoodies
Structure Your Menu Items
Now let’s structure the navigation menu items –
- Go to Online Store > Navigation
- Create a fresh menu or edit the one you already have
- Let’s say a top-level menu item named ‘Shop All’ is added – this will be your mega menu trigger
Under Shop All, add submenu groups like:
- Clothing
- Electronic Gadgets
- Shoes
Then, under each group, add the actual product collections (these are the items you created earlier):
- Under Clothing: T-Shirt, Long Sleeves, Hoodies
- Under Electronic Gadgets: Mobile, Watch, Headphones
- Under Shoes: White Shoes, Black Shoes, Blue Shoes
Assign each submenu with just drag and drop, and save your changes. Below is the Menu Structure Example
For each product item:
- Label it properly (e.g., T-Shirts)
- Use the Link to > Collections > [your created collection]
- Save the menu
Change menu type to mega menu
Now, go to themes and click on customize. Check that the right Menu is selected from the dropdown and the Menu type is Mega menu.
That’s it for the preparation phase! You’ve now:
- Created image metafields
- Linked images to product collections
- Built a 3-layer menu structure
- Finalized your store’s navigation setup
Now it’s time to bring it all together with some theme code changes in the next step.
Step 2: Edit the Theme Files
Now that your collections and menu structure are ready, it’s time to display those product images inside your Shopify mega menu using the Dawn theme. This step involves editing just three theme files — no app required!
Files You’ll Edit:
- header-mega-menu.liquid (Located in Snippets)
- base.css (Located in Assets)
- component-mega-menu.css (Located in Assets)
Update header-mega-menu.liquid
Open the header-mega-menu.liquid file from snippets, find the code shown below, and remove it.
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li> Instead of the above code, paste the code below and save it.
<li class="mega-menu__item-with-image">
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
<div class="menu-item-content flex-align">
<span>{{ grandchildlink.title | escape }}</span>
{% if grandchildlink.object.metafields.custom.header_menu_image != blank %}
<img
src="{{ grandchildlink.object.metafields.custom.header_menu_image | image_url: width: 100 }}"
alt="{{ grandchildlink.title }}"
width="50"
height="50"
class="mega-menu__image"
>
{% endif %}
</div>
</a>
</li>This code checks if an image is added to the collection metafield and displays it beside the product name in the Shopify navigation menu.
Add CSS Styles in base.css
Scroll to the bottom of your base.css file and add the following styles and save. This will align your menu text and images nicely.
.flex-align {
display: flex;
align-items: center;
justify-content: flex-start;
gap: .4rem;
}
.menu-item-content span {
margin-right: 0.3rem;
}
.flex-align span {
flex-grow: 1;
}
.mega-menu__image {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 4px;
}
Adjust Columns in component-mega-menu.css
We’ll now reduce the number of columns to 3 for better spacing when images are added.
Find this css code in component-mega-menu.css :
.mega-menu__list {
display: grid;
gap: 1.8rem 4rem;
grid-template-columns: repeat(4, minmax(0, 5fr));
list-style: none;
}
Replace the above CSS code with the one below, then save the file
.mega-menu__list {
display: grid;
gap: 1.8rem 4rem;
grid-template-columns: repeat(3, minmax(0, 5fr));
list-style: none;
}
This will create a cleaner, more spacious layout for your custom mega menu in Shopify.
Step 3: Save all your changes and preview your store, your new mega menu with images is ready.
That’s it! You’ve:
- Added images to your product collections using metafields
- Linked those images to your Shopify navigation menu
- Edited the necessary theme files to display your mega menu with images
- Customized the layout for a clean look in the Dawn theme
Dont forget to save your changes. Now, preview your online store.
You should now see a beautiful, image-rich mega menu appear when clicking on Shop All – helping your customers find products faster and improving the overall shopping experience.
Final Thoughts
That’s it! You’ve successfully added a custom Shopify mega menu with images to your Dawn theme — and all without using any app. This enhanced navigation menu gives your customers a smoother shopping experience and helps them find products faster.
Want to use a different set of menu items or collections? No problem! Just follow the same steps, update your menu structure inside Shopify, and add the relevant images through metafields. The process remains the same – only the content changes.
With just a few simple adjustments, your Shopify navigation menu will look professional and function flawlessly. Keep experimenting and make your store stand out!
