Mega Menu: setup and help

Upload and install the mprmegamenu ZIP in Modules > Module Manager. Click Configure, or open Improve > Mega Menu > Menu Tabs.

Installation registers displayMainMenu, displayTop and displayNavFullWidth. The renderer selects the applicable menu position for your theme. Installation removes hooked ps_mainmenu, blocktopmenu and blocktopdropdownmenu instances from the top or full-width navigation hooks and records them for restoration on uninstall.

Check your header immediately after installation. A custom theme must call a supported hook. A developer can add a theme placement with:

{hook h='displayMainMenu'}

or:

{widget name='mprmegamenu' hook='displayMainMenu'}

Select the intended shop before configuring tabs. The PHP process needs write access to the module's folder under the PrestaShop cache directory. Employees who edit dropdown columns need edit permission for the module admin page.

In Menu Tabs, create a tab, save it, then open its Dropdown Columns editor.

For a sale link, set Label to Sale, URL Type to Custom URL, Custom URL to your shop's sale path and Active to on. Check the link in every language.

Choose a column type and set its width on the 12-column grid. New columns default to width 3 and type category_tree. The editor allows up to 12 columns; their total width cannot exceed 12. Titles and content are translated. Generated column types use settings rather than translated HTML content.

The editor validates URLs, references, content types and widths. If another employee saves the same tab, reload its columns before saving again. A stale revision is rejected to prevent overwriting their changes.

For a category tree under category 8, use these settings, replacing all example IDs:

{"id_category":8,"depth":2,"exclude":[15,16]}

For selected CMS pages:

{"cms_ids":[3,4,5]}

Structured rows in the current editor include a row type. A grouped-link content array can be:

[
  {
    "row_type":"link_group",
    "label":"Shopping help",
    "url":"/help",
    "icon":"help",
    "new_window":false,
    "children":[
      {"row_type":"link","label":"Delivery","url":"/delivery","icon":"local_shipping","new_window":false}
    ]
  }
]

Use existing, localized destinations. Supported URL forms include an anchor, a root-relative path beginning with one slash, or an absolute HTTP/HTTPS URL. Protocol-relative URLs are rejected.

A visual-tab content example is:

{
  "tabs":[
    {
      "row_type":"visual_tab",
      "id":"guides",
      "label":"Guides",
      "url":"/guides",
      "columns":[
        {"type":"sizes","title":"Topics","links":[{"row_type":"link","label":"Delivery","url":"/delivery","icon":"","new_window":false}]},
        {"type":"card","col_class":"col-6","title":"New products","subtitle":"Latest arrivals","url":"/new-products","image":"/img/cms/menu-new-products.jpg","mobile_image":"","alt":"New products"}
      ]
    }
  ]
}

For custom HTML, supported mobile structures include [data-mm-tabs], .mm-type-card, .mm-html link groups and ordinary lists. A desktop form or arbitrary widget is not automatically reproduced as an interactive mobile form.

<div class="mm-html">
  <div class="mm-html__title">Buying guides</div>
  <ul>
    <li><a href="/guide-1">Guide 1</a></li>
    <li><a href="/guide-2">Guide 2</a></li>
  </ul>
</div>

Add a product-list column

In Dropdown Columns, choose product_list, select an accessible category with id_category, and set limit from 1 to 24. Save the columns and check the resulting product panel on desktop and in the mobile drawer. For example, replace 8 with your category ID:

{"id_category":8,"limit":4}

The current builder includes this column in the shared menu tree and supplies its products to the desktop and mobile panels. It is not limited to category-tree previews. Products nb remains the separate control for attaching products to category-tree panels; Show prices and Show discounts control the supplied product presentation.

Open Mega Menu > Settings > Configuration.

You select categories for product panels. The standard form does not provide an individual product picker for them.

Use the Submenu settings in Configuration.

For guide references, use real published IDs, for example:

{"8":[12,"kb:34"],"*":[56]}

The mobile menu provides nested navigation and a quick bar. Check your configured contact, account, help and locale destinations in the shop's actual languages.

Use Theme styles for shared detected theme values. The module maps primary color, text, muted text, primary and secondary backgrounds, border, radius and transition to --mprmegamenu-* variables. Refresh detection after a theme change, or clear custom overrides to return to detected values.

The current variable map does not include the old module-specific primary-hover or shadow aliases. Inspect the shared style editor and the active stylesheet instead of entering the original fixed fallback list as module defaults.

For theme CSS, inspect .mprmegamenu-container and the current .ps-mainmenu__* markup. A custom header may need spacing or positioning changes.

1. Test every top-level destination on desktop.
2. Open each dropdown, then test its links, products and images.
3. Repeat in the mobile drawer. Confirm that custom HTML produces the intended nested links.
4. Repeat as a guest and in any customer groups with category restrictions.
5. Repeat in each language and shop.

Category-tree content follows catalog changes. Manually entered links and HTML still need manual maintenance. Category, CMS, product and menu changes invalidate related menu caches. The module stores data, rendered markup and fragments in its mprmegamenu directory under the PrestaShop cache directory.

If the menu is absent, check the theme hook and active tabs for the selected shop. If columns do not save, check edit permissions, validation errors and the total width. If a blog column is empty, check its source module and published content.

Open Settings > Integrity for table, hook, reference and cache-directory checks. Required menu tables include mprmegamenu_tab, mprmegamenu_tab_lang, mprmegamenu_tab_shop, mprmegamenu_column and mprmegamenu_column_lang. Clear relevant PrestaShop and CDN caches after a theme override changes.

Export or back up menu settings first. Uninstall through Module Manager. The uninstall SQL drops the five menu tables, clears module cache and removes menu entries. The module restores the native menu hook registrations it recorded. Check the header afterwards, especially if you changed native menu modules while Mega Menu was installed.

Requires PrestaShop 1.6.1 or later and PHP 7.1 or later.