Slide Menu Tab Bar scrollTo

Reload — une expérience monopage minimaliste, une navigation fluide grâce à scrollTo avec le Slide Menu et le Tab Bar

Reload est une landing page qui raconte le produit. Au lieu d'un menu qui mène vers d'autres pages, Navi+ utilise scrollTo pour glisser jusqu'à la bonne section, sur une seule et même page — minimaliste, rapide et intelligent.

R
Reload
reloadpaddle.com
Équipement de pickleball Shopify Landing monopage
En bref
Secteur
Équipement de pickleball (système de raquettes RLD-1)
Plateforme
Shopify
Défi
Un site monopage long — il faut se déplacer dans la page, sans recharger
Navi+ menus
Slide Menu · Tab Bar (navigation par scrollTo)
Objectif
Une expérience monopage minimaliste, fluide et intelligente

Le problème du client

Reload est un single-page site : toute l'histoire du produit — hero, mécanisme de surface de raquette interchangeable, version control et version power, plaques de remplacement, FAQ — tient sur une seule page longue à faire défiler. C'est un choix de design élégant, fidèle à l'esprit minimaliste de la marque.

Mais avec une structure monopage, un menu traditionnel est le mauvais outil : chaque entrée de menu mène vers une nouvelle URL, chaque clic est un rechargement de page, ce qui brise la continuité du défilement. Le client peut aussi se perdre facilement dans une longue page sans moyen de sauter rapidement à la bonne section. Sur mobile, remonter manuellement pour revenir à la section « Buy » après avoir lu jusqu'au bas de la page est une manipulation fatigante.

Ce que Navi+ résout

L'approche proposée est fidèle à l'esprit minimaliste : seulement deux menus, et tous deux utilisent scrollTo pour se déplacer dans la même page au lieu de charger une nouvelle page. Le menu devient la table des matières de la landing — on touche, et ça glisse jusqu'à la section correspondante.

Tab Bar + scrollTo — une table des matières toujours flottante au bas de l'écran

Le Tab Bar fixé en bas de l'écran mobile, chaque onglet est un point d'ancrage scrollTo sur la page : Top, How it works, Buy, FAQ, Cart. Quel que soit l'endroit où le client a défilé, il revient à la bonne section en un seul touché — en particulier au bouton d'achat, sans avoir à remonter toute la page. Un déplacement fluide, sans rechargement, sans perdre l'endroit où l'on lisait.

Slide Menu + scrollTo — la table des matières complète de la page, bien rangée

Le Slide Menu remplace le hamburger par défaut par une table des matières épurée : How it works, Control vs Power, Replacement sheets, FAQ, About. Chaque entrée est une ancre scrollTo — une fois sélectionnée, le panel se referme et la page glisse en douceur jusqu'à la bonne section. Pas de sous-niveaux superflus, pas de page intermédiaire : exactement l'esprit d'une landing minimaliste.

Ne pas utiliser le Desktop Mega Menu est un choix délibéré : une seule page, un seul flux de défilement — ajouter un mega menu ne ferait que casser la simplicité. Le bon outil pour la bonne structure.

Le résultat visé

Avec scrollTo, la navigation de Reload devient une partie de l'expérience monopage au lieu de la couper. Le menu est une table des matières vivante, le déplacement est fluide, et le bouton d'achat reste toujours à un seul touché du client — tout cela en conservant la simplicité de la marque.

  • Se déplacer dans la même page grâce à scrollTo — sans rechargement, sans perte de contexte.
  • Le menu devient une table des matières vivante, qui aide le client à sauter rapidement à la bonne section.
  • Le bouton d'achat reste toujours à un touché sur mobile, où que le client se trouve sur la page.
  • Préserver toute la simplicité — sans ajouter de mega menu ni de page intermédiaire inutile.

Principes à retenir

Des points applicables à la plupart des landing pages monopage — pas seulement Reload.

  • Un site monopage se navigue dans la page : utiliser scrollTo au lieu d'un lien vers une nouvelle page — sans rechargement, sans casser le flux de défilement.
  • Le menu est une table des matières vivante : chaque entrée glisse vers une section, ce qui évite au client de se perdre dans une longue page.
  • Le minimalisme est une fonctionnalité : peu d'entrées, chacune menant droit à une action — pour garder l'expérience épurée.
  • Ajouter une couche, sans changer la base : améliorer la navigation sans changer de thème ni refaire la page.

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.