Ritual: page images in mega menu

Shopify Plus
1

Shopify Ritual Theme: I would like to display images for pages in the mega menu, not just product collections.

3
  1. No, I just use the theme editor.
  2. I would prefer each page to control its own image.
4

By default shopify does not provide a feature to add featured images for pages like it does for collections and products. The workaround is to add respective image from the content field or using metafields.

Best

5

I know how to create and populate a metafield for that, but how do I get the theme editor to allow me to select a metafield in the submenu media type? Right now, it has a dropdown with these options: none, collection images, featured collection, and featured products.

6

It is actually hard to tell without seeing a visual of the site or theme editor.

But the only thing from what i understand of this and my little knowledge of shopify is you might probably need custom code for this. So create page metafields of type image file and then render images for the submenu pages checking with an if condition.

8

@PERCCOFFEE ,

That submenu media type dropdown is hard-coded in the Ritual theme’s section schema. The options you see:

  • none
  • collection images
  • featured collection
  • featured products

are explicitly defined in the section’s schema and only those data sources are wired up in the Liquid. Shopify’s theme editor cannot dynamically expose metafields unless the theme developer added support for them.

So there is no way to “select a metafield” from that dropdown without editing theme code.

You (or a developer) must add a new option to the menu section schema and connect it to page metafields.

In the mega-menu section (usually something like header.liquid or mega-menu.liquid):

{
  "type": "select",
  "id": "submenu_media_type",
  "label": "Submenu media type",
  "options": [
    { "value": "none", "label": "None" },
    { "value": "collection_images", "label": "Collection images" },
    { "value": "featured_collection", "label": "Featured collection" },
    { "value": "featured_products", "label": "Featured products" },
    { "value": "page_metafield", "label": "Page metafield image" }
  ]
}

Read the page metafield in Liquid

In the submenu rendering logic:

{% if block.settings.submenu_media_type == 'page_metafield' %}
  {% if link.type == 'page_link' and link.object.metafields.custom.mega_menu_image %}
    <img
      src="{{ link.object.metafields.custom.mega_menu_image | image_url: width: 800 }}"
      alt="{{ link.title }}"
    >
  {% endif %}
{% endif %}

Each page now controls its own image via its metafield.

  • Theme editor cannot expose metafields unless the theme supports them
  • Adding metafield support requires a small schema + Liquid update
  • This is exactly how Shopify expects themes to extend editor options