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. This is entirely possible, but it involves a workaround.

The workaround(s)

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 involves creating a hidden collection and a URL redirect in the Shopify admin, while the other involves 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:

  1. 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 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 URL at the bottom of the collection edit page in 'Search engine listing preview' section. 
  2. 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.
  3. 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.
  4. 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:

  1. 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 into theme's assets, but you can also use Settings > Files from the Shopify admin.
  2. Launch the app's CSS editor from the Settings page in the app admin. 
  3. Add in some rulesets to force a background image to show for the proper menu element. We've provided an example ruleset below, which uses a data attribute to select a link for the store's "About us" page:
.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, so you may need to make adjustments depending on your use-case.

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 👍  

Did this answer your question?