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.
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
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.
4-Click add menu item.
5-Add ‘name/title’ and ‘link’ to the product or collection you want. Hit add.
6-Click ‘Save menu’.
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.
From Shopify dashboard, go to Sales channels > online store > navigation.
Click on the main menu as highlighted in the above screenshot. After opening the ‘Main menu’, you will see ‘Shop’ with a dropdown.
Press ‘edit’ button given next to ‘Shop’. And this window will open.
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.
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.
