DAWN THEME - How to add collection thumbnails to megamenu

Store Design
, , ,
1

Wanting to add the collection thumnails to a megamenu on the DAWN theme how would i go about this? thank you

3 Likes
2

Hey @JGBowie,

Could you please share the reference site link along with your store url so that I can provide you the solution code.

1 Like
3

@JGBowie You can add collection thumbnails to your megamenu in Dawn by editing your theme’s code a bit. The general approach is:

  1. Go to Online Store → Edit Code → Sections → header-mega-menu.liquid (or similar, depending on your version).

  2. Inside the menu loop, where collections are listed, add the collection image snippet:

    {% if link.type == 'collection_link' and link.object.image %}
  <img src="{{ link.object.image | image_url: width: 100 }}" alt="{{ link.title }}">
{% endif %}

  3. Then use CSS to size and align the images properly within the menu dropdown.

If you’re not comfortable editing Liquid, you can also use a megamenu app that supports images it’s easier to manage visually.

4

Hi @JGBowie

Sure! Do you have any design example or a reference link for how you want the collection thumbnails to look in the mega-menu?

Best regards,
Devcoder :laptop:

5

im not to sure exactly where to put this code in the liquid

6

Hi @JGBowie
Do you mean that the menu item in your megamenu is linked to a collection, and you want to display the collection’s thumbnail image, similar to this theme: Ecommerce Website Templates - Free and Premium Themes for Your Online Store.?
Could you share more details about the layout you’re looking for so we can assist you better?

7

@JGBowie You’ll want to place that snippet inside the loop that outputs each menu link in your header-mega-menu.liquid. Look for something like {% for link in link.links %} — right below where the link title is rendered (e.g., {{ link.title }}). That’s the right spot to insert the image code so it shows up beside each collection name.

8

@JGBowie If you’re unsure, you can share a screenshot of that section of your code and I can point out the exact line.

9

hi @JGBowie

To archive that, you need customize menu’s code because the dawn theme don’t support mega menu can add image, if you don’t familiar with customize or know how to implement, you can let me know, i will help you do it.

10

Hi @JGBowie,

If you want to add collection thumbnails to a mega menu on the Dawn theme, a simple way is to use Tapita: AI Sections & Blocks. It has a Mega Menu section that lets you display collection images directly in your menu.

image-demo-mega-menu
image-demo-mega-menu1083Ă—740 112 KB

→ You can check out a demo here to see it in action: Tapita Mega Menu Demo

It’s fully customizable and works directly in the theme editor, so you don’t need to touch any code.

Hope this helps,

Reply this if you have any further questions.

Sophia from the Tapita team.

11

@JGBowie
You can add collection thumbnails to the Dawn megamenu by editing the megamenu section in your theme and inserting a block that pulls each collection’s image and title. Basically, you connect the menu item to a specific collection, then customize the megamenu layout so it displays the collection image next to the name. After that, you style it in your theme settings so the thumbnails appear neatly in the dropdown.

This gives you a visual megamenu with collection images instead of just text.:hugs: