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).

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.

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.

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.

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.

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).

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:

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:

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.

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.

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