All Collections
Meteor Mega Menus
Extending menus with custom add-ons
Extending menus with custom add-ons

Use custom HTML or Shopify Sections to add dynamic content to your menus

Kyle Weiskopf avatar
Written by Kyle Weiskopf
Updated over a week ago

All our menu templates offer customizable layouts and settings, but sometimes you might want to extend the template with custom content (custom HTML or Shopify theme section, for example).

Enabling Menu Addons

The first step to using add-ons is to enable the setting in the theme app extension. This can be found under the "Advanced" section and is called "Enable menu addons". Once this setting is enabled, you can move on to the next step.

Using Inspect Mode

To add custom menu add-ons, you will need to use the inspect mode in your browser's developer tools. This will allow you to inspect menus without them hiding when your mouse leaves the menu.

To enable inspect mode, simply open your browser's developer tools and run:
โ€‹MeteorMenu.api.setInspectMode(true). Note you'll need to run that command for every page refresh.

Finding Your Menu ID

Once you have enabled inspect mode, you can find your menu ID by looking at the menu's div element. This element will have the attribute "data-meteor-id" and the value of this attribute is your menu ID.

Creating an add-on element

Now that you have your menu ID, you can add custom menu add-ons to your menu. To do this, you must create an HTML element, such as a div with our unique data attributes. Although it is possible to render unique content per page, you'll most likely want to include your custom elements within theme.liquid or a snippet/section that is rendered on every page.

<p>Example content</p>

The data-meteor-addon-id attribute should have the value of your menu ID, and data-meteor-addon-location will determine where in the menu your custom element will be placed. Once you have added these attributes, your custom menu addon will be added to your menu. You can repeat this process to add multiple addons to your menu(s).

Using Liquid

As long as your element is a part of the HTML body, there shouldn't be any problem adding HTML that is rendered by Shopify's Liquid engine. This means you could have something like a section that features a product every month:

theme.liquid example:

{% section "featured-product %}

Reducing element flicker

Since the element is rendered on the page, you may want to avoid displaying the add-on markup directly on the page. The solution is simple: add a wrapper div that has display: none for its style:

<div style="display: none;">
<div meteor-addon-id="..." data-meteor-addon-location="..."></div>

Because we're appending/relocating your element from within the container into the menu, the element will indeed be visible when moved outside the hidden container.

What about JavaScript?

Since we're simply appending your custom element, all JavaScript event listeners should respond as usual even when mounted inside the menu. Although, you should avoid attempting to modify menu interactions outside of your direct custom element.

Template location reference

Reference the table below to see what value is supported by the template you're using with the data-meteor-addon-location attribute.


Supported locations


top / right / bottom / left


Not supported


top / bottom


top / right / bottom / left


top / right / bottom / left


top / right / bottom / left


top / right / bottom / left / inner-left


top / right / bottom / left


top / bottom

Did this answer your question?