Desktop Mega Menu Slide Menu Tab Bar

Heater — reemplazar el header principal por Navi+ para plegar un sitio web grande en una navegación fácil y consistente entre mobile y desktop

Cómo una gran cadena de reparaciones en Hong Kong reemplazó todo su header por defecto con Navi+ — convirtiendo cientos de páginas de marca × modelo × falla × tienda en un sistema de navegación coherente tanto en mobile como en desktop.

H
Heater
heaterhk.net
Reparación de móviles & tablets Shopify Sitio web grande
En resumen
Sector
Reparación de móviles & tablets (Hong Kong)
Plataforma
Shopify
Desafío
Sitio web muy grande; el header por defecto no daba abasto; mobile y desktop desconectados
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar (reemplazan el header principal)
Enfoque
Reemplazar el header, unificar la navegación de mobile + desktop

El problema del cliente

Heater es un sitio web grande: más de 13 marcas de dispositivos, cada marca con muchos modelos, cada modelo con muchos tipos de falla (pantalla, batería, puerto de carga, cámara, daño por agua…), más 5 tiendas y un flujo de reserva de cita / cotización. La estructura es en realidad un árbol muy amplio y profundo: marca × modelo × falla × tienda.

El header por defecto del theme no daba abasto con ese árbol. En desktop era una barra de menú plana; en mobile, en cambio, un hamburger drawer montado por separado. Dos experiencias distintas, dos lógicas distintas — el cliente acostumbrado al desktop tenía que volver a aprender desde cero al pasar a mobile. En un sitio grande, si el header es débil todo el sitio se vuelve difícil de navegar, y el cliente apurado porque su equipo está roto abandona aún más fácil.

Qué resuelve Navi+

La propuesta no fue "agregar un menú" sino reemplazar el rol del header principal por un sistema Navi+ unificado — una misma fuente de estructura para todos los dispositivos, para que mobile y desktop hablen el mismo lenguaje de navegación.

Desktop Mega Menu — reemplaza el header desktop, pliega todo el sitio en un solo lugar

El Mega Menu reemplaza la barra de menú por defecto en desktop: todo el conjunto de marca × tipo de falla se agrupa en una estructura con columnas claras y con imágenes. Un sitio grande se vuelve fácil de recorrer con solo pasar el cursor una vez — el cliente ve de inmediato qué marcas y qué fallas repara la tienda, en lugar de tener que probar página por página de cada marca.

Slide Menu — reemplaza el menú mobile, con la misma estructura que el desktop

En mobile, el Slide Menu reemplaza el hamburger por defecto y usa la misma estructura del mega menu: el cliente se desliza por los niveles marca → modelo → falla. Al venir de una misma fuente, mobile y desktop son consistentes — no hay que montar y mantener dos menús separados, y el cliente no tiene que volver a aprender al cambiar de dispositivo.

Tab Bar — completa el nuevo header con las acciones siempre a mano

El Tab Bar, fijo en la parte inferior de la pantalla en mobile, mantiene siempre disponibles las acciones importantes: Reservar cita, Tiendas, Llamar, Menú. Junto con el Slide Menu, reemplaza el resto del header por defecto — el cliente tiene una barra de navegación compacta, justo al alcance del pulgar, en lugar de tener que subir hasta la parte de arriba de la página.

El resultado buscado

Cuando el header principal se reemplaza por un sistema Navi+ unificado, un sitio web muy grande se vuelve fácil de navegar, y más importante aún — la experiencia en mobile y desktop se convierte en una sola. El cliente aprende una vez y lo usa en todas partes.

  • El header por defecto queda reemplazado por un único sistema de navegación Navi+.
  • El árbol del sitio grande (marca × modelo × falla) se pliega en pocos pasos claros.
  • Mobile y desktop quedan consistentes porque toman una misma fuente de estructura.
  • Menos trabajo de mantenimiento: ya no hay dos menús separados para dos dispositivos — sin necesidad de cambiar el theme.

Principios a recordar

Puntos que aplican a casi cualquier sitio web grande y de varios niveles — no solo a Heater.

  • El header es la columna vertebral de un sitio grande: cuanto más grande el sitio, más fuerte debe ser el header — Navi+ puede asumir ese rol.
  • Una sola fuente de estructura para todos los dispositivos: mobile y desktop toman un mismo árbol de categorías para ser siempre consistentes.
  • Plegar un sitio grande en pocos pasos: el mega menu + el slide menu convierten cientos de páginas en un camino corto.
  • Reemplazar el header, no cambiar el theme: mejorar la navegación sin rehacer la tienda ni desinstalar la app que ya está funcionando.

¿Tienes una tienda parecida y quieres probar Navi+? Revisa los tipos de menú o lee la documentación.

K
Khoi — Founder, Navi+
Creador de Navi+ y asesor directo de navegación para tiendas Shopify con muchas categorías.

Comienza con Navi+ AI Menu Builder

Elige tu plataforma — gratuito para instalar, activo en minutos.