How to Add a Mega Menu to Your PrestaShop Store (Step-by-Step Guide)
Your store’s navigation menu is the first thing customers interact with — before they search, before they browse, before they buy. Yet most PrestaShop stores are still running on the default navigation bar: a flat, limited menu that gives you almost no control over layout, content, or design.
In this guide, you’ll learn exactly how to add a professional mega menu to your PrestaShop store — with images, submenus, and rich content blocks — using a drag-and-drop module. No coding required. Works on PrestaShop 1.6 through 9.x.
Why the Default PrestaShop Menu Isn’t Enough
Out of the box, PrestaShop gives you a basic top navigation bar. It works — but it has serious limitations for growing stores:
- Only supports simple dropdown links — no images, banners, or product grids inside the menu
- No control over layout — you can’t create multi-column submenus or tabs
- Limited mobile customization — behavior on smartphones is rigid
- No way to highlight specific items (e.g. “Sale”, “New arrivals”) visually
- No drag-and-drop reordering — every change requires navigating through category settings
For stores with more than 5–6 top-level categories, or stores that want to guide customers visually through their catalog, the default menu creates friction. And friction costs conversions.
A mega menu solves all of this. Here’s how to set one up.
What You’ll Need
- A PrestaShop store (version 1.6.1 or higher, including 9.x)
- Admin access to your back office
- Creative Mega Menu module — available on PrestaShop Addons
The whole process — from installation to a live mega menu — takes about 20–30 minutes.
Step 1 — Install the Module
After purchasing the module on PrestaShop Addons, download the .zip file from your Addons account.
- Log into your PrestaShop back office
- Go to Modules > Module Manager
- Click “Upload a module” (top right button)
- Select the downloaded
.zipfile - Click Install and wait for the confirmation message
Once installed, search for “Creative Mega Menu” in the Module Manager and click Configure to open the builder.
Step 2 — Choose Your Starting Point: Template or From Scratch
The module gives you two ways to get started. Choose whichever fits your situation:
Option A — Import a Ready-Made Template (Fastest)
If you want a professional result in the shortest time, use a pre-built layout template:
- In the module back office, go to the Templates section
- Browse the available templates — each shows a preview of the menu structure
- Click Import on the template that fits your store type
- The full menu structure — submenus, layout, content blocks — is imported instantly
- Edit the category links and labels to match your store’s catalog
This is the recommended approach for most stores. You get a complete, professionally structured menu in under 5 minutes.
Option B — Build From Scratch with Drag-and-Drop
If you prefer full control from the start:
- Click “Create new menu” in the back office
- Use the drag-and-drop interface to add your top-level menu items
- For each item, click to open its submenu settings
- Choose your submenu type (horizontal tabs, vertical tabs, floating panel)
- Add content blocks inside each submenu panel
Step 3 — Set Up Your Menu Structure
This is where Creative Mega Menu’s flexibility becomes clear. For each menu item, you can configure:
Menu item types
- Category link — links directly to a PrestaShop category page
- Custom URL — link to any page, internal or external
- Static text — non-clickable label (useful for grouping)
Submenu layout types
- Horizontal tabs — classic mega menu, full-width panel with columns
- Vertical tabs — sidebar navigation inside the dropdown
- Nested tabs — tabs within tabs for deep category structures
- Floating submenu — a floating panel that appears alongside the menu item
Right-aligned items
Need to highlight a “Sale” or “New Arrivals” link on the right side of your menu while other items align left? Enable the right-align option on any menu item. You can pin one or several items this way — a simple but effective way to draw attention to promotional pages.
Step 4 — Add Rich Content Inside Your Submenus
This is the feature that separates a mega menu from a regular dropdown. Inside each submenu panel, you can add content blocks:
- Product grid — display featured or bestselling products directly in the menu
- Category images — visual navigation with photos instead of plain text links
- Banners — promotional banners with custom images and links
- Custom HTML — any content you want, styled to your needs
- Videos — embed a product video or tutorial inside a submenu panel
- Icons — add icons to menu items for visual clarity
To add a content block: select a submenu panel, click “Add block”, choose the block type, and configure it. Blocks can be reordered by dragging.
Step 5 — Add Bubble Tags to Menu Items
Bubble tags are small labels attached to menu items — “New”, “Hot”, “Sale”, or any custom text. They draw the eye immediately and are proven to increase clicks on promotional categories.
To add a bubble tag:
- Click on the menu item you want to label
- Find the Bubble tag field in the item settings
- Type your label text (e.g. “Sale”) and choose a background color
- Save — the tag appears immediately in the preview
Step 6 — Configure Mobile Behavior
Creative Mega Menu handles mobile responsiveness automatically — your menu adapts to any screen size without extra configuration. However, there are a few mobile-specific options worth reviewing:
- Sticky menu on desktop — keeps the menu visible as users scroll; can be disabled on mobile independently
- Submenu open effect on mobile — choose between dropdown, floating dropdown, or slide-to-left
- Touch targets — all menu items and submenu toggles are sized for touch interaction by default
Test your menu on a real mobile device after setup. The back office preview gives a good approximation, but testing on an actual phone reveals the real user experience.
Step 7 — Assign the Menu to Your Store Header
After building your menu, you need to place it in your store’s header:
- In the module configuration, go to Hook settings
- Select the hook that corresponds to your theme’s navigation area — typically
displayTopordisplayNav - Save
- If you’re using Creative Elementor or another page builder, you can instead place the module widget directly in your header layout from the builder interface
Preview your storefront. Your new mega menu is live.
Step 8 — Save Your Layout as a Template (Optional but Recommended)
Once your menu is set up exactly the way you want it, save the layout as a custom template:
- Go to the Templates section in the module back office
- Click “Save current layout as template”
- Give it a name (e.g. “Main Store Menu v1”)
This is especially useful if you manage multiple stores or plan to rebuild your menu later. You can also export the entire menu configuration as a file and import it into any other PrestaShop store — saving hours of manual setup.
Troubleshooting: Common Issues After Installation
The menu doesn’t appear on the storefront
Check that the module is assigned to the correct hook. Go to Design > Positions in your back office, search for “Creative Mega Menu”, and verify it’s hooked to displayTop or your theme’s header hook.
The menu looks broken on mobile
This usually happens with heavily customized themes. In the module settings, try switching the mobile submenu open effect to “dropdown” (the most compatible option). If the issue persists, contact support — response time is under 1 hour.
Submenus are not showing
Make sure you’ve saved the menu after building it, not just configured the items. Look for the Save button at the top of the builder — changes are not auto-saved.
Final Result: What Your Store Gets
After following these steps, your PrestaShop store will have:
- A fully structured mega menu with horizontal or vertical tab layouts
- Rich content inside submenus — products, banners, images
- Mobile-responsive behavior on all devices
- Visual highlights on promotional items via bubble tags
- A saved template for easy reuse or migration
The difference in navigation quality — and the effect it has on how customers move through your catalog — is immediately visible.
Ready to Get Started?
Creative Mega Menu is available on the official PrestaShop Addons marketplace. Compatible with PrestaShop 1.6 through 9.x, multishop, and all major page builders.
Get Creative Mega Menu on PrestaShop Addons →
Or try it first:
