How do I Place my Mega Menu Code Into My Template?

In order to make use of the Mega Menu, you will need to place the code itself into your store's frame.html after you have created your menu. To access this:

1. Log into your Online Store Manager
2. Navigate to Settings > Design > Themes & Styles
3. Go to Edit Template and click on Open Template Editor
4. Look for the frame.html file, and click on it to open it

Within your frame, you will need to place the variable for the Mega Menu. This is:
[3dcart_mega_menu]

Where do I place the Mega Menu?

This is actually entirely up to you. Some merchants may wish to use the mega menu wherever they'd like within the frame.html file, and because of that, this code is not restricted to any specific location. If you are comfortable with HTML, you can place it in any area of your frame as desired. We give this freedom to merchants so they may customize their store's appearance to their own desires.

How Can I Replace my Categories with my Mega Menu?

The code for your store's default category menu will vary highly depending on the template. Because of this, we cannot provide an exact location that will work on each template we provide. We do, however, have recommendations based off of the basic style of template chosen.

In the event you do not plan on using the category menu, you will want to first make sure you hide your template's categories. You can do so by going to:

1. Go to Settings > General > Store Settings
2. Go to the Display Options tab
3. Click on Hide Categories
4. Click on Save

Templates with Categories in the Header

For situations like this, you will want to locate your store's category codeblock. This code will vary from template to template, but you will typically be looking for a codeblock that includes the element navbar-wrapper within it.

In regards to placing the code, placing it either directly before or after this section would display it in the category location.

Templates with Categories in the Left Bar

As you may have noticed, our Mega Menu builder creates horizontal menus. Because of this, they won't naturally replace the same look and feel that you may find on a template where the categories are arranged in a vertical format on the left-hand side. In these situations, we recommend placing the mega menu code into the main body section for your template's frame file.

The code block for this will vary from template to template, but you will typically look for the following:

[page_content]

And insert your code before this section. In doing so, it will display at the top of your body.

Troubleshooting

Due to the nature of this module, it is natural to run into roadblocks. Here are a few common issues you may experience and how to correct them:

I placed the Mega Menu code and it's not appearing

In situations like this, there are two main scenarios that would cause this:

The first is that the code itself is not correct. Please ensure you have the proper variable: [3dcart_mega_menu]

The second would be that the Mega Menu was not properly created. To guarantee the mega menu was created, you will need to go through the steps listed in this article. It is created on your template by launching the menu builder and saving from there. You will see the megamenu.html file in your Template Editor if it has been created. If this is not present, then the menu was not created and will not display.

My Mega Menu's colors in the back end are not appearing on the front end

If this occurs, you will want to go to the Mega Menu module's Settings page where this is configured. From here, you will want to just press the Save button at the top to save your changes for your template.

I've done all of the proper steps, and my changes are not showing

If you've followed all of the suggestions prior to this, you will also want to ensure that you clear your store cache. In doing so, you will force any changes you've made to be reflected on the front end of your site.

My Mega Menu is overlapping with elements on my site

This may occur in situations where your category menu is still present or if other modifications have been made. Issues such as this may be due to your template's CSS coding. As templates all make use of their own code, this would be outside of Support's scope.

My Template Does Not Match the Examples Provided

Due to the nature of templates all being different, this can occur as well. Some of our own templates may not match what is listed here 1:1 and if you are also using a custom template, it is very normal for this to happen. These situations will require alternative approaches to placing the Mega Menu code.

Our templates (and many custom templates using our codeblocks) will all contain a code used to display your store's categories. This code will start with START: CATEGORIES and end with END: CATEGORIES. This will represent the category menu on the store front. The code surrounding it will typically be the menu, and this will be what you wish to replace. For example, from one of our templates:

Here, you can see one example of a category menu on a template that does not match our previous examples. But, using the code blocks previously mentioned, we were able to identify its location. We can replace this entire code with the Mega Menu code and it will display in its place. The code surrounding this will vary highly per template, so this may not necessarily match yours. But, typically you will find a container code of sorts surrounding your categories which can be replaced. This may require some trial and error, so because of this, we do recommend copying your current code to a local document on your PC as a precaution.

If your store also does not contain this code block (perhaps you are using a custom template with hard coded menus), you may want to use the Inspect Element tool found on web browsers instead. With this tool, you can help identify elements on your template and the code that corresponds to them.