How to add images in menus drop down

[JGBowie]

Using the DAWN theme how would I go about using the collections image as the menu item in the drop down menu? if that makes sense. When clicking shop and is has 2 collections wanting it to show the photo i have added as the collections image then its name under the image and both next to each other going across. if that makes sense

Suki Co

pass: access

thank you

[Parampreet]

Hi @JGBowie

It will need custom code to add images to menu. Please follow below:

Go to Online Store > Themes > Edit Code > sections/header.liquid or header-menu.liquid

Search below code:

{% if link.links.size > 0 %}
      <ul class="sub-menu">
        {% for sublink in link.links %}
          <li><a href="{{ sublink.url }}">{{ sublink.title }}</a></li>
        {% endfor %}
      </ul>
    {% endif %}

Replace it with:

{% if link.links.size > 0 %}

{% for sublink in link.links %} {% assign collection_handle = sublink.object.handle %} {% assign collection = collections[collection_handle] %}
• {% if collection.image %} {% endif %} {{ collection.title }}
{% endfor %}

{% endif %}

Add below CSS in Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.
or
assets/base.css or assets/component-menu.css

.mega-menu {
display: flex;
gap: 20px;
padding: 10px 0;
}

.mega-menu-item {
text-align: center;
flex: 1;
}

.mega-menu-item img {
max-width: 150px;
height: auto;
display: block;
margin: 0 auto 5px;
}

.mega-menu-item span {
display: block;
margin-top: 5px;
font-weight: 500;
}

[Parampreet]

Sorry for above replace code section, below is the correct format for the code which needs to be replaced

Replace it with:

{% if link.links.size > 0 %}

{% for sublink in link.links %} {% assign collection_handle = sublink.object.handle %} {% assign collection = collections[collection_handle] %}
• {% if collection.image %} {% endif %} {{ collection.title }}
{% endfor %}

{% endif %}

[JGBowie]

i cant find this code?

[Parampreet]

if you didn’t find above code, please check under sections for these files:

header.liquid

header-navigation.liquid

header-menu.liquid

Dawn usually handles the menu in header-navigation.liquid.

[JGBowie]

i dont have a header navigation liquid and i have now looked for it through them all

[Dan-From-Ryviu]

You can try to refer to the instructions of @Parampreet in header-dropdown-menu.liquid file.

[JGBowie]

@Parampreet

{% if link.links.size > 0 %}

{% for sublink in link.links %} {% assign collection_handle = sublink.object.handle %} {% assign collection = collections[collection_handle] %}* {% if collection.image %} {% endif %} {{ collection.title }}
{% endfor %}

{% endif %}

it just gives me errors

[Parampreet]

{% if link.links.size > 0 %}
  <ul class="sub-menu mega-menu">
    {% for sublink in link.links %}
      {% assign collection_handle = sublink.object.handle %}
      {% assign collection = collections[collection_handle] %}
      <li class="mega-menu-item">
        <a href="{{ collection.url }}">
          {% if collection.image %}
            <img src="{{ collection.image | img_url: '300x300' }}" alt="{{ collection.title }}" />
          {% endif %}
          <span>{{ collection.title }}</span>
        </a>
      </li>
    {% endfor %}
  </ul>
{% endif %}

[Parampreet]

There is some formatting issue in code while publishing it, Please try this updated code snippet.

[JGBowie]

FileSaveError: Liquid syntax error (line 103): ‘endif’ is not a valid delimiter for for tags. use endfor this is the error im getting

[PaulNewton]

It’s an advanced theme customization that varies by theme.

If you must DIY just search using the theme name + something like “mega menu” “menu with images” etc
As this type of stuff is very common for merchants to burn their time on.
https://community.shopify.com/search?q=dawn+megamenu

If you do have time to spend then try the AI assistant instead to generate a custom navigation section that meets requirements, though you will still need to overcome the problems of working with an LLM “ai”.

If your making a lot of changes to a base theme you should probably look at other free themes to be sure the wanted features aren’t already available in a better theme; or could just be transplanted from one theme to another; e.g. Refresh is dawn based, or horizon based themes having different features etc.

If you still can’t get it working and want to start saving time to work on bigger business matters then reach out to me for services.

[JGBowie]

i have months to get this sorted , so ill keep trying to get it sorted

[Parampreet]

Can you please share the screenshot of the code where you added this?

[devcoders]

Hi @JGBowie

Have you still not been able to resolve this issue?

[JGBowie]

[Tapita-support2]

Hi @JGBowie — makes sense and it’s doable two ways:

1) Quick code approach (Dawn theme)

1. Go Online Store → Themes → Actions → Edit code.

2. Open sections/header.liquid or snippets/header-menu.liquid (file name varies by theme).

3. Find the loop that renders your dropdown menu links and replace (or extend) the menu item markup to pull the collection object image when the menu link points to a collection.

Notes:

• In some themes link.object.object_type may be collection or you can test link.type == 'collection_link'.

• Adjust sizes/classes to make images and titles line up horizontally (use CSS grid/flex).

• Always duplicate your theme and test in the duplicate before publishing.

2) No-code / easier option — Using the Tapita: AI Sections & Blocks

If you prefer not to edit Liquid, Tapita: AI Sections & Blocks includes a customizable mega-menu section that can show collection images + titles in rows/columns out of the box. It’s faster and safer for merchants who don’t want to touch theme code.

• You can view the mega menu demo here.
• Here’s your quick guide: Customizing the Mega Menu Section

Hope this helps!

Sophia - The Tapita team.