Adding image to Mega Menu - Impulse Theme

Store Design
,
1

Hello

I would like to add a promotional image to my mega menu ( not a collection image).

Like this

TBS2023_0-1715666662546.png
TBS2023_0-1715666662546.png984×377 81.2 KB

https://www.thebodyshop.mt/

This website is also using the same theme so i would just like to know how they did it . if anyone can help.

Thanks

2

Hi @TBS2023 ,

One of the most basic ways to add images to the Shopify mega menu is to use a collection feature image.

First, you need to upload an image to your collection that are linked in the navigation menu.

After that, to add an image to Shopify mega menu, you will need to make sure the menu item has an image associated with it by linking it to a collection.

Here is the sample code.


{% for link in linklists.links %}
- {% if link.type == “collection_link” and link.object.image %}
  {{ link.object.image | img_url: ‘small’ | img_tag }}
  {% endif %}
  {{ link.title }}

{% endfor %}

Please don’t hesitate to reach out if you need further help optimizing or customizing your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

3

Thank you but i do not want a Collection image. I want the image to appear on the side and be separate from the menu. Like the photo i added

4

@LuffyOnePiece

Can you find out how the other site did it? through code i suspect?

5

Hello,
What you’re describing is exactly why we made Meteor Mega Menu. All of our menu images can be customized and I think “Fortress” would be the closest to what you’re looking for.
If you need help customizing a look, our support is always ready to help guide you on your way.
I hope this helps :blush:

6

My issue with an App is that i have a multi language website - of which arabic is the second one -

All Apps are payable for translations

7

I see that problem ?
If your theme has multi-language support then you can use a free Shopify app called “Translate and Adapt” in conjunction with a mega menu app like Meteor Mega Menu, conversely something like “qikify Mega Menu” has multiple languages on their app’s demo store.
I hope this helps :blush:

8

Thank you but I would ideally like to do it without an app and also know how the other store managed to do it without?

Is it a big customization or just a few twerks?

9

Hi,

If it is still not fixed. Please get connected so that I can help you out.

Thank you

10

I fixed this if anyone is interestes

11

Title: Shopify Impulse theme: show mega menu images for product, collection and article links

I was working on a Shopify store using the Impulse theme and wanted the desktop mega menu to show images not only for collection links, but also for product links and article/blog links.

By default, the theme logic I found only displayed a mega menu image when the menu item linked to a collection and that collection had an image. This meant product links did not show images, and article/blog links also failed.

The relevant file was:

snippets/header-desktop-nav.liquid

There were two places that needed updating:

  1. The layout detector that checks whether any mega menu column has an image.
  2. The actual image output block that renders the image above the menu column.

The original logic looked broadly like this:

{% if show_images and childlink.url contains '/collections/' and collections[childlink.object.handle].image != blank %}

This limits image support to collection links only.

I replaced that logic with a more flexible image assignment pattern:

{%- liquid
  assign childlink_image = blank
  assign childlink_image_alt = childlink.title

  if childlink.type == 'collection_link'
    if childlink.object.image != blank
      assign childlink_image = childlink.object.image

      if childlink.object.image.alt != blank
        assign childlink_image_alt = childlink.object.image.alt
      endif

    elsif childlink.object.products.first.featured_image != blank
      assign childlink_image = childlink.object.products.first.featured_image

      if childlink.object.products.first.featured_image.alt != blank
        assign childlink_image_alt = childlink.object.products.first.featured_image.alt
      endif
    endif

  elsif childlink.type == 'product_link'
    if childlink.object.featured_image != blank
      assign childlink_image = childlink.object.featured_image

      if childlink.object.featured_image.alt != blank
        assign childlink_image_alt = childlink.object.featured_image.alt
      endif
    endif

  elsif childlink.type == 'article_link'
    if childlink.object.image != blank
      assign childlink_image = childlink.object.image

      if childlink.object.image.alt != blank
        assign childlink_image_alt = childlink.object.image.alt
      endif
    endif

  elsif childlink.type == 'blog_link'
    if childlink.object.articles.first.image != blank
      assign childlink_image = childlink.object.articles.first.image

      if childlink.object.articles.first.image.alt != blank
        assign childlink_image_alt = childlink.object.articles.first.image.alt
      endif
    endif
  endif
-%}

{%- if show_images and childlink_image != blank -%}
  <a href="{{ childlink.url }}" tabindex="-1" aria-hidden="true">
    <div class="megamenu__column-image svg-mask svg-mask--{{ image_aspect_ratio }}">
      {%- render 'image-element',
        img: childlink_image,
        sizeVariable: '20vw',
        alt: childlink_image_alt,
        classes: 'megamenu__collection-image',
        loading: 'eager',
      -%}
    </div>
  </a>
{%- elsif any_column_has_image -%}
  <div class="megamenu__column-image-placeholder svg-mask svg-mask--{{ image_aspect_ratio }}"></div>
{%- endif -%}

For the detector block near the top of the mega menu logic, I used the same basic idea but only needed to set any_column_has_image = true if a valid image was found.

Important notes:

  • This worked for product links once childlink.type == 'product_link' was added.
  • Article links may not work if the menu item is actually a blog link rather than a direct article link.
  • For blog links, childlink.type == 'blog_link' can be used and the image can fall back to the first article image.
  • The placeholder block should be kept, otherwise columns can become misaligned when only some menu columns have images.
  • Use Liquid comments when testing old code, not HTML comments, because Liquid inside HTML comments can still run.

This makes the Impulse mega menu more flexible by allowing images from:

  • Collection images
  • First product image in a collection
  • Product featured images
  • Article featured images
  • First article image in a blog