Mega menú para PrestaShop: crear una navegación que convierta

La mayoría de los consejos sobre mega menús se quedan en "haz que tus categorías sean más fáciles de explorar". Ese es el punto de partida, no el objetivo. La barra de navegación es el único elemento que todos los visitantes ven en todas las páginas y, en una tienda con un catálogo profundo, decide discretamente adónde irán después los compradores: hacia un producto, hacia un callejón sin salida o de vuelta a Google. Esta guía trata de entender el menú como una superficie de merchandising, no como un directorio: qué incluyes, cómo lo ordenas y cómo sabes si de verdad está generando pedidos en lugar de limitarse a parecer moderno.

Si estás en una fase anterior — tu desplegable predeterminado se desborda y solo quieres un panel limpio y fácil de escanear — empieza por la guía centrada en la exploración de Mega menú para PrestaShop: hacer que tus categorías sean fáciles de explorar. Este artículo parte de que ya has decidido crear uno y quieres que aporte resultados.

Última revisión: junio de 2026 — refleja PrestaShop 9 y el tema Hummingbird, ahora el tema predeterminado de la parte pública en la generación PrestaShop 9.

Por qué el menú predeterminado de PrestaShop limita tu conversión

El menú superior predeterminado de PrestaShop se entrega como el módulo ps_mainmenu, registrado en el hook displayTop: el punto de navegación que tanto el tema Classic como el más reciente Hummingbird llaman en su cabecera. Puede configurarse para mostrar los elementos de tu árbol de categorías en una barra horizontal con desplegables en cascada, junto con otros enlaces — páginas CMS, fabricantes, proveedores o URL personalizadas — en la cabecera. Para cinco o diez categorías, funciona realmente bien: no lo sustituyas solo porque "mega menú" suene más serio.

El techo aparece en cuanto tu catálogo se vuelve profundo o amplio, y es un techo de conversión, no solo estético:

• Las columnas estrechas en cascada penalizan la profundidad. Tres o cuatro niveles (Ropa → Mujer → Vestidos → Verano) obligan a seguir con el cursor un camino estrecho sin salirse. Cada desliz es una microfrustración, y los compradores frustrados no profundizan: se van.
• No hay espacio para vender mejor. El menú predeterminado son solo enlaces de texto. No puedes mostrar un banner de oferta, un producto destacado ni una miniatura de "novedades" donde todos los visitantes lo verán. Es tu espacio más visto, parado sin producir.
• Desbordamiento con desplazamiento. Un desplegable con 50 categorías crece más que la altura de la pantalla y obliga a desplazarse dentro del propio desplegable: un patrón que transmite "esta tienda es difícil de usar" antes incluso de que el cliente haya encontrado nada.

El valor de un mega menú está en que elimina esos tres límites a la vez: un panel amplio permite escanear decenas de enlaces sin desplazamiento, admite imágenes y bloques promocionales, y sustituye el frágil recorrido con el cursor por una superficie única y estable. La clave es hacerlo de forma que el panel se gane su sitio, no que simplemente llene la pantalla.

[captura de pantalla: un panel de mega menú abierto con columnas de subcategorías a la izquierda, una imagen de categoría y una ficha de producto destacado a la derecha]

Estructura el menú en torno a la decisión de compra

Aquí es donde la mayoría de los proyectos de mega menú se tuercen: se vuelca el árbol de categorías existente en un panel ancho y se da por terminado. Pero el árbol que tiene sentido en tu panel de administración (organizado por proveedor o por cómo gestionas las existencias) rara vez coincide con la forma en que razona un cliente. Reestructura primero por intención.

Empieza por cómo describen los clientes lo que quieren

Un comprador no piensa "artículos textiles"; piensa "vestidos de mujer". Nombra las entradas de primer nivel como las diría un cliente en voz alta. Esto se solapa con tu trabajo de URL y estructura de categorías, pero es una decisión distinta: la etiqueta del menú puede diferir del nombre almacenado de la categoría. PrestaShop nativo vincula el encabezado de la categoría al nombre de la categoría salvo que un tema o módulo los desacople, y esa distinción importa aquí: consulta por qué el encabezado de tu categoría no debería ser el nombre de tu categoría.

Mantén la barra superior en unas siete entradas

Las personas escanean un conjunto pequeño mucho más rápido que uno largo; entre cinco y nueve elementos de primer nivel es el rango práctico. Más que eso, y solo habrás trasladado la saturación del desplegable a la propia barra. Agrupa el excedente bajo un padre lógico: "Hogar & Jardín" puede contener Cocina, Baño, Dormitorio y Exterior como columnas dentro de un único panel.

Detente en tres niveles visibles

Dentro de un mega panel, tres niveles son el límite práctico:

• Nivel 1 — la entrada de la barra superior ("Electrónica")
• Nivel 2 — encabezados de columna en el panel ("Smartphones", "Portátiles", "Accesorios")
• Nivel 3 — enlaces bajo cada encabezado ("Fundas para iPhone", "Protectores de pantalla")

Si de verdad necesitas un cuarto nivel para expresar tu gama, es una señal de que tu árbol de categorías subyacente es demasiado profundo, y un árbol demasiado profundo también diluye tu enlazado interno y confunde a los rastreadores. Corrígelo primero en origen: Estructura de categorías de PrestaShop para una navegación optimizada para SEO explica cómo aplanarlo sin dejar productos huérfanos.

Promociona lo que ya convierte

Abre tu analítica antes de ordenar las columnas. Las categorías con más entradas y mejores tasas de carrito deben ir en la primera columna, al principio de la lista, y son las que merece la pena acompañar con una imagen. El menú no es un índice neutral: su orden es una recomendación, así que recomienda tus ganadores.

Qué incluir realmente en el panel

Un mega menú es el espacio de merchandising más barato que tienes, porque aparece en todas las páginas sin añadir peso extra por impresión. Decide con intención qué lo llena:

Una advertencia puramente de conversión, no decorativa: el panel debe superponerse a la página, nunca empujar el contenido hacia abajo. Un panel que desplaza el diseño al abrirse perjudica tu puntuación de Cumulative Layout Shift y transmite una sensación torpe. Renderízalo como una superposición con un pequeño retraso de apertura/cierre (200–300 ms) para que un ratón que cruza la barra no dispare paneles por accidente, y carga las imágenes de forma diferida para no solicitar veinte miniaturas de un panel que quizá nunca se abra.

El móvil es otro menú, no el mismo en pequeño

Más de la mitad de las sesiones de tienda ya ocurren en un teléfono, y un mega panel de escritorio no se reduce bien: pasar el cursor no existe en pantallas táctiles y un diseño multicolumna de 1200px es ilegible a 375px. La navegación móvil debe reconstruirse, no redimensionarse:

• Superposición a pantalla completa al tocar, con las categorías listadas en vertical y un nivel hijo que se desliza sobre el padre.
• Navegación por profundidad con un control claro para volver: cada nivel sustituye al anterior, lo que mantiene la interfaz limpia incluso con árboles profundos.
• Objetivos táctiles de al menos 44×44 px; meter treinta enlaces en una franja del tamaño de un pulgar vuelve el menú inutilizable y te cuesta pedidos móviles sin hacer ruido.

La navegación es solo una parte de la experiencia en el teléfono que decide si un visitante móvil convierte; la visión más amplia (tipos de campo, zonas de pulgar, pagos con monedero digital) está en Comercio móvil: tu tienda en un teléfono ya es más importante que el escritorio.

Dónde termina el menú y toman el relevo la búsqueda y los filtros

Un mega menú es una herramienta de exploración. Es el instrumento equivocado para dos tareas que los propietarios de tiendas suelen intentar forzar dentro de él, y sobrecargarlo perjudica tanto al menú como a la conversión que debería impulsar:

• Un comprador que ya conoce el nombre del producto quiere escribir, no hacer clic. Eso es un problema de búsqueda, y la búsqueda predeterminada de PrestaShop a menudo no está a la altura: consulta Búsqueda inteligente para PrestaShop.
• Un comprador dentro de una categoría grande quiere acotar por atributo: talla, color, precio, marca. Eso es filtrado facetado en la página de categoría, no estructura de menú: Filter Revolution explica cómo ayudar a los clientes a reducir un catálogo grande hasta una lista manejable.

La tarea del menú es llevarlos a la página de categoría correcta; el propio diseño de esa página, sus filtros y su ordenación continúan el trabajo desde ahí. Cómo esté construida esa página de destino decide si el clic convierte: Páginas de categoría que convierten retoma el tema exactamente donde el menú lo deja.

Mantenlo rápido: una navegación que tarda es una navegación que se ignora

Un mega menú añade HTML, CSS y JavaScript a todas las páginas, así que una implementación descuidada penaliza toda tu tienda, no solo el menú. Dos umbrales que conviene respetar:

• Peso del DOM. Un menú con 200 categorías implica más de 200 nodos que el navegador analiza en cada página incluso cuando todos los paneles están cerrados. Renderiza los paneles de forma diferida o, como mínimo, mantén los paneles ocultos fuera del trabajo de maquetación para que el menú no arrastre tu Largest Contentful Paint.
• Contención del script. El JavaScript del menú debería hacer tres cosas: abrir, cerrar y gestionar el retraso. Si un módulo incrusta carruseles o contenido AJAX en el desplegable, el menú empieza a competir con tu contenido real por el hilo principal. La navegación debe sentirse instantánea; en cuanto no lo hace, los compradores dejan de usarla.

¿Y qué? Un menú que vacila enseña a los clientes a ignorarlo, y un menú ignorado no puede vender nada. Aquí, el rendimiento es una función de conversión, no un capricho de desarrollador.

Mide el menú como la herramienta de conversión que es

"Se ve mejor" no es un resultado. Antes de cambiar nada, registra dónde está hoy tu menú y evalúa la reconstrucción con las mismas cifras durante una ventana significativa: al menos 30 días, para leer una tendencia y no una semana tranquila:

• Entradas a categorías impulsadas por la navegación: ¿la gente llega a las categorías desde el menú o rebota desde la página de inicio?
• Distribución de clics en el menú (un mapa de calor basta): las entradas con casi cero clics están mal etiquetadas o mal ubicadas, no necesariamente son indeseadas.
• Calidad de la ruta: si los clientes pasan repetidamente de Categoría → subcategoría equivocada → atrás → subcategoría correcta, tus etiquetas les están mintiendo.
• Conversión de la página de categoría después del clic: el verdadero resultado del menú es si la página a la que lleva vende.

Si prefieres tratar el menú como parte de una renovación más amplia de la "primera impresión", encaja de forma natural con el trabajo de página de inicio de Diseño de página de inicio para PrestaShop, ya que la mayoría de las sesiones empiezan con la cabecera y la página de inicio visibles a la vez.

Crearlo en PrestaShop sin bifurcar tu tema

Puedes crear un mega menú de tres formas: programarlo a mano en tu tema (frágil, y se rompe en la siguiente actualización del tema), comprar un constructor genérico o usar un módulo escrito para tu tema y versión concretos. La tercera vía importa más en el PrestaShop moderno que antes, porque el tema de la parte pública está cambiando: Hummingbird llegó como tema opcional en PrestaShop 8.1 y se convirtió en el tema predeterminado de la generación PrestaShop 9, y un módulo de menú escrito contra el marcado del antiguo tema Classic no encajará limpiamente en él.

Nuestro módulo mprmegamenu está creado específicamente para PrestaShop 9.x y el tema Hummingbird, así que entiende la estructura del tema en lugar de pelearse con ella. Se engancha al punto de navegación estándar del tema (displayTop, con soporte opcional para un hook de menú personalizado del tema) en vez de sobrescribir archivos de plantilla, que es lo que le permite sobrevivir a actualizaciones del tema y del núcleo. En términos de beneficio:

• El menú vende, no solo lista. Pestañas multicolumna, columnas con imagen de categoría y fichas de producto generadas mediante el propio presentador de productos de PrestaShop, de modo que precios, imágenes y disponibilidad se mantienen correctos y localizados sin que tengas que mantener un conjunto de datos paralelo. ¿Y qué? Puedes colocar un superventas directamente en el menú y seguirá siendo preciso a medida que cambien las existencias y el precio.
• Contenido personalizado y bloques de confianza para banners promocionales, grupos de enlaces o mensajes de tranquilidad sobre envío/devoluciones dentro del panel: la superficie de merchandising que defiende todo este artículo, configurada desde el panel de administración en lugar de mediante una factura de desarrollo.
• Un menú móvil (deslizable) diseñado para ese uso, no un panel de escritorio comprimido, para que la experiencia en teléfono siga el patrón de navegación por profundidad que realmente funciona en pantallas táctiles.
• Una capa de caché integrada para que un menú rico en funciones no se recalcule en cada carga de página, manteniendo la navegación rápida, lo cual (como vimos arriba) es en sí mismo un asunto de conversión.

Si tu tienda todavía usa el tema Classic en una versión anterior, conviene saberlo desde el principio: mprmegamenu está orientado a la era Hummingbird, así que revisa tu tema antes de planificar en torno a él. Preferimos decírtelo ahora a que después no encaje.

Preguntas frecuentes

¿Necesito un mega menú o basta con el menú predeterminado de PrestaShop?

Para cinco o diez categorías, el módulo predeterminado ps_mainmenu funciona realmente bien: no lo sustituyas solo porque "mega menú" suene más serio. El techo aparece cuando tu catálogo se vuelve profundo o amplio: las columnas estrechas en cascada penalizan la profundidad, no hay espacio para vender mejor y un desplegable con 50 categorías se sale de la pantalla. Un mega panel elimina esos tres límites a la vez.

¿Cuántos elementos de primer nivel debería tener un mega menú?

Unos siete: entre cinco y nueve es el rango práctico. Las personas escanean un conjunto pequeño mucho más rápido que uno largo, y más de nueve solo traslada la saturación del desplegable a la propia barra. Agrupa el excedente bajo un padre lógico: "Hogar & Jardín" puede contener Cocina, Baño, Dormitorio y Exterior como columnas dentro de un único panel.

¿Un mega menú ralentizará mi tienda?

Solo si está construido con descuido. Un menú con 200 categorías añade más de 200 nodos DOM que el navegador analiza en cada página incluso cuando todos los paneles están cerrados, y un JavaScript de menú pesado compite con tu contenido por el hilo principal. Renderiza los paneles de forma diferida, carga de forma diferida las imágenes del panel y limita el script del menú a abrir/cerrar/retrasar. Nuestro módulo mprmegamenu incluye una capa de caché para que un menú rico en funciones no se recalcule en cada carga de página.

¿mprmegamenu funciona con el tema Classic?

Está orientado a PrestaShop 9.x y al tema Hummingbird, y se engancha al punto de navegación estándar displayTop del tema en lugar de sobrescribir plantillas. Un menú escrito contra el marcado de Hummingbird no encajará limpiamente en el antiguo tema Classic, así que si tu tienda todavía usa Classic en una versión anterior, revisa tu tema antes de planificar en torno a él.

¿En qué se diferencia un mega menú móvil del de escritorio?

Se reconstruye, no se redimensiona. Pasar el cursor no existe en pantallas táctiles y un diseño multicolumna de 1200px es ilegible a 375px, así que el menú móvil se convierte en una superposición a pantalla completa al tocar, con cada nivel hijo deslizándose sobre el padre (navegación por profundidad con un control claro para volver) y objetivos táctiles de al menos 44×44 px. mprmegamenu incluye un menú deslizable diseñado para móvil en lugar de un panel de escritorio comprimido.

La conclusión

Un mega menú es uno de los cambios de mayor impacto que puedes hacer en un catálogo grande de PrestaShop, pero solo cuando lo tratas como un instrumento de conversión. Estructúralo según cómo deciden los clientes, llena el panel con elementos que muevan pedidos, reconstrúyelo (no lo redimensiones) para móvil, entrégalo limpiamente a la búsqueda y los filtros, mantenlo rápido y evalúalo con cifras reales. Si aciertas en eso, el menú deja de ser un directorio y se convierte en el vendedor más discreto y más visto de tu tienda.

Sigue leyendo

• Estructura de categorías de PrestaShop: navegación optimizada para SEO — corrige el árbol en origen antes de volcarlo en un panel.
• Páginas de categoría que convierten: diseño, filtros y ordenación — donde el menú entrega el trabajo una vez que llega el clic.
• Filter Revolution: ayudar a los clientes a encontrar productos en catálogos grandes — el acotado dentro de la categoría que un menú no debería intentar hacer.