5 Ways to Set up a Shopify Menu with Images

Oct 12, 2021

You may have picked a dish on a menu at a restaurant simply because the picture was right next to it. You could imagine the food, and it looked good enough to order.

Similarly, your conversion rate can increase by adding images next to your Shopify menu items.

If the visitors can see what your products look like before going to product pages, they can choose the right one quickly. This reduces the likelihood of customers leaving your store because it is too hard to find what they want.

Fortunately, creating a Shopify menu with images is a straightforward process. Here are five ways to do so.

Option #1: Add Collection Images

Shopify Add Images To Menu

This is one of the most basic ways to set up a Shopify menu with images on your online store.

Shopify already makes this easy for you with the Navigation menu. And it applies to any Shopify theme.

Remember to use clear, well-lit, and authentic images. So your customers can have a good feel for the size, color, etc., of your products.

And since they are placed next to each other, it is essential to ensure all the images have the same size.

Create Image Associations

To associate an image with a collection, follow these steps.

  1. From the Shopify dashboard, go to Products > Collections.
  2. Click on the name of a collection.
  3. Click on the Upload image button.

Shopify Upload Collection Image

To associate an image with a product, follow these steps.

  1. From the Shopify dashboard, go to Products > All Products.
  2. Select a product.
  3. Click Add Image.

Shopify Add Product Image

Add Your Collections/Products to the Shopify Navigation menu

  1. From the Shopify dashboard, go to Online Store > Navigation.
  2. Select a menu.
  3. Select 'Add menu item (to ...)'.

Shopify Dropdown Menu

4. Enter the name of the new Shopify menu item. Then click on the 'Link field' to link to a collection or product.

Shopify Add Menu Item

5. Click on the Save menu button.

Now, the images should show up as part of your Shopify mega menu.

Option #2: Use code

The second way you can try to add images to Shopify menu is by using code. Shopify is built on the Liquid template language. Therefore, you can customize anything on your online store using this language.

So, if you or someone you know is IT savvy, you can try using the Shopify navigation menu code below to add images to your Shopify menu.

This solution is entirely free and not too complicated if you know some coding basics.

Note: If you make changes to the code, you cannot revert. Therefore, we recommend that you clone your theme first and work on the copy. That way, you can go back to the previous version if something is not functioning properly. To do so, go to Online Store > Themes > Actions > Duplicate / Clone.

Define Shopify Mega Menu Structure

To create a Shopify mega menu with images, you first need to define your store menu structure. To do this, create a drop-down list from the main menu.

You need to set up a three-level structure to use the mega menu in Shopify properly. The following instructions will show you how:

  1. From the Shopify dashboard, go to Online Store > Navigation.
  2. Select a menu.
  3. Select Add menu item (to ...).
Shopify Dropdown Menu

4. Enter the name of the new Shopify menu item. Then click on the 'Link field' to link to a collection or product.

Shopify Add Menu Item

5. Click on the 'Save menu' button.

Edit the 'header.liquid' File

  1. From the Shopify dashboard, go to Online Store > Themes > Actions > Edit Code.

Where to edit theme code in Shopify

2. Then, in the 'Section' directory, open the header.liquid file.

3. Next, scroll to the bottom, copy this code next to ']' and click 'Save'.

,
'blocks': [
{
'type': 'logo_image',
'name': 'Mega logo',
'settings': [
{
'type': 'checkbox',
'id': 'menu_enable',
'label': 'Enable this section',
'default': true
},
{
'type': 'image_picker',
'id': 'image',
'label': 'Image'
},
{
'type': 'text',
'id': 'mega_link',
'label': 'Select menu',
'default': '1'
},
{
'type': 'url',
'id': 'link',
'label': 'Main Link'
},
{
'type': 'text',
'id': 'title',
'label': 'Title'
},
{
'type': 'text',
'id': 'subtitle',
'label': 'Sub title'
}
]
}
]

Edit the 'site-nav.liquid' File

  1. First, in the Snippets directory, open the 'site-nav.liquid' file.

Edit mega menu theme code in Shopify

2. Then replace all the old code with this one and click 'Save'.

<ul class='site-nav list--inline {{ nav_alignment }}' id='SiteNav'>
{% for link in linklists[section.settings.main_linklist].links %}
{% comment %}
Check if third-level nav exists on each parent link.
{% endcomment %}
{%- assign three_level_nav = false -%}
{%- assign child_list_handle = link.title | handleize -%}
{% if linklists[child_list_handle].links != blank %}
{% for childlink in linklists[child_list_handle].links %}
{% assign grand_child_list_handle = childlink.title | handleize %}
{% if linklists[grand_child_list_handle].links != blank %}
{%- assign three_level_nav = true -%}
{% endif %}
{% endfor %}
{% endif %}
{% if linklists[child_list_handle].links != blank %}
<li class='site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}' aria-has-popup='true' aria-controls='SiteNavLabel-{{ child_list_handle }}'>
<a href='{{ link.url }}' class='site-nav__link site-nav__link--main'>
{{ link.title }}
{% include 'icon-chevron-down' %}
<span class='visually-hidden'>{{ 'layout.navigation.expand' | t }}</span>
</a>
<div class='site-nav__dropdown' id='SiteNavLabel-{{ child_list_handle }}' aria-expanded='false'>
<div class='sub-menu-inner-page'>
<div class='side-bar-menu'>
<ul class='sidebar-menu-list'>
{% for childlink in linklists[child_list_handle].links %}
{% if childlink.links == blank %}
<li class='{% if childlink.active %}site-nav--active{% endif %}' data-id='mega-parent-{{ childlink.handle }}'>
<a href='{{ childlink.url }}' class='site-nav__link main-bold-title'>
{{ childlink.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% assign image_block = false %}
{% assign linktitle = link.title | downcase %}
{% for block in section.blocks %}
{%- assign val = block.settings.mega_link | downcase -%}
{% if val == linktitle %}
{% if block.settings.menu_enable %}
{% assign image_block = true %}
{% endif %}
{% endif %}
{% endfor %}
<div class='middle-menu {% if image_block == false %}middle-menu-full{% endif %}'>
{% for childlink in linklists[child_list_handle].links %}
{% if childlink.links != blank %}
{% for grandlink in childlink.links %}
{% assign valitem = forloop.length %}
{% endfor %}
<ul class='middle-menu-list {% if valitem >= 15 %}col-2{%endif%}'>
<p class='' data-id='mega-parent-{{ childlink.handle }}'>
<span class='site-nav__link main-bold-title'>
{{ childlink.title | escape }}
</span>
</p>
{% assign item_count = 1 %}
{% for grandlink in childlink.links %}
<li class='site-nav__childlist-item'>
<a href='{{ grandlink.url }}' class='site-nav__child-link' >
{{ grandlink.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</div>
{% if image_block == true %}
<div class='image-section mega-list mega-list-logo'>
{% for block in section.blocks %}
{%- assign val = block.settings.mega_link | handleize -%}
{% if val == child_list_handle %}
{% if block.settings.menu_enable %}
{% unless block.settings.link == blank %}<a href='{{ block.settings.link }}'>{% endunless %}
<div class='img-box'>
<img src='{{ block.settings.image | img_url: '500x500' }}'>
<div class='text__section'>
{% unless block.settings.title == blank %}<h3>{{ block.settings.title }}</h3>{% endunless %}
{% unless block.settings.subtitle == blank %}<p>{{ block.settings.subtitle }}</p>{% endunless %}
</div>
</div>
{% unless block.settings.link == blank %}</a>{% endunless %}
{% endif %}
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</li>
{% else %}
<li {% if link.active %}class='site-nav--active'{% endif %}>
<a href='{{ link.url }}' class='site-nav__link site-nav__link--main'>{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>

Don't forget to click the Save button after editting

Add CSS and JavaScript Code

  1. In the 'Assets' directory, open the 'theme.scss.liquid' file. Afther that, copy the following code at the end of the file:

.site-nav, .site-nav--has-dropdown, .site-header {
position: unset;
}
.site-nav__dropdown {
width: 100%;
left: 0;
right: 0;
background-color: #fff;
}
.site-nav__childlist {
display: block;
}
.site-nav__dropdown .side-bar-menu{
float: left;
text-align: left;
padding-top: 25px;
padding-right: 30px;
padding-bottom: 25px;
width: 150px;
padding-right: 10px;
}
.site-nav__dropdown .side-bar-menu .sidebar-menu-list li a{
text-transform: uppercase;
font-weight: bold;
padding: 0 20px 10px 0;
font-size: 13px;
}
.site-nav__dropdown .middle-menu{
float: left;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 10px;
padding-right: 10px;
width: calc(100% - 370px);
position: relative;
display: flex;
}
.site-nav__dropdown .middle-menu .middle-menu-list{
width: 20%;
float: left;
text-align: left;
position: relative;
padding-top: 27px;
}
.site-nav__dropdown .middle-menu .middle-menu-list p{
position: absolute;
top: 0;
margin-bottom: 0;
width: 100%;
}
.site-nav__dropdown .middle-menu .middle-menu-list span.main-bold-title{
font-size: 13px;
font-weight: bold;
padding: 0 20px 10px 0px;
text-transform: uppercase;
display: block;
color: #000;
}
.site-nav__dropdown .middle-menu .middle-menu-list a.site-nav__child-link{
text-transform: capitalize;
padding: 0 20px 10px 0px;
font-size: 13px;
font-weight: 300;
}
.site-nav__dropdown .image-section{
float: left;
padding-top: 25px;
padding-bottom: 25px;
position: relative;
width: 220px;
height: 100%;
}
.site-nav__dropdown .image-section .img-box{
position: relative;
}
.site-nav__dropdown .image-section .text__section{
position: absolute;
top: 50%;
left: 50%;
width: 90%;
transform: translate(-50%,-50%);
color: white;
}
.site-nav__dropdown .image-section .text__section h3{
font-size: 14px;
text-transform: uppercase;
color: white;
margin-bottom: 5px;
}
.site-nav__dropdown .image-section .text__section p{
font-size: 13px;
text-transform: inherit;
color: white;
font-weight: normal;
}
.site-nav__dropdown .sub-menu-inner-page{
max-width: $width-site;
display: block;
margin: 0 auto;
padding: 0 55px;
overflow: auto;
}
.site-header .grid--table>.grid__item {
vertical-align: bottom;
}
.site-nav {
margin: 0;
}
.site-nav > li {
padding: 20px 0;
}
.site-nav--active-dropdown .site-nav__dropdown {
display: block !important;
}
.img-box .text__section h3,
.img-box .text__section p {
text-align: center;
}
.mega-list-logo a {
padding: 0;
}
.site-nav--has-dropdown:hover .site-nav__dropdown{ display: block !important; }

2. Then, open the 'theme.js' file from the 'Assets' directory.

3. Next, find 'theme.Header' in the code.

Add code to mega menu

4. Finally, replace 'function init()' with the following code, then press 'Save'.

function init() {
cacheSelectors();
$(selectors.siteNavHasDropdown).on('mouseenter', function() {
var $el = $(this);
showDropdown($el);
});
$('.site-nav__dropdown').on('mouseenter', function() {
$(this).show();
$(this).parent().addClass(config.activeClass);
});
$(selectors.siteNavHasDropdown).on('mouseleave', function() {
hideDropdown(cache.$activeDropdown);
});
$('.site-nav__dropdown').on('mouseleave', function() {
hideDropdown(cache.$activeDropdown);
$(this).hide();
});
cache.$subMenuLinks.on('click.siteNav', function(evt) {
// Prevent click on body from firing instead of link
evt.stopImmediatePropagation();
});
}
function showDropdown($el) {
$el.addClass(config.activeClass);
var headerHeight = $('#shopify-section-header').outerHeight(),
headerNav = $el.find('.site-nav__dropdown').outerHeight();
$el.find('.site-nav__dropdown').css({top: +headerHeight+ 'px'});
cache.$activeDropdown = $el;
}
function hideDropdown($el) {
// remove aria on open dropdown
$el.removeClass(config.activeClass);
// reset active dropdown
cache.$activeDropdown = $(selectors.siteNavActiveDropdown);
$(selectors.body).off('click.siteNav');
$(window).off('keyup.siteNav');
}

Add Images for Your Shopify Mega Menu

An image in Shopify mega menu makes it attractive

  1. From the Shopify dashboard, go to Online Store > Themes > Customize.
  2. Click 'Header' on the left side of the screen. After that, scroll down to the bottom and click on 'Add mega logo'.
  3. Create a Shopify drop-down menu with images by selecting one in the 'Featured Image' setting. In addition, you can associate the image with a collection, product, etc., by selecting a link in the 'Slides link' setting.
  4. Finally, save your changes to make sure you do not lose all of your progress.

Option #3: Use a Shopify Mega-menu App

In the third way, you can use any Shopify mega-menu app to set up a Shopify menu with images easily. There are many options on the Shopify app store.

Among them, we will recommend some of the best menu apps for Shopify to help you make decisions faster.

Buddha Mega Menu Navigation

  • Pricing: $9.95/month (free plan available)
  • Rating: 4.8/5 (1003 reviews)

Buddha Mega Menu makes it easy to design the menu in seconds.

This is one of those rare apps that does not require menu creation in the Shopify Navigation menu and coding experience. It is also one of the simplest Shopify mega-menu apps and is compatible with almost all Shopify themes.

With this app, you can display your products not only with images but some eye-catching things like countdown sales, too.

mega menu submenu drop down navigation sale discount product bar

Their support system is pretty impressive, but sometimes they might not be as responsive as you would like.

Buddha Mega Menu has two plans, including a free one. The other one costs $9.95/month.

Mega Menu

  • Pricing: from $7.90/month (free plan available)
  • Rating: 4.8/5 (354 reviews)

Mega Menu is a highly customizable, fully responsive app for your Shopify store.

With its intelligent installation method and user-friendly interface, this app can help you create your first Shopify mega menu with images within minutes.

It has some pre-customizable styles for some popular themes. It is also compatible with almost all Shopify themes and supports both horizontal and vertical menus.

Besides adding images to the menu, you can also add icons or badges and highlight specific items. And you can contact their excellent support system if you have any questions.

block links, product in menu, banner image, tab

Mega Menu has three plans, including a free one. The other two cost $7.90 and $14.90 per month.

Meteor Mega Menu

  • Pricing: from $8/month (free plan available)
  • Rating: 4.6/5 (210 reviews)

Meteor Mega Menu has several thoughtfully pre-designed templates to organize your products, collections, and pages on the menu.

8 jaw-dropping mega menu styles with dropdown navigation

You can use these templates to quickly create a Shopify menu with a professional appearance within minutes.

It allows you to customize the menu with photos, product information, etc. You can also add images for every product on your menu.

The app is also effortless to use. You just need to install it and choose a theme. And it will do the rest.

Their support system operates 24/7 via chat or email, so you can reach them immediately whenever you get stuck.

The app has three plans, including a free one. The other two are priced at $8 and $14 per month.

Option #4: Buy a Designed Premium Theme

If you want your Shopify store to be unique, not just with some images on the menu, you can consider purchasing an exclusive theme design.

With premium themes from any agency, you can easily set up a Shopify menu with images by using the Shopify Navigation menu.

We present one of the best agencies out there. They are Maestrooo. For more detailed information, it is best to contact them directly. Their support system is astounding. You will get a response back within an hour.

Option #5: Hire a Professional to Set up Shopify Menu with Images for You

Last but not least, if you want something extra special on your Shopify menu and all the solutions above seem not to make it happen, you can hire an expert to help.

There will always be one professional ready to help you achieve your dream store.

The best thing is that this is the simplest thing to do. All you need to do is to contact an expert and let them help you.

Now, you may be wondering how to find an expert to solve this? No need to worry! Shopify offers excellent support, including its own trusted expert service. From marketing to setting up an online shop, whatever you need, someone is there to help.

As a result, you can easily hire an expert and get the job done in two ways:

  • Search through all the services offered by experts on the web and request a live quote.
  • Create a job yourself, describe what you need precisely, and get recommendations from referred experts.

You can visit experts.shopify.com for more information.

Final Words

Just remember that the first impression of your online store is decisive. If your customers see nothing interesting at a glance, they will not take any further action.

In this article, we showed you 5 different ways to set up a Shopify menu with images. But remember, an unusual menu is not a guaranteed way to promote your business.

What you are selling is more important. This is why we recommend you do product research before anything else.

Hopefully, this article is valuable to you and will help your business grow. Good luck!


Disclosure: When you purchase a service or a product through our links, we sometimes earn a commission.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.