Desktop Mega Menu Slide Menu Tab Bar

Baby Studio — un catálogo de mamá y bebé más fácil de explorar en Shopify con Mega Menu, Slide Menu y Tab Bar

Cómo Baby Studio reorganizó su navegación para que su catálogo de mamá y bebé fuera más fácil de descubrir tanto en desktop como en mobile.

BS
Baby Studio
babystudio.com.au
Retail de bebé y nursery Shopify Navegación mobile
En resumen
Sector
Baby & nursery retail
Plataforma
Shopify
Desafío
Catálogo con muchos grupos de productos y una navegación todavía plana
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar
Enfoque
Descubrir el catálogo en desktop, acciones rápidas en mobile

El problema del cliente

Baby Studio atiende a un grupo de clientes muy particular: padres, familias jóvenes y quienes compran regalos para los más pequeños. Con este grupo, la necesidad suele ser clara, pero el camino hacia el producto tiene muchas ramas: cochecitos, sillas de auto, nursery, alimentación, cuidado del bebé, juguetes, accesorios y grupos de productos según la edad o la situación de uso.

Cuando el catálogo tiene tantos grupos, el menú que viene por defecto con el theme empieza a quedar corto. En desktop, una barra de menú plana no logra mostrar todo el alcance de la tienda. En mobile, si todo queda escondido detrás del menú hamburguesa, el cliente tiene que abrir nivel por nivel y adivinar qué grupo contiene el producto que necesita.

Storefront de Baby Studio en desktop antes de Navi+ — navegación de categorías plana, sin mega menu
Baby Studio en desktop: muchos grupos de productos, pero el header sigue siendo una barra de menú plana, sin abrir el catálogo como mega menu.

El problema no es la falta de productos. El problema es que los productos son buenos, pero la estructura de navegación todavía no ayuda al cliente a ver qué vende la tienda, así que tiene que dar un paso extra para encontrar la sección correcta. En mobile, unos pocos pasos de más bastan para que el cliente se salte un grupo de productos importante.

Menú mobile de Baby Studio antes de Navi+ — primer nivel de navegación
El menú mobile actual: los grupos principales están dentro del drawer, el cliente tiene que abrir el menú antes de poder ver el catálogo.

Qué resuelve Navi+

El enfoque adecuado es no cambiar el theme ni rehacer toda la tienda. Navi+ se usa como una capa de navegación adicional, que reparte roles claros según cada contexto: en desktop hace falta una vista amplia, en mobile hacen falta acciones rápidas, y el cliente que ya está comprando necesita atajos a los puntos importantes.

Desktop Mega Menu — mostrarle al cliente qué hay en la tienda desde el primer momento

El Mega Menu puede dividir los grupos de productos principales en varias columnas claras, por ejemplo: prams & strollers, car seats, nursery, feeding, toys, baby care, sale o featured collections. Cada grupo tiene una etiqueta fácil de entender y una imagen representativa para que el cliente que recién entra a la tienda no tenga que hacer demasiados clics a prueba y error.

Slide Menu — entrar a fondo en las categorías sin recargar el mobile

El Slide Menu es ideal para un catálogo con muchos subgrupos. El cliente puede pasar de un grupo grande a uno más pequeño pantalla por pantalla, en una experiencia más parecida a una app que a una lista larga de links. Esto resulta especialmente útil cuando el cliente necesita elegir según su necesidad, la edad, el tipo de producto o los accesorios que lo acompañan.

Tab Bar — llevar el menú, la búsqueda y el carrito al alcance del pulgar

En mobile, el Tab Bar mantiene las acciones importantes siempre en la parte inferior de la pantalla: Home, Shop/Menu, Search, Cart, Account o Sale. El cliente no necesita subir hasta el header para buscar, abrir el menú o ver el carrito. Para un grupo de clientes que recorre muchos productos para el bebé, reducir estas acciones repetidas crea una experiencia más ligera.

El resultado después de Navi+

Tras reorganizar la navegación con Navi+, Baby Studio puede presentar su catálogo de una forma más cercana al comportamiento real de compra: en desktop se ven más grupos de productos, en mobile hay un camino más claro, y las acciones principales quedan en una posición fácil de tocar.

Mega menu de desktop actualizado de Baby Studio mostrando la navegación de Prams and Strollers con imágenes de producto
La actualización en desktop: la categoría Prams & Strollers se abre como mega menu, con subgrupos y productos de muestra.
Storefront mobile actualizado de Baby Studio con el Tab Bar inferior de Navi+
La actualización en mobile: el Tab Bar coloca Menu, Catalog, Blogs, Support y More en la parte inferior de la pantalla, justo en la zona de acción del pulgar.
Slide menu mobile actualizado de Baby Studio con productos destacados y links de categorías
El Slide Menu tras la actualización: un panel deslizante se superpone al storefront, conservando el contexto de la página de fondo y reuniendo en un mismo flujo las categorías, los productos destacados y los atajos de contacto.

El resultado que se busca no es simplemente un menú “más bonito”. El resultado es que el cliente nuevo entiende rápido qué hay en la tienda, el cliente en mobile encuentra la sección correcta con menos vueltas, y el header puede quedar más compacto sin perder funciones importantes como la búsqueda, el carrito y el menú.

  • El desktop muestra mejor todo el alcance del catálogo gracias al Mega Menu.
  • El mobile tiene un camino más claro gracias al Slide Menu.
  • La búsqueda, el carrito y el menú quedan más cerca del pulgar gracias al Tab Bar.
  • El cliente nuevo entiende más rápido qué hay en la tienda.
  • Un catálogo con muchos grupos de productos se vuelve más fácil de explorar sin necesidad de cambiar el theme.

Principios a recordar

Puntos que aplican a casi cualquier tienda con un catálogo de muchas ramas — no solo a Baby Studio.

  • Desktop para descubrir: el mega menu abre todo el alcance del catálogo desde el header, para que el cliente nuevo vea qué vende la tienda sin tener que hacer clics a prueba y error.
  • Mobile para entrar a fondo: el slide menu deja al cliente recorrer cada nivel como una app, ideal para un catálogo agrupado según la necesidad o la edad.
  • Las acciones principales al alcance del pulgar: llevar el menú, la búsqueda y el carrito al Tab Bar, quitándole peso al header.
  • Sumar una capa, no cambiar la base: mejorar la navegación sin cambiar el theme 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.