Adding images into navigation

New Member
1 0 0


I'm trying to add more images to my navigation menu.

At the moment I have a collection linked to each submenu item displayed below. 

The only problem with this method is that the images are limited by the number of submenu items.

Is there a better way to display images in the navigation or a quick fix around this?




  <div class="row">
    {% for link in mega_menu.links %}	
      <div class = "column">
        <a href="{{ link.url }}"><p>{{ link.title }}</p></a>
        <a href="{{ link.url }}">{{ link.object.image | img_url: 'small' | img_tag }} </a>
    {% endfor %}


Any help would be greatly appreciated,


Shopify Staff
Shopify Staff
528 52 65

Hey, @Brook.

Elias here with Shopify Support. Thank you for reaching out. 

I understand you're looking for a way to add more images to your navigation menu. Though custom coding falls outside the scope of support with our Theme Support, there is a third-party app that may be able to help accomplish this - called Buddha Mega Menu. If you need any help with this app, you can always reach out to the developer through the contact information found in the Support section on their app's page. 

Here's an example screenshot from the app's gallery:


If you prefer to customize your theme's coding, that is definitely an option and you can hire a developer for this on Shopify Experts. Shopify Experts are experienced with custom coding and they'll be able to assist you with your theme.

I hope this provides a couple of options for you to explore. If you have any other questions on this topic, don't hesitate to let me know!


Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog