Visão Geral

A página Árvore de Categorias está dividida em duas seções principais, com um recurso poderoso de construir a partir do menu para ajudá-lo a começar rapidamente:

🌳 Visualização em Árvore (Painel Esquerdo)

Propósito: Esta hierarquia define os breadcrumbs e blocos de subcategorias exibidos na sua vitrine. As coleções na visualização em árvore irão:

• ✅ Aparecer nos caminhos de navegação breadcrumb

• ✅ Mostrar como subcategorias nas páginas de coleção

• ✅ Criar estruturas de navegação em múltiplos níveis

• ✅ Ser incluídas em dados estruturados (SEO)

📦 Categorias Não Atribuídas (Painel Direito)

Propósito: Breadcrumbs ocultos e subcategorias - coleções que existem na sua loja mas NÃO fazem parte da estrutura de navegação. As coleções em categorias não atribuídas irão:

• ❌ Não aparecer nos breadcrumbs

• ❌ Não mostrar como blocos de subcategorias

• ❌ Não ser incluídas na hierarquia de navegação

• ✅ Ainda ser acessível via URLs diretas

Visualização em árvore - principais recursos

🔍 Pesquisa

Localização: Caixa de pesquisa no topo da visualização em árvore Funcionalidade:

• Encontre categorias rapidamente pelo nome

• Filtra a árvore em tempo real

• Ajuda a navegar em grandes estruturas de categorias

🔄 Botão de Atualizar

Localização: Canto superior direito Propósito: Busca as coleções publicadas mais recentes da sua loja Shopify e sincroniza os menus Quando usar:

• Após adicionar novas coleções no admin do Shopify

• Para sincronizar mudanças recentes da sua loja

• Antes de fazer uma reorganização maior

• Quando você não vê seus menus no dropdown

🎯 Construir a partir do Menu

Localização: Grupo de botões ao lado do título da Visualização em Árvore Propósito: Construir automaticamente sua árvore de categorias com base na estrutura do menu de navegação existente do Shopify

Como funciona

• Selecione um menu no dropdown (Menu principal, Menu do rodapé, etc.)

• Clique no botão "Construir a partir do menu"

• O app automaticamente:

• - Importa todas as coleções publicadas do menu

• - Preserva a hierarquia do menu (relações pai → filho)

• - Suporta aninhamento em múltiplos níveis (3+ níveis)

• - Move coleções não usadas para o painel "Não Atribuídas"

O que é importado:

• ✅ Apenas coleções publicadas - Apenas itens do menu que linkam para coleções publicadas

• ✅ Hierarquia do menu - Relações pai → filho são preservadas

• ✅ Aninhamento multinível - Suporta estruturas de menu profundas (3+ níveis)

O que está excluído:

• ❌ Coleções rascunho/não publicadas - Apenas coleções publicadas são importadas

• ❌ Links HTTP - Links externos e URLs personalizados são ignorados

• ❌ Links de produtos - Links diretos para produtos não são importados

• ❌ Links de páginas - Links para páginas são excluídos

• ❌ Outros itens do menu - Blogs, busca, links do carrinho, etc. não são importados

Limitações importantes:

• ⚠️ Apenas coleções publicadas - Coleções rascunho ou não publicadas não serão importadas

• ⚠️ Apenas links do menu - Apenas coleções que estão no seu menu serão importadas

• ⚠️ Apenas ponto de partida - Você provavelmente precisará personalizar após a construção (adicionar mais coleções, reorganizar, etc.)

Cache do menu

Menus são armazenados em cache por 24 horas para carregamento mais rápido. O timestamp do cache é mostrado ao lado do grupo de botões (ex.: "Cached 14:30:25").

Precisa sincronizar menus?

Se você não vê seus menus no dropdown, clique no botão Atualizar para sincronizar os menus mais recentes da sua loja Shopify.

Indicadores visuais no dropdown do menu

• Itens de coleção - Cor normal, podem ser sincronizados com sua árvore

• Itens não pertencentes a coleção (links HTTP, etc.) - Cor cinza mais clara com badge de tipo (ex.: "HTTP")

• Menu padrão - Badge verde "Default"

⬇️ Botão recolher tudo

Localização: Ao lado da caixa de busca Propósito: Recolhe todas as categorias expandidas para mostrar apenas os itens de nível superior Caso de uso:

• Obter uma visão geral das suas principais categorias

• Navegar rapidamente por uma árvore complexa

• Antes de fazer alterações estruturais

⬆️ Botão expandir tudo

Localização: Ao lado do botão recolher tudo Propósito: Expande todas as categorias para mostrar a hierarquia completa Caso de uso:

• Ver a estrutura completa da categoria

• Encontrar itens profundamente aninhados

• Revisar toda a navegação de uma vez

Operações de arrastar e soltar

A árvore suporta funcionalidades poderosas de arrastar e soltar para organizar categorias.

Seleção múltipla

Como selecionar múltiplos itens:

• Selecionar o primeiro item: Clique em uma categoria

• Adicionar mais itens: - Segure ⌘/Ctrl + Clique = Adicionar itens individuais - Segure Shift + Clique = Selecionar intervalo de itens

• Arrastar juntos: Arraste qualquer item selecionado, todos os itens selecionados se movem juntos

Movendo categorias

Item único:

• Clique e segure uma categoria

• Arraste para nova posição

• Solte para posicionar: - Entre itens = Mesmo nível (irmão) - Sobre um item = Filho desse item (aninhamento) - Arraste para a esquerda enquanto aninhado = Desaninhamento (mover para um nível acima)

Múltiplos itens:

• Selecione múltiplas categorias (⌘/Ctrl + Clique)

• Arraste qualquer item selecionado

• Todos os itens selecionados se movem juntos

• Solte para posicioná-los como um grupo

Feedback visual

• Linha indicadora de arraste mostra onde os itens serão posicionados

• Realce ao passar o mouse sobre a categoria pai alvo

• Nível de indentação mostra a profundidade do aninhamento

Painel de categorias não atribuídas

Propósito e comportamento

Coleções neste painel estão ocultas de:

• Breadcrumbs

• Blocos de subcategorias

• Hierarquia de categorias

• Dados estruturados

Por que manter coleções não atribuídas?

• Coleções internas/somente para administradores

• Coleções sazonais não ativas no momento

• Coleções de teste

• Coleções usadas para outros propósitos (descontos, pacotes, etc.)

Adicionando à visualização em árvore

Método 1: Quando uma categoria está selecionada na árvore

• Clique para selecionar uma categoria na visualização em árvore (painel esquerdo)

• Marque uma ou mais coleções no painel Não atribuídas

• Clique em Adicionar ou arraste a coleção

• → A coleção se torna um filho da categoria selecionada

Método 2: Quando nenhuma categoria está selecionada

• Certifique-se de que nada está selecionado na visualização em árvore

• Marque uma ou mais coleções no painel Não atribuídas

• Clique em Adicionar ou arraste a coleção

• → A coleção é adicionada na parte inferior da árvore (nível raiz)

Pesquisar não atribuídas

Localização: Caixa de pesquisa no topo do painel Não atribuídas Funcionalidade:

• Filtrar a lista de coleções não atribuídas

• Encontrar coleções específicas rapidamente

• Mostra contagem: "Mostrando 27 coleções não atribuídas"

Atualizar não atribuídas

Ícone: Ícone de atualização ao lado da pesquisa Propósito: Atualiza a lista de coleções não atribuídas do Shopify

Atalhos de teclado

• ⌘/Ctrl + Clique = Seleção múltipla de categorias

• Shift + Clique = Selecionar intervalo de categorias

• Drag = Mover categoria(s)

• Click collapse icon = Alternar filhos da categoria

• Hold ⌘/Ctrl + Clique colapsar = Colapsar todos os filhos recursivamente

Salvando alterações

Auto-salvar: As alterações NÃO são salvas automaticamente Salvar manualmente:

• Clique no botão "Salvar" no canto inferior direito

• Todas as alterações são aplicadas juntas

• Atualize sua vitrine para ver as atualizações

Nomes personalizados para exibição de coleções

Você pode definir um nome de exibição personalizado para qualquer coleção usada em sua árvore. Isso permite mostrar um rótulo mais limpo, curto ou mais amigável para o cliente em seus breadcrumbs e subcategorias sem renomear a coleção real do Shopify.

• ✅ Mantenha o título original da coleção Shopify para uso interno/administrativo

• ✅ Mostre um rótulo diferente na navegação da vitrine (breadcrumbs + subcategorias)

• ✅ Útil para termos amigáveis para SEO, abreviações ou nomenclatura consistente

Como editar nomes de exibição

Na Árvore de Categorias, clique em uma coleção e edite seu Nome de Exibição diretamente. Notas:

• As alterações são salvas quando você clica em Salvar (igual às alterações na estrutura da árvore)

• Deixar o Nome de Exibição vazio remove o nome personalizado (retorna ao título da coleção)

• Recomendado: mantenha curto (ex.: 20-40 caracteres) para melhor experiência móvel

Como aparece na vitrine

Quando um nome de exibição existe, a interface da vitrine o prefere ao título original. Se nenhum nome de exibição for definido, o aplicativo usa o título da coleção do Shopify. Isso afeta:

• Rótulos de breadcrumbs para níveis de coleção

• Títulos/links do bloco de subcategorias (quando habilitado no seu tema)

Exemplos de estrutura de categoria

Exemplo Construir a partir do Menu

Antes de construir: Seu Menu Principal Shopify:

Main Menu
├─ Women (COLLECTION)
│  ├─ Dresses (COLLECTION)
│  │  ├─ Summer Dresses (COLLECTION)
│  │  └─ Evening Dresses (COLLECTION)
│  └─ Tops (COLLECTION)
├─ Men (COLLECTION)
│  ├─ Shirts (COLLECTION)
│  └─ Pants (COLLECTION)
├─ About Us (HTTP) ← Skipped
└─ Contact (HTTP) ← Skipped

Após clicar em "Build from menu": Sua Árvore de Categorias:

📁 Women
  └─ 👗 Dresses
      └─ ☀️ Summer Dresses
      └─ 🌙 Evening Dresses
  └─ 👕 Tops

📁 Men
  └─ 👔 Shirts
  └─ 👖 Pants

Resultado:

• Todos os itens da coleção importados com hierarquia preservada

• Links HTTP (About Us, Contact) automaticamente ignorados

• Pronto para personalizar ainda mais com arrastar e soltar

Exemplo de loja de moda

📁 Women
  └─ 👗 Dresses
      └─ ☀️ Summer Dresses
      └─ 🌙 Evening Dresses
      └─ 👔 Casual Dresses
  └─ 👕 Tops
  └─ 👖 Bottoms

📁 Men
  └─ 👔 Shirts
  └─ 👖 Pants
  └─ 🧥 Outerwear

📁 Sale
  └─ 50% Off
  └─ Clearance

Exemplo de loja de eletrônicos

📁 Computers
  └─ 💻 Laptops
      └─ Gaming Laptops
      └─ Business Laptops
  └─ 🖥️ Desktops
  └─ ⌨️ Accessories

📁 Smartphones
  └─ 📱 iPhone
  └─ 📱 Samsung
  └─ 📱 Google Pixel

Melhores práticas

Comece com Construir a partir do Menu

Fluxo de trabalho recomendado:

• Use Construir a partir do menu primeiro - Se você já tem um menu de navegação, use Construir a partir do Menu para começar rapidamente

• Revise a estrutura - Verifique se a hierarquia importada faz sentido

• Personalize conforme necessário - Adicione coleções faltantes, reorganize ou ajuste a profundidade

• Salve e teste - Salve suas alterações e verifique os breadcrumbs na sua vitrine

Benefícios:

• Economiza tempo em comparação com a configuração manual

• Preserva a estrutura do seu menu existente

• Fornece um ponto de partida sólido para personalização

Mantenha simples

Boa estrutura:

• Máximo de 2-3 níveis de profundidade

• 5-7 categorias por nível

• Nomes claros e descritivos

Má estrutura:

• Muitos níveis aninhados (confuso)

• Muitas categorias ao mesmo tempo (sobrecarregado)

• Nomes vagos como "Outro" ou "Diversos"

Organize pensando no cliente

Pense como seus clientes:

• Como eles procuram produtos?

• Qual é o modelo mental deles?

• O que é mais importante para eles?

Exemplo de moda: ✅ Por gênero primeiro (Women > Dresses) ❌ Por cor primeiro (Red > Women's Items) Exemplo de eletrônicos: ✅ Por tipo de dispositivo (Laptops > Gaming) ❌ Por marca primeiro (Apple > All Products)

Use nomenclatura consistente

Faça:

• Vestidos Femininos

• Camisas Masculinas

• Sapatos Infantis

Não faça:

• Vestidos para Mulheres

• Camisas (Homens)

• Calçados Infantis

Equilibre largura vs profundidade

Largura (Plano): Bom para catálogos pequenos

📁 Dresses
📁 Tops
📁 Pants
📁 Accessories

Profundidade (Aninhado): Bom para catálogos grandes

📁 Women
  └─ Dresses
  └─ Tops
  └─ Pants

Erros comuns a evitar

❌ Hierarquias muito profundas

Ruim:

Home › Fashion › Women › Clothing › Dresses › Casual › Summer › Floral

Bom:

Home › Women › Dresses › Summer Dresses

❌ Nomeação inconsistente

Ruim:

• Vestidos Femininos

• Tops para Mulheres

• Acessórios Femininos

• Sapatos Femininos

Bom:

• Vestidos Femininos

• Tops Femininos

• Acessórios Femininos

• Sapatos Femininos

❌ Categorias sobrepostas

Ruim:

📁 Sale Items
📁 Clearance
📁 Discounted Products

Bom:

📁 Sale
  └─ 50% Off
  └─ Clearance

Dicas para diferentes tamanhos de loja

Lojas pequenas (< 100 produtos)

Mantenha simples e plano:

📁 New Arrivals
📁 Dresses
📁 Tops
📁 Accessories
📁 Sale

Lojas médias (100-1000 produtos)

Adicione um nível de profundidade:

📁 Women
  └─ Dresses
  └─ Tops
📁 Men
  └─ Shirts
  └─ Pants
📁 Sale

Lojas grandes (mais de 1000 produtos)

Use hierarquias completas:

📁 Women
  └─ Clothing
      └─ Dresses
      └─ Tops
  └─ Accessories
📁 Men
  └─ Clothing
  └─ Accessories

Perguntas comuns