{"id":5833,"date":"2022-05-17T03:38:49","date_gmt":"2022-05-17T07:38:49","guid":{"rendered":"https:\/\/onecommerce.io\/blog\/?p=5833"},"modified":"2023-09-21T03:42:57","modified_gmt":"2023-09-21T07:42:57","slug":"shopify-menu-with-images","status":"publish","type":"post","link":"https:\/\/onecommerce.io\/blog\/2022\/05\/17\/shopify-menu-with-images\/","title":{"rendered":"How To Create Shopify Menu With Images? (2023)"},"content":{"rendered":"

Why do we need a <\/span>Shopify menu with images<\/b><\/a>?<\/span><\/p>\n

Have you ever bought something just by the look of it? If yes, you will understand why we need to create Shopify menu with images.<\/span><\/p>\n

A Shopify menu with images certainly will increase the conversion rate of your store.\u00a0<\/span><\/p>\n

When customers use the menu to search for their products, an image will likely make them stay longer on the page as they can see what the products look like before changing pages. This prevents customers from leaving your store too soon as they get lost in the sea of words.\u00a0<\/span><\/p>\n

In this blog, we will guide you through the straightforward process of how to add images to your Shopify menu.\u00a0\u00a0<\/span><\/p>\n

There are three best ways you can create Shopify menu with images.<\/span><\/p>\n

Option 1: Using themes that have mega menu support<\/b><\/h2>\n

This one is the most basic one as it does not require any IT skills of any sort. However, you need to install a theme that can support multi-level mega menus. The images must be linked with each of the products and collections so that they can be shown in the navigation menu.\u00a0<\/span><\/p>\n

You should only choose images that are clear, and well-lit with realistic colors which help the customers have the best visualization of the products.\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n

For example, this is the <\/span>Ap Jka<\/span><\/a> theme which supports a mega menu with images.<\/span><\/p>\n

\"Ap

Ap Jka theme<\/p><\/div>\n

After installing the theme, do as follows to create image associations.<\/span><\/p>\n

Step 1:<\/strong> Open <\/span>Shopify admin\u00a0<\/b><\/p>\n

Step 2:<\/strong> Go to \u201c<\/span>Products<\/b>\u201d \u2192 \u201c<\/span>Collections<\/b>\u201d<\/span><\/p>\n

\"

Go to \u201cProducts\u201d \u2192 \u201cCollections\u201d<\/p><\/div>\n

Step 3:<\/strong> Pick the collections you want to show with images.<\/span><\/p>\n

Step 4:<\/strong> Tap \u201c<\/span>Upload images<\/b>\u201d<\/span><\/p>\n

\"Tap

Tap \u201cUpload images\u201d<\/p><\/div>\n

Choose the image in your library you want to update and click \u201c<\/span>Save<\/b>\u201d<\/span><\/p>\n

Step 5:<\/strong> Go to \u201c<\/span>Online Store<\/b>\u201d \u2192 \u201c<\/span>Navigation<\/b>\u201d<\/span><\/p>\n

\"Go

Go to \u201cOnline Store\u201d \u2192 \u201cNavigation\u201d<\/p><\/div>\n

Step 6:<\/strong> Choose the menu you want to include images<\/span><\/p>\n

Step 7:<\/strong> Click \u201c<\/span>Add menu items<\/b>\u201d<\/span><\/p>\n

Step 8:<\/strong> Enter the name and link to the products or collections<\/span><\/p>\n

\"Enter

Enter the name and link to the products or collections<\/p><\/div>\n

Step 9:<\/strong> Tap \u201c<\/span>Save<\/b>\u201d<\/span><\/p>\n

Images would then start to appear in the mega menu once your refresh your page.\u00a0<\/span><\/p>\n

Option 2: Using Shopify mega menu apps<\/b><\/h2>\n

If you want to create Shopify menu with images without changing your theme completely, you can install apps that transform your drop-down menu into a mega menu. Some of the most prominent apps are:<\/span><\/p>\n

#1: <\/b>Meteor Mega Menu<\/b><\/a> by Helium<\/b><\/span><\/h3>\n

Rating<\/b>: 4.5 (216 reviews)<\/span><\/p>\n

Pricing<\/b>: 1 free plan and two paid plans of $8\/month, and $14\/month.<\/span><\/p>\n

\"Meteor

Meteor Mega Menu<\/p><\/div>\n

Meteor Mega Menu is an app specialized in creating a multi-tier dropdown menu that fits your store\u2019s theme. It only takes a few minutes to learn and build your own mega menu. There are 8 styles for you to choose from Horizon, Prism, Fortress, Riviera, Amazon, Pinnacle, Tidal, and Solar.\u00a0<\/span><\/p>\n

This app guarantees mega menu loading speed is quick and unobtrusive as its content comes directly from Shopify\u2019s infrastructure or a Content Delivery Network (CDN).\u00a0\u00a0\u00a0<\/span><\/p>\n

#2: <\/b>Smart Mega Menu & Navigation<\/b><\/a> by qikify<\/b><\/span><\/h3>\n

Rating<\/b>: 5.0 (573 reviews)<\/span><\/p>\n

Pricing<\/b>:\u00a0 1 free plan and two paid plans of $3.99\/month and $7.99\/month.<\/span><\/p>\n

\"Smart

Smart Mega Menu & Navigation<\/p><\/div>\n

Smart Mega Menu & Navigation will provide you with a customized mega menu within minutes. You can add products, collections, and images to your menu. Your store design can also be enhanced by the flexible layouts provided by this app.\u00a0\u00a0\u00a0<\/span><\/p>\n

Apart from adding images to the menu, you can also add eye-catching labels, badges, and icons to attract customers\u2019 attention to special deals.\u00a0<\/span><\/p>\n

#3: <\/b>Mega Menu & Navigation<\/b><\/a><\/span> by Buddha Apps (Zero Carbon)\u00a0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<\/b><\/h3>\n

Rating<\/b>: 5.0 (1081 reviews)<\/span><\/p>\n

Pricing<\/b>: 1 free plan and one paid plan at $9.95\/month.<\/span><\/p>\n

\"Mega

Mega Menu & Navigation<\/p><\/div>\n

Mega Menu & Navigation help you create customized mega menu quickly. Using Buddha Mega Menu, you can add any items you want to your menu whether they are products, collections, blogs, pages, or URLs. Customers can shop directly on the menu as featured products are shown with the \u201cAdd to cart\u201d button.\u00a0\u00a0\u00a0<\/span><\/p>\n

Option 3: Modify your current theme\u2019s code<\/b><\/h2>\n

The final option to create Shopify menu with images, you can consider is to modify the code of your current theme so that it can support the mega menu with images. This way undeniably will be more cost-saving but it requires you to at least know the basics of coding to do the trick.\u00a0<\/span><\/p>\n

So if you or someone you know is tech-savvy, try this option now.\u00a0<\/span><\/p>\n

However, we need to remind you that you cannot revert these codes once you applied. It is better for your to duplicate your theme and work on the copy. If the theme doesn\u2019t function properly, you can go back to the original immediately.\u00a0<\/span><\/p>\n

You can follow this video\u2019s <\/span>instructions<\/span> and create your free mega menu from Dawn theme. <\/span>\u00a0\u00a0\u00a0<\/span><\/p>\n

\"\"\"\"<\/a><\/div>\n

Final Thoughts<\/b><\/h2>\n

Your current Shopify theme might not allow you to create a mega menu with images. To deal with this problem, you can change into a theme that supports mega menus, add mega menu apps or adjust your code directly.\u00a0<\/span><\/p>\n

Each way has its own benefits and drawbacks. Based on your needs and skills, you can choose the most suitable way for your business. In the end, creating a Shopify menu with images will certainly increase the chances customers stay longer on your website, and eventually increase your chance to convert them into loyal customers.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Ready to learn how to create Shopify menu with images. Here are 3 proven-effective ways to make your own customized mega menu with images. Click here to learn more. <\/p>\n","protected":false},"author":8,"featured_media":18626,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts\/5833"}],"collection":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/comments?post=5833"}],"version-history":[{"count":9,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts\/5833\/revisions"}],"predecessor-version":[{"id":20323,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts\/5833\/revisions\/20323"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/media\/18626"}],"wp:attachment":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/media?parent=5833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/categories?post=5833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/tags?post=5833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}