How to make Mega menu with image

[amisha-29]

I want to make a Mega menu with image option, and currently I'm customising the dawn theme. Can someone please guide me how can i make a mega menu with image showing.

[Emmiliandev · Accepted solution]

Creating a mega menu with images in Dawn is totally doable with just a few tweaks. First, in your Shopify admin go to Online Store Navigation and build out a menu where each top- evel item has its own sub-menu links. Then you will attach an image to each of those parent links using a simple metafield (you can call it something like menu.image).

Next, in your Dawn theme is header.liquid (or better yet, a new snippet called mega-menu.liquid), you will loop through your menu items and for each one grab that metafield URL. Wrap your sub-menu links in a flex or grid container alongside an <img> tag pointing to your menu.image value. A little CSS magic think display: grid; grid-template-columns: 2fr 1fr; gap: 20px;—will get your links on one side and the image on the other.

Finally, drop your mega-menu snippet into the header where Dawn normally renders its dropdowns, and adjust the sho hide logic so it only appears for those parent items.

If you would like the exact Liquid snippet and CSS rules, just let me know i will be very happy to share the full code! 😊

[amisha-29]

Hey can you give the full code so i can properly analyze the code and understand it properly. Because I was trying to use meta field but I'm not getting understand properly that how can i connect my images using meta field how it works I'm new to Shopify so I'm getting confused a lot . And thanku soo much for explaining me in a simple words. 
Thank you.

[Emmiliandev]

Am sorry for the unavailability am working on a project that really take my time, Did you still need any help for something?

[amisha-29]

No worries, I got the answer.. Thankyou😊