Desktop Mega Menu Slide Menu Tab Bar

Baby Studio — catálogo de mãe e bebê mais fácil de navegar no Shopify com Mega Menu, Slide Menu e Tab Bar

Como a Baby Studio reorganizou a navegação para tornar o catálogo de mãe e bebê mais fácil de explorar tanto no desktop quanto no mobile.

BS
Baby Studio
babystudio.com.au
Varejo de mãe e bebê Shopify Navegação mobile
Em resumo
Setor
Baby & nursery retail
Plataforma
Shopify
Desafio
Catálogo com muitos grupos de produtos e navegação ainda plana
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar
Foco
Explorar o catálogo no desktop, agir rápido no mobile

O problema do cliente

A Baby Studio atende um público bem específico: pais, famílias jovens e quem compra presentes para crianças pequenas. Para esse público, a necessidade costuma ser clara, mas o caminho até o produto tem muitas ramificações: carrinhos, cadeirinhas de carro, quarto do bebê, alimentação, cuidados com o bebê, brinquedos, acessórios, e grupos de produtos por idade ou situação de uso.

Quando o catálogo tem tantos grupos assim, o menu padrão do tema costuma começar a faltar espaço. No desktop, uma barra de menu plana não consegue mostrar toda a amplitude da loja. No mobile, se tudo fica escondido atrás do menu hambúrguer, o cliente precisa abrir cada nível sozinho e adivinhar qual grupo contém o produto que ele precisa.

Storefront da Baby Studio no desktop antes do Navi+ — navegação de categorias plana, sem mega menu
A Baby Studio no desktop: muitos grupos de produtos, mas o header ainda é uma barra de menu plana, sem abrir o catálogo em mega menu.

O problema não é falta de produtos. O problema é que os produtos são bons, mas a estrutura de navegação ainda não ajuda o cliente a enxergar o que a loja vende, então ele precisa de um passo a mais para encontrar a área certa. No mobile, alguns passos extras já bastam para o cliente ignorar um grupo de produtos importante.

Menu mobile da Baby Studio antes do Navi+ — primeiro nível de navegação
O menu mobile atual: os grupos principais ficam no drawer, e o cliente precisa abrir o menu antes de enxergar o catálogo.

O que o Navi+ resolve

A abordagem certa é não trocar o tema e não refazer a loja inteira. O Navi+ é usado como uma camada de navegação adicional, dividindo bem os papéis por contexto: o desktop precisa de uma visão ampla, o mobile precisa de operação rápida, e o cliente que está comprando precisa de atalhos para os pontos importantes.

Desktop Mega Menu — mostra ao cliente o que a loja tem logo de cara

O Mega Menu pode dividir os principais grupos de produtos em várias colunas bem claras, por exemplo: carrinhos & strollers, cadeirinhas de carro, quarto do bebê, alimentação, brinquedos, cuidados com o bebê, sale ou featured collections. Cada grupo tem um rótulo fácil de entender e uma imagem de referência, para que quem acabou de chegar à loja não precise ficar clicando à toa.

Slide Menu — vai fundo nas categorias sem deixar o mobile pesado

O Slide Menu é ideal para catálogos com muitos subgrupos. O cliente pode ir do grupo maior para o menor tela a tela, numa experiência mais parecida com um app do que com uma lista longa de links. Isso é especialmente útil quando o cliente precisa escolher por necessidade, idade, tipo de produto ou acessório que acompanha.

Tab Bar — traz menu, busca e carrinho para o alcance do dedão

No mobile, o Tab Bar mantém as ações importantes sempre na parte de baixo da tela: Home, Shop/Menu, Search, Cart, Account ou Sale. O cliente não precisa subir até o header para buscar, abrir o menu ou ver o carrinho. Para um público que navega por muitos produtos para o bebê, reduzir essa repetição de ações cria uma experiência mais leve.

O resultado — depois do Navi+

Depois de reorganizar a navegação com o Navi+, a Baby Studio passou a apresentar o catálogo de uma forma mais próxima do comportamento real de compra: o desktop mostra mais grupos de produtos, o mobile tem um caminho mais claro, e as ações principais ficam num lugar fácil de tocar.

Mega menu atualizado da Baby Studio no desktop mostrando a navegação de Prams and Strollers com imagens de produtos
A versão atualizada no desktop: a categoria Prams & Strollers se abre em mega menu, com subgrupos e produtos ilustrativos.
Storefront mobile atualizado da Baby Studio com o Tab Bar inferior do Navi+
A versão atualizada no mobile: o Tab Bar coloca Menu, Catalog, Blogs, Support e More na parte de baixo da tela, exatamente na zona de ação do dedão.
Slide menu mobile atualizado da Baby Studio com destaques de produtos e links de categorias
O Slide Menu depois da atualização: o painel desliza por cima do storefront, mantendo o contexto da página atrás e trazendo categorias, produtos em destaque e atalhos de contato no mesmo fluxo.

O resultado a buscar não é simplesmente um menu “mais bonito”. O resultado é que o novo cliente entende rápido o que a loja tem, o cliente mobile encontra a área certa com menos voltas, e o header pode ficar mais enxuto sem perder funções importantes como search, cart e menu.

  • O desktop mostra melhor a amplitude do catálogo com o Mega Menu.
  • O mobile tem um caminho mais claro com o Slide Menu.
  • Search, cart e menu ficam mais perto do dedão com o Tab Bar.
  • O novo cliente entende mais rápido o que a loja tem.
  • Um catálogo com muitos grupos de produtos fica mais fácil de navegar sem precisar trocar o tema.

Princípios a reter

Pontos que se aplicam à maioria das lojas com catálogo de muitas ramificações — não só à Baby Studio.

  • Desktop para descobrir: o mega menu abre a amplitude do catálogo já a partir do header, para que o novo cliente veja o que a loja vende sem ficar clicando à toa.
  • Mobile para ir fundo: o slide menu deixa o cliente passar por cada nível como num app, ideal para catálogos agrupados por necessidade ou idade.
  • As ações principais ao alcance do dedão: leve menu, busca e carrinho para o Tab Bar, tirando o peso do header.
  • Adicionar uma camada, sem trocar a base: melhore a navegação sem precisar mudar o tema nem remover o app que já está rodando.

Tem uma loja parecida e quer experimentar o Navi+? Dá uma olhada nos tipos de menu ou leia a documentação.

K
Khoi — Founder, Navi+
Criou o Navi+ e cuida pessoalmente da consultoria de navegação para lojas Shopify com muitas categorias.

Comece com Navi+ AI Menu Builder

Escolha sua plataforma — gratuito para instalar, ao vivo em minutos.