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 some simple ways for creating a Shopify menu with images.

Table of Contents

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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Link

Name Email Address

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is an h2 heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

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 multiple discount code options at the checkout? Read this guide to implement more options for your online store.
How to add video to product images Shopify?How to add video to product images Shopify?
Videos are great way to engage customers and demonstrate how a product works. Are you having trouble with adding videos to product images? 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 indexed on Shopify robots.txt? Check out this simple solution to resolve this issue.

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

sales@phaedrasolutions.com

It’s not about ideas
It’s about making ideas happen
Let's Talk
Quick Links
Copyright 2022 - Phaedra Solutions.
All Rights Reserved