Mega Menu Images via Metaobjects
This guide shows you how to add images to a Shopify mega menu step by step.
You can see an example of how the images can be placed by checking our demo. It shows a sample layout and helps you understand how the images should appear on the storefront.
To achieve the desired functionality, please follow the steps outlined below.
• Create a Megaobject
This Megaobject will be used to store images that will later appear inside the mega menu.
• Add the fields exactly like in the screenshot
Please make sure everything matches the screenshot exactly:
Field names must be the same
Field types must be the same
Field options must also be the same
Do not rename or change any fields.
• Fields overview (what they mean)
• How image order works
Images are connected to menu items in the same order as they appear in the mega menu:
The first image is used for the first menu item
The second image is used for the second menu item
The third image is used for the third menu item, and so on
So, please upload images in the correct order.
• Add the Megaobject to the mega menu
After all fields are filled in, insert this Megaobject into the mega menu item where you want menu links to be displayed with images.
• Tips: common beginner mistakes to avoid
Renaming fields Changing field names (for example, renaming
imagesorlabel) will break the connection. Always use the original names.Wrong field type Make sure the images field is a list of images, not a single image field.
Incorrect image order Images must be uploaded in the same order as the menu items. If the order is wrong, images will appear under the wrong menu links.
Forgetting to save changes Always save the Megaobject after editing and also save the mega menu after assigning it.
Adding the Megaobject to the wrong menu item The Megaobject must be attached to the menu item that should display links with images.
Last updated