This website uses cookies to make your experience better. You can read more about cookie terms here.

How to Setup Shopify Menu with Images?

Some Simple Solutions to Add Shopify Images in Menu

When it comes to the primary navigation menu which is in your website’s header, make sure your Shopify store menu/ categories are clear and meaningful. Not only this, but your Shopify menu with images is a great source for increasing conversion rate and decreasing the bounce rate.

A good navigation menu with images help customers find what they are looking for in a quick and efficient way. We all know, websites have only a few seconds to grab the attention of the online customer, so you better guide them to the information right away.

In this blog post, we will share an easy to follow, step by step tutorial on creating a Shopify menu with images. We will show you multiple ways starting with:

Table of Contents

1. Shopify Theme with a Mega Menu Support

If you have a theme which supports multiple mega menus, associate images with each product/collection so that they could show in the navigation menu.

Step 1: Associate images with products/collections

How to associate images with the collection?

1-Open Shopify dashboard.

2-Press ‘products’ and go to ‘collections’.

3-Pick the collection you want the image from.

4-Upload image on the right.

Shopify menu with images

How to associate images with the products?

1-Select ‘products’>’all products’

2-Choose the product you want image to attach

3-Images section > Add images

Shopify menu with images

Step 2: Add products/collections to menu

1-Open Shopify dashboard.

2-Go to ‘online store’> ‘navigation’.

3-Choose the menu you want images for.

Shopify menu with images

4-Click add menu item.

5-Add ‘name/title’ and ‘link’ to the product or collection you want. Hit add.

6-Click ‘Save menu’.

Shopify menu with images

Images would start reflecting in the mega menu.

If you want to customize your navigation menus further, you need to edit the theme editor and modify code. Scared of getting things wrong? Hire an Expert Shopify Developer for professional assistance .

Adding images via Meteor mega menu app

Meteor mega menu app is not just ideal for adding images but it helps in transforming Shopify main menu and drop-down menus.

It has some pre-built templates.

Biggest plus of using Meteor mega menu app is, it works with all Shopify themes. You can have dropdown menu with images no matter what theme you are using for your Shopify store.

Product images display in the ICON theme dropdown menu

In order to show you ‘how to display product images in the menu’ we took ICON theme as an example.

This is a very simple setup often overlooked or missed by online merchants.

If your theme has a dropdown menu, it would show in the theme settings. Anyhow, let’s explore this in ICON theme.

Here’s the dashboard showing the dropdown menu.

Shopify menu with images

From Shopify dashboard, go to Sales channels > online store > navigation.

Shopify menu with images

Click on the main menu as highlighted in the above screenshot. After opening the ‘Main menu’, you will see ‘Shop’ with a dropdown.

Shopify menu with images

Press ‘edit’ button given next to ‘Shop’. And this window will open.

Shopify menu with images

In the link field, remove the auto select from the cross button. And choose ‘collection’ you want images from to display next to product names in the menu.

Remember, it cannot be a product or old collection. Once done, click save.

Go to custom theme settings of your store to check if the images are displaying.

Shopify menu with images

Here we can see the images displaying.

Final verdict

If your Shopify store theme does not allow you to add mega menus or support adding images, you can simply go for Shopify app for menu customization.

Among many other ways, one easy way to facilitate a user in finding the right products is putting images in the navigation menu. It increases chances of user to stay longer on your web store or even increase chances of sales.

Confused or need an expert to do the tweaks for you? Get a custom solution from Phaedra Solution’s Shopify expert.

Subscribe to our Newsletter.

Thank you! Your subscription has been added to our newsletter!
Oops! Something went wrong while submitting the form.

Related Blogs.

How to apply Shopify multiple discount codes at checkout?How to apply Shopify multiple discount codes at checkout?
People love discounts, so your customers would love them too. Don't know how to apply Shopify multiple discount code options? Use this guide for help.
How to add video to product images Shopify?How to add video to product images Shopify?
Videos are used to engage customers and demonstrate a product. Can't add a video to product images in Shopify? We have some methods to fix this issue.
Unable to hide old product pages indexed on Shopify robots.txt? Unable to hide old product pages indexed on Shopify robots.txt?
Don't know how to hide old product pages on Shopify robots.txt? We got a simple solution to resolve this issue. Check it out here!

Contact.

You have an idea? We handle all the rest

Drop us a line.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

USA

500 Grant Street, Downtown, Suite 2900,
Pittsburgh, PA 15219, USA

+1 (412) 475 9053

Pakistan

2 West Canal Bank Road, Lahore 54000,
Pakistan

+92 (322) 452 4442

United Kingdom

Suite A12, 56 Wood Lane, London,
W12 7SB, UK

+1 (93) 606  7875

Project inquiries

hello@phaedrasolutions.com

It’s not about ideas
It’s about making ideas happen
Copyright 2022 - Phaedra Solutions.
All Rights Reserved