Slide Menu Tab Bar scrollTo

Reload — una experiencia de una sola página minimalista, navegación fluida con scrollTo usando Slide Menu y Tab Bar

Reload es una landing page que cuenta la historia del producto. En lugar de un menú que lleve a otra página, Navi+ usa scrollTo para deslizarse hasta la sección exacta dentro de la misma página — minimalista, rápido e inteligente.

R
Reload
reloadpaddle.com
Equipo de pickleball Shopify Landing de una sola página
En resumen
Sector
Equipo de pickleball (sistema de palas RLD-1)
Plataforma
Shopify
Desafío
Sitio de una sola página larga — hace falta moverse dentro de la página, sin recargar
Navi+ menus
Slide Menu · Tab Bar (navegación con scrollTo)
Enfoque
Experiencia de una sola página minimalista, fluida e inteligente

El problema del cliente

Reload es un single-page site: toda la historia del producto — hero, el mecanismo de la cara de pala intercambiable, la versión control y la versión power, las láminas de repuesto, FAQ — está en una sola página larga de scroll. Es una decisión de diseño bonita y fiel al espíritu minimalista de la marca.

Pero con una estructura de una sola página, el menú tradicional es la herramienta equivocada: cada ítem de menú lleva a una URL nueva, cada clic es una recarga de página, rompiendo el flujo de scroll continuo. El cliente además se pierde fácil en una página larga sin una forma de saltar rápido a la sección que quiere ver. En mobile, volver a hacer scroll hacia arriba a mano para regresar a la sección "Buy" después de haber leído hasta el final de la página es una operación cansadora.

Qué resuelve Navi+

La propuesta es fiel al espíritu minimalista: solo dos menús, y ambos usan scrollTo para moverse dentro de la misma página en lugar de cargar una nueva. El menú se convierte en el índice de la landing — tocas y se desliza hasta la sección correspondiente.

Tab Bar + scrollTo — un índice siempre flotando en la parte inferior de la pantalla

El Tab Bar, fijo en la parte inferior de la pantalla en mobile, con cada tab como un punto de anclaje scrollTo en la página: Top, How it works, Buy, FAQ, Cart. Por lejos que el cliente haya hecho scroll, salta a la sección exacta con un solo toque — sobre todo para volver al botón de compra sin tener que deslizar hacia arriba toda la página. Movimiento fluido, sin recargar, sin perder el punto donde iba leyendo.

Slide Menu + scrollTo — el índice completo de la página, ordenado

El Slide Menu reemplaza el hamburger por defecto con un índice limpio: How it works, Control vs Power, Replacement sheets, FAQ, About. Cada ítem es un anchor scrollTo — al elegir, el panel se cierra y la página se desliza suave hasta la sección exacta. Sin subniveles de más, sin páginas intermedias: tal cual una landing minimalista.

No usar el Desktop Mega Menu es una decisión deliberada: una página, un solo flujo de scroll — agregar un mega menu solo rompería el minimalismo. La herramienta justa para la estructura justa.

El resultado buscado

Con scrollTo, la navegación de Reload se vuelve parte de la experiencia de una sola página en lugar de cortarla. El menú es un índice vivo, el movimiento es fluido, y el botón de compra siempre está a un toque del cliente — todo manteniendo el minimalismo de la marca.

  • Moverse dentro de la misma página con scrollTo — sin recargar, sin perder el contexto.
  • El menú se convierte en un índice vivo, ayudando al cliente a saltar rápido a la sección exacta.
  • El botón de compra siempre a un toque en mobile, sin importar dónde esté el cliente en la página.
  • Conserva todo el minimalismo — sin agregar un mega menu ni páginas intermedias innecesarias.

Principios a recordar

Puntos que aplican a casi cualquier landing page de una sola página — no solo a Reload.

  • Si el sitio es de una sola página, navega dentro de la página: usa scrollTo en lugar de enlazar a una página nueva — sin recargar, sin cortar el flujo de scroll.
  • El menú es un índice vivo: cada ítem se desliza a una sección, ayudando al cliente a no perderse en una página larga.
  • El minimalismo es una función: pocos ítems, cada uno lleva directo a una sola cosa — manteniendo la experiencia limpia.
  • Sumar una capa, no cambiar la base: mejorar la navegación sin cambiar el theme ni rehacer la página.

¿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.