Desktop Mega Menu Slide Menu Tab Bar

Heater — remplacer le header principal par Navi+ pour replier un grand site web en une navigation simple et cohérente entre mobile et desktop

Comment une grande chaîne de réparation à Hong Kong a remplacé tout son header par défaut par Navi+ — transformant des centaines de pages marque × model × panne × magasin en un système de navigation cohérent sur mobile comme sur desktop.

H
Heater
heaterhk.net
Réparation de téléphones & tablettes Shopify Grand site web
En bref
Secteur
Réparation de téléphones & tablettes (Hong Kong)
Plateforme
Shopify
Défi
Un site web très grand ; le header par défaut ne suit pas ; mobile et desktop dissociés
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar (en remplacement du header principal)
Objectif
Remplacer le header, unifier la navigation mobile + desktop

Le problème du client

Heater est un grand site web : plus de 13 marques d'appareils, chaque marque avec de nombreux modèles, chaque modèle avec plusieurs types de pannes (écran, batterie, port de charge, caméra, dégâts des eaux…), plus 5 magasins et un parcours de prise de rendez-vous / devis. La structure est en réalité un arbre très large et profond : marque × model × panne × magasin.

Le header par défaut du thème ne supporte pas cet arbre. Sur desktop, c'est une barre de menu plate ; sur mobile, c'est un hamburger drawer construit à part. Deux expériences différentes, deux logiques différentes — le visiteur habitué au desktop doit tout réapprendre en passant sur mobile. Sur un grand site, un header faible rend la navigation difficile sur tout le site, et le client pressé parce que son appareil est en panne abandonne d'autant plus vite.

Ce que Navi+ résout

L'approche proposée n'est pas « ajouter un menu » mais remplacer le rôle du header principal par un système Navi+ unifié — une même source de structure pour tous les appareils, pour que mobile et desktop parlent le même langage de navigation.

Desktop Mega Menu — remplacer le header desktop, replier tout le site en un seul endroit

Le Mega Menu remplace la barre de menu par défaut sur desktop : l'ensemble marque × type de panne est regroupé dans une structure en colonnes claires, avec images. Un grand site web devient facile à balayer en un seul survol — le client voit tout de suite quelles marques et quelles pannes le store répare, au lieu de tester chaque page marque l'une après l'autre.

Slide Menu — remplacer le menu mobile, même structure que le desktop

Sur mobile, le Slide Menu remplace le hamburger par défaut et utilise la structure même du mega menu : le client glisse par niveau marque → model → panne. Comme la source est unique, mobile et desktop sont cohérents — plus besoin de construire et maintenir deux menus séparés, et le client n'a pas à réapprendre en changeant d'appareil.

Tab Bar — compléter le nouveau header avec des actions toujours à portée de main

Le Tab Bar fixé en bas de l'écran mobile garde les actions importantes toujours disponibles : Rendez-vous, Magasins, Appeler, Menu. Avec le Slide Menu, il remplace le reste du header par défaut — le client dispose d'une barre de navigation compacte, à portée de pouce, au lieu de devoir remonter en haut de page.

Le résultat visé

Lorsque le header principal est remplacé par un système Navi+ unifié, un site web très grand devient facile à parcourir, et plus important encore — l'expérience sur mobile et sur desktop n'en fait plus qu'une. Le client apprend une fois, et s'en sert partout.

  • Le header par défaut est remplacé par un seul système de navigation Navi+.
  • Le grand arbre du site (marque × model × panne) est replié en quelques étapes claires.
  • Mobile et desktop sont cohérents car ils puisent dans une même source de structure.
  • Moins de maintenance : plus de deux menus séparés pour deux appareils — sans changer de thème.

Principes à retenir

Des points applicables à la plupart des grands sites web à plusieurs niveaux — pas seulement Heater.

  • Le header est la colonne vertébrale d'un grand site : plus le site est grand, plus le header doit être solide — Navi+ peut en assumer le rôle.
  • Une seule source de structure pour tous les appareils : mobile et desktop puisent dans un même arbre de catégories pour rester toujours cohérents.
  • Replier un grand site en quelques étapes : mega menu + slide menu transforment des centaines de pages en un chemin court.
  • Remplacer le header, sans changer de thème : améliorer la navigation sans refaire le store ni abandonner les apps en place.

Vous avez un store similaire et vous aimeriez essayer Navi+ ? Découvrez les types de menus ou consultez la documentation.

K
Khoi — Founder, Navi+
Créateur de Navi+, il conseille directement les stores Shopify aux multiples catégories sur leur navigation.

Commencez avec Navi+ AI Menu Builder

Choisissez votre plateforme — gratuit à installer, en direct en minutes.