Overview
With the exception of the 'Fortress' template, all of the menu templates in Meteor that support images are designed to automatically pull in images from Shopify. This works great for products and collections, but there are certain cases where you may want to display an image for a menu item that is not linked to a product or a collection.
For example, you may want to display an image in a mega menu for a menu item that is linked to a 'Page' in Shopify, or perhaps an external link. This is entirely possible using Meteor, but it involves a workaround.
The workarounds
There are two popular workarounds we like to suggest if you need to display an image in a mega menu for a menu item that is not linked to a product or collection. One workaround requires you to use the Shopify admin to create a hidden collection and a URL redirect, while the other requires some custom CSS. You can read more about each workaround below:
Hidden collection & URL redirect (easiest)
If you are not comfortable making coding changes, and you only have a couple of images you need to display, then this is the workaround for you!
Steps:
From the Shopify admin, go to Products > Collections. Create new collections for each of the menu items (links) that need images. Make sure to upload the images you want to be displayed on the menu when creating the collections, just like you would for a normal collection. You'll also want to pay attention to the collection URL(s) that are used for these new collections, as you will need to reference them later. You can find these URLs at the bottom of the collection edit page in the 'Search engine listing preview' section.
While still in the Shopify admin, go to Online Store > Navigation. Edit the Navigation settings for your menus so that the menu items are linked to the new collection(s) you just created.
Go back to Products > Collections and edit the new collection(s). Click the 'Manage' button in the 'Sales Channels' panel and uncheck the 'Online Store' box for each collection (see screenshot). This will remove the collection(s) from being accessed on the storefront, while still allowing Meteor to pull the collection image(s) into the mega menu.
Go to Online Store > Navigation and click the URL Redirects button (see screenshot). On the redirects page, you will want to create redirects for each of the hidden collection pages, using the URLs from Step 1. This will ensure that users are redirected from the hidden collection page to the desired page, blog post, or external URL.
Custom CSS (more advanced)
If you have a larger number of images to display, or if you don't want to clutter up the Shopify admin with unused collections, then this is the workaround for you!
Steps:
Gather a list of the image URLs you want to display. If you have the images stored locally on your computer, then we suggest uploading them into the theme's assets, but you can also use Settings > Files from the Shopify admin.
Launch the app's CSS editor from the Settings page in the app admin. (Keep in mind the CSS editor is available on the app's Premium plan -- if you do not have access to the editor you're welcome to edit your theme's stylesheet instead)
Add in some rulesets to force a background image to display on the respective element in the mega menu. We've provided an example ruleset below which uses a data attribute to select a menu item for the store's "About Us" page, based on the URL of the link:
.m-link[href="/pages/about-us"] .m-frame {
background-image: url(https://cdn.shopify.com/s/files/1/0043/8157/3213/t/11/assets/SAMPLE.jpg) !important;
}Note: The ruleset above is using classes that are specific to the 'Prism' template, and you may need to make adjustments depending on your use case. This workaround does not work for the 'Amazon', 'Riviera', and 'Pinnacle' templates.
Need help?
Have questions or concerns? Feel free to reach out to our support team via chat or email and we'll be happy to assist 👍