Categorias
Bem-vindo ao guia de Categorias do CMS E-commerce! Este manual irá ajudá-lo a criar, gerenciar e organizar a árvore de categorias do seu catálogo de produtos de forma hierárquica e estruturada.
Visão Geral
A tela de Categorias permite que você:
- 🌳 Visualize a árvore de categorias em formato hierárquico
- 🔍 Busque categorias pelo nome de forma rápida
- ➕ Crie novas categorias principais para organizar seus produtos
- 📂 Crie subcategorias dentro de categorias existentes
- ✏️ Edite categorias e subcategorias para ajustar informações
- 🗑️ Exclua categorias que não são mais necessárias
- 👁️ Visualize detalhes completos de cada categoria
- 🔄 Expanda e recolha níveis da árvore para facilitar navegação
As categorias são fundamentais para organizar o catálogo de produtos, permitindo que clientes encontrem facilmente o que procuram através de uma navegação estruturada e intuitiva.
Acessando a Tela de Categorias
A tela de categorias está localizada no menu de Catálogo do sistema. Ao acessá-la, você verá:
- Título "Categorias"
- Subtítulo "Visualize a árvore de categorias do catálogo de forma hierárquica"
- Botão "Nova Categoria"
- Barra de busca
- Botões "Expandir Tudo" e "Recolher Tudo"
- Árvore hierárquica com todas as categorias
Como Buscar Categorias
Busca por Nome
A barra de busca permite encontrar categorias específicas rapidamente:
Como usar:
- Digite o nome da categoria no campo de busca (ex: "Eletrônicos", "Smartphones", "Notebooks")
- O sistema filtra automaticamente enquanto você digita
- As categorias correspondentes serão destacadas e expandidas automaticamente
A busca funciona em tempo real e busca em todos os níveis da árvore. Se você buscar por uma subcategoria, a categoria pai será expandida automaticamente.
Expandir e Recolher Árvore
Para facilitar a visualização, você pode controlar a expansão da árvore:
Expandir Tudo:
- Clique no botão "Expandir Tudo"
- Todas as categorias e subcategorias serão expandidas
- Útil para ter uma visão geral completa
Recolher Tudo:
- Clique no botão "Recolher Tudo"
- Todas as categorias serão recolhidas
- Útil para organizar a visualização
Entendendo a Árvore de Categorias
A árvore de categorias exibe informações hierárquicas de forma visual:
Elementos da Árvore
Indicadores Visuais:
- 🔽 Seta para baixo: Categoria expandida com subcategorias visíveis
- ▶️ Seta para direita: Categoria recolhida com subcategorias ocultas
- 🔴 Ponto pequeno: Categoria sem subcategorias
Ícones:
- 📂 Pasta fechada: Categoria recolhida
- 📂 Pasta aberta: Categoria expandida
Informações Exibidas:
- Nome: Nome da categoria em destaque
- Nível: Badge colorido indicando o nível hierárquico (Nível 0, 1, 2, 3...)
- Status: Badge verde (Ativa) ou cinza (Inativa)
- Contador: Quantidade de subcategorias quando aplicável
Cores por Nível Hierárquico
A árvore utiliza um sistema de cores para facilitar a identificação dos níveis:
| Nível | Cor da Borda | Cor de Fundo | Badge |
|---|---|---|---|
| Nível 0 | Azul | Azul claro | Azul |
| Nível 1 | Roxo | Roxo claro | Roxo |
| Nível 2 | Verde | Verde claro | Verde |
| Nível 3 | Laranja | Laranja claro | Laranja |
| Nível 4+ | Ciclo reinicia do azul |
As cores e indentações ajudam a identificar rapidamente a relação entre categorias pai e subcategorias.
Como Criar uma Nova Categoria Principal
Passo a Passo para Criar
Passo 1: Clique em "Nova Categoria"
No canto superior direito da tela, clique no botão "Nova Categoria".
Passo 2: Preencha as Informações Básicas
Um modal será aberto solicitando as informações da categoria:
Campos Obrigatórios:
- Nome (obrigatório): Digite o nome da categoria (Ex: Eletrônicos, Moda, Casa e Decoração)
- Status (obrigatório): Selecione "Ativa" ou "Inativa"
Campos Opcionais:
- Descrição: Descreva a categoria (opcional)
- Slug: URL amigável (Ex: eletronicos, moda-feminina)
- Ícone do Menu: Link da imagem que representará a categoria
O slug é usado para criar URLs amigáveis. Use apenas letras minúsculas, números e hifens. Exemplo: "moda-feminina", "eletronicos"
Passo 3: Configure o Ícone do Menu (Opcional)
Para adicionar um ícone visual à categoria:
- Cole o link completo da imagem no campo "Ícone do Menu"
- Um preview pequeno aparecerá automaticamente
- Clique em "Ampliar" para visualizar em tamanho maior
- Verifique se a imagem está correta
Use imagens em formato PNG ou SVG com fundo transparente para melhor resultado. Dimensões recomendadas: 48x48px ou 64x64px.
Passo 4: Configure a Visibilidade
Ajuste onde a categoria será exibida:
Visível no Menu:
- ✅ Ativado: A categoria aparecerá no menu de navegação do site
- ❌ Desativado: A categoria ficará oculta do menu
Visível no Filtro:
- ✅ Ativado: A categoria aparecerá nos filtros de produtos
- ❌ Desativado: A categoria não será exibida nos filtros
Mesmo que a categoria esteja inativa, você pode configurar a visibilidade. No entanto, categorias inativas nunca serão exibidas no site.
Passo 5: Confirme a Criação
- Revise todas as informações preenchidas
- Clique no botão "Criar Categoria"
- Aguarde a confirmação (você verá "Criando...")
- A nova categoria aparecerá na árvore
Após criar, a categoria aparecerá imediatamente na árvore de categorias como uma categoria de Nível 0.
Como Criar uma Subcategoria
Passo a Passo para Criar Subcategoria
Passo 1: Localize a Categoria Pai
- Na árvore de categorias, encontre a categoria onde deseja adicionar uma subcategoria
- Passe o mouse sobre a linha da categoria
- Botões de ação aparecerão
Passo 2: Clique em "Nova Subcategoria"
- Clique no botão "Nova Subcategoria" (ícone de +)
- Um modal será aberto
Passo 3: Preencha os Dados da Subcategoria
O processo é idêntico à criação de uma categoria principal:
- Nome (obrigatório): Digite o nome da subcategoria (Ex: Smartphones, Notebooks)
- Descrição: Descreva a subcategoria (opcional)
- Slug: URL amigável
- Ícone do Menu: Link da imagem (opcional)
- Status: Ativa ou Inativa
- Visibilidade: Configure menu e filtros
O modal mostrará o nome da categoria pai no subtítulo para confirmar onde a subcategoria será criada.
Passo 4: Confirme a Criação
- Clique em "Criar Subcategoria"
- Aguarde o processamento (você verá "Criando...")
- A subcategoria aparecerá dentro da categoria pai
Você pode criar subcategorias dentro de subcategorias, formando múltiplos níveis hierárquicos.
Interagindo com Categorias na Árvore
Ações Disponíveis ao Passar o Mouse
Ao passar o mouse sobre qualquer categoria na árvore, botões de ação aparecem:
Botões Disponíveis:
- ✏️ Editar: Abre o modal de edição da categoria
- ➕ Nova Subcategoria: Cria uma subcategoria dentro desta categoria
- 👁️ Detalhes: Abre a tela de detalhes completos
- 🗑️ Excluir: Remove a categoria (com confirmação)
Alguns botões podem não aparecer dependendo das suas permissões de acesso no sistema.
Expandir/Recolher Categoria Individual
Para expandir ou recolher uma categoria específica:
- Clique na linha da categoria que possui subcategorias
- A seta mudará de direção:
- ▶️ → 🔽: Categoria expandida (subcategorias visíveis)
- 🔽 → ▶️: Categoria recolhida (subcategorias ocultas)
Visualizando Detalhes de uma Categoria
Acessar a Tela de Detalhes
Para ver informações completas sobre uma categoria:
- Passe o mouse sobre a categoria desejada
- Clique no botão "Detalhes" (ícone de olho)
- Você será direcionado para a tela de detalhes
Informações Disponíveis na Tela de Detalhes
1. Cabeçalho
- Nome da categoria em destaque
- Botão "Editar Categoria": Para modificar informações
- Botão "Excluir Categoria": Para remover (vermelho)
2. Card de Informações Básicas
Exibe todos os dados da categoria:
Campos Exibidos:
- ID da Categoria: Identificador único (fundo cinza, não editável)
- Nome da Categoria: Nome atual
- Nível: Badge colorido com o nível hierárquico
- Status: Badge verde (Ativa) ou cinza (Inativa)
- Slug (URL): URL amigável da categoria
- Ícone do Menu: Preview da imagem com opção de ampliar
- Descrição: Texto descritivo completo
- Configurações de Visibilidade: Status de visibilidade no menu e filtros
3. Card de Subcategorias (quando aplicável)
Se a categoria possui subcategorias, um card adicional será exibido:
- Lista de todas as subcategorias
- Link clicável para ver detalhes de cada subcategoria
- Quantidade total de subcategorias
4. Card de Informações de Auditoria
Criação:
- 👤 Criado por: Nome do usuário que criou a categoria
- 📅 Data de criação: Data e hora da criação
Última Atualização (quando aplicável):
- 👤 Atualizado por: Nome do usuário que fez a última alteração
- 📅 Data de atualização: Data e hora da última modificação
Como Editar uma Categoria
Passo a Passo para Editar
Método 1: Editar pela Árvore
- Passe o mouse sobre a categoria na árvore
- Clique no botão "Editar" (ícone de lápis)
- O modal de edição será aberto
Método 2: Editar pela Tela de Detalhes
- Acesse a tela de detalhes da categoria
- Clique no botão "Editar Categoria" no cabeçalho
- O modal de edição será aberto
Passo 2: Modifique os Dados
Um modal será aberto com todos os campos preenchidos:
- Nome: Altere o nome se necessário
- Descrição: Atualize a descrição
- Slug: Modifique a URL amigável
- Ícone do Menu: Altere ou adicione link de imagem
- Status: Mude entre Ativa/Inativa
- Visibilidade: Ajuste configurações de menu e filtros
Alterar o slug pode afetar URLs de produtos e links externos. Certifique-se de que essa mudança é necessária.
Passo 3: Salve as Alterações
- Revise as modificações
- Clique no botão "Atualizar Categoria"
- Aguarde a confirmação (você verá "Atualizando...")
- As informações serão atualizadas automaticamente
Como Excluir uma Categoria
Passo a Passo para Excluir
A exclusão de uma categoria é irreversível. Categorias com subcategorias ou produtos vinculados não podem ser excluídas.
Método 1: Excluir pela Árvore
- Passe o mouse sobre a categoria na árvore
- Clique no botão "Excluir" (ícone de lixeira, vermelho)
- Um diálogo de confirmação será exibido
Método 2: Excluir pela Tela de Detalhes
- Acesse a tela de detalhes da categoria
- Clique no botão "Excluir Categoria" (vermelho) no cabeçalho
- Um diálogo de confirmação será exibido
Passo 2: Confirme a Exclusão
Um diálogo de confirmação será exibido com:
- Título: "Confirmar exclusão"
- Mensagem: Confirmação com o nome da categoria
- Aviso: "Esta ação não pode ser desfeita e pode afetar produtos associados"
Passo 3: Finalize a Exclusão
- Leia atentamente o aviso
- Clique em "Excluir" para confirmar (ou "Cancelar" para desistir)
- Aguarde o processamento (você verá "Excluindo...")
- Você será redirecionado para a lista de categorias
Se a categoria possui subcategorias ou produtos vinculados, o sistema impedirá a exclusão e exibirá uma mensagem explicativa.
Casos de Uso Práticos
1. Organizar Loja de Eletrônicos
Situação: Criar uma estrutura hierárquica para uma loja de eletrônicos.
Como fazer:
- Crie categoria principal: "Eletrônicos"
- Dentro de Eletrônicos, crie subcategorias:
- Smartphones
- Notebooks
- Tablets
- Acessórios
- Dentro de Smartphones, crie subcategorias por marca:
- Samsung
- Apple
- Xiaomi
Resultado: Hierarquia de 3 níveis para facilitar navegação.
2. Criar Categoria Sazonal Temporária
Situação: Adicionar categoria para Black Friday.
Como fazer:
- Crie categoria principal: "Black Friday"
- Configure como Ativa
- Configure visibilidade:
- ✅ Visível no Menu
- ✅ Visível no Filtro
- Após o evento, altere o status para Inativa
Resultado: Categoria temporária que pode ser reativada em eventos futuros.
3. Ocultar Categoria em Manutenção
Situação: Esconder categoria temporariamente sem excluir.
Como fazer:
- Acesse a categoria desejada
- Clique em "Editar"
- Altere o status para Inativa
- Ou desative "Visível no Menu" e "Visível no Filtro"
- Salve as alterações
Resultado: Categoria oculta dos clientes, mas preservada no sistema.
4. Reorganizar Hierarquia de Categorias
Situação: Mover uma categoria para dentro de outra.
Como fazer:
- Anote os produtos e subcategorias da categoria origem
- Crie uma nova subcategoria no destino desejado
- Transfira os produtos
- Exclua a categoria antiga (se vazia)
Atualmente não há função de arrastar e soltar. A reorganização requer criação de novas estruturas.
5. Buscar Categoria em Árvore Grande
Situação: Encontrar uma categoria específica em uma árvore com muitas categorias.
Como fazer:
- Use a barra de busca
- Digite o nome da categoria (ex: "Camisetas")
- O sistema filtrará e expandirá automaticamente a hierarquia
- A categoria será destacada
Resultado: Localização rápida sem necessidade de navegar manualmente.
Problemas Comuns e Soluções
❌ "Nenhuma categoria cadastrada"
Problema: A árvore está vazia e não há categorias cadastradas.
Soluções:
- Se for seu primeiro acesso, crie categorias clicando em "Nova Categoria"
- Verifique se há filtros de busca ativos e limpe o campo de busca
- Verifique se você tem permissão para visualizar categorias
❌ "Nenhuma categoria encontrada com esse filtro"
Problema: A busca não retornou resultados.
Soluções:
- Verifique a ortografia do termo buscado
- Tente termos mais genéricos ou parciais
- Limpe o campo de busca pressionando X ou apagando o texto
- Use o botão "Expandir Tudo" para verificar se a categoria existe
❌ Não consigo criar subcategoria
Problema: O botão "Nova Subcategoria" não aparece ou está desabilitado.
Soluções:
- Verifique se você tem permissão para criar categorias
- Certifique-se de que está passando o mouse sobre a categoria correta
- Tente recarregar a página
- Entre em contato com o administrador para verificar permissões
❌ Erro ao excluir categoria
Problema: A exclusão falha ou retorna erro.
Possíveis causas:
- A categoria possui subcategorias
- Há produtos vinculados a esta categoria
- Você não tem permissão para excluir categorias
Soluções:
- Primeiro, exclua todas as subcategorias
- Verifique se há produtos usando esta categoria e mova-os para outra categoria
- Entre em contato com o administrador se o problema persistir
❌ Ícone do menu não aparece
Problema: O ícone não é exibido após adicionar o link.
Soluções:
- Verifique se o link está correto e completo (deve começar com https://)
- Certifique-se de que a imagem está acessível publicamente
- Teste o link colando-o diretamente no navegador
- Use formatos compatíveis: PNG, JPG, SVG
- Verifique se a imagem não está bloqueada por CORS
❌ Categoria não aparece no site
Problema: Categoria criada mas não visível no site.
Soluções:
- Verifique se o status está como "Ativa"
- Confirme se "Visível no Menu" está ativado
- Limpe o cache do site
- Aguarde alguns minutos para atualização
- Verifique se a categoria pai também está ativa e visível
Boas Práticas
📝 Nomenclatura de Categorias
-
Use nomes claros e descritivos
- ✅ Correto: "Notebooks", "Smartphones", "Moda Feminina"
- ❌ Evite: "Cat1", "Produtos", "Diversos"
-
Mantenha consistência
- Se usar plural em uma categoria, use em todas (ex: "Notebooks", "Smartphones")
- Se usar singular, mantenha o padrão (ex: "Notebook", "Smartphone")
-
Evite nomes muito longos
- ✅ Correto: "Camisetas Masculinas"
- ❌ Evite: "Camisetas e Polos Masculinos de Algodão e Poliéster"
-
Use hierarquia lógica
- Nível 0: Categorias amplas (ex: "Eletrônicos")
- Nível 1: Categorias específicas (ex: "Smartphones")
- Nível 2: Subcategorias detalhadas (ex: "Samsung Galaxy")
🌳 Organização da Hierarquia
-
Limite a profundidade
- Ideal: 2-3 níveis
- Máximo recomendado: 4 níveis
- Hierarquias muito profundas dificultam a navegação
-
Agrupe logicamente
- Pense como o cliente navegaria
- Agrupe produtos similares
- Evite categorias com apenas 1 produto
-
Equilibre a distribuição
- Evite muitas subcategorias em um único nível
- Distribua produtos de forma equilibrada
- Máximo recomendado: 10-15 subcategorias por nível
🎯 Configuração de Visibilidade
-
Planeje a visibilidade
- Use "Visível no Menu" para categorias de navegação principal
- Use "Visível no Filtro" para categorias úteis na busca
- Desative ambos para categorias internas ou em preparação
-
Categorias sazonais
- Crie com antecedência
- Mantenha inativas até o momento certo
- Reutilize em eventos futuros
-
Testes antes de ativar
- Crie categorias como inativas
- Preencha com produtos
- Configure imagens e descrições
- Só então ative e torne visível
🖼️ Ícones do Menu
-
Qualidade das imagens
- Use imagens de alta qualidade
- Formatos recomendados: PNG (com transparência) ou SVG
- Dimensões: 48x48px ou 64x64px
- Evite imagens muito pesadas (máximo 100KB)
-
Consistência visual
- Use o mesmo estilo para todos os ícones
- Mantenha cores harmoniosas
- Use ícones relacionados ao conteúdo da categoria
-
Hospedagem
- Use serviços confiáveis (CDN, servidor próprio)
- Certifique-se de que as imagens estão acessíveis publicamente
- Evite links temporários ou de armazenamento local
⚠️ Cuidados ao Editar e Excluir
-
Antes de editar
- Verifique impacto em produtos vinculados
- Comunique mudanças importantes à equipe
- Faça alterações fora de horários de pico
-
Antes de excluir
- Confirme que não há produtos vinculados
- Verifique se não há subcategorias
- Considere inativar em vez de excluir
- Documente a exclusão se necessário
-
Alterações de slug
- Evite alterar slugs de categorias já publicadas
- Se necessário, configure redirecionamentos
- Atualize links em materiais de marketing
Perguntas Frequentes (FAQ)
Posso ter categorias com o mesmo nome?
Tecnicamente sim, mas não é recomendado. Isso pode confundir tanto administradores quanto clientes. Use nomes únicos e descritivos.
Existe limite de níveis hierárquicos?
Não há limite técnico, mas recomenda-se usar no máximo 3-4 níveis. Hierarquias muito profundas dificultam a navegação dos clientes.
Posso mover uma categoria para outro local na árvore?
Atualmente não há função de arrastar e soltar. Para reorganizar, você precisa criar uma nova categoria no local desejado e transferir os produtos.
O que acontece com produtos quando excluo uma categoria?
O sistema impede a exclusão de categorias com produtos vinculados. Primeiro transfira os produtos para outra categoria, depois exclua.
Posso ter uma categoria ativa com todas as subcategorias inativas?
Sim. O status de cada categoria é independente. No entanto, subcategorias inativas não serão exibidas no site.
Como faço para reordenar categorias no mesmo nível?
Atualmente a ordem é determinada pela data de criação. Para reordenar, entre em contato com o suporte técnico.
O slug precisa ser único?
Sim, slugs devem ser únicos em todo o sistema para evitar conflitos de URL.
Posso usar caracteres especiais no nome da categoria?
Sim no nome, mas evite no slug. O slug deve conter apenas letras minúsculas, números e hifens.
Suporte
Precisa de Ajuda?
Se você encontrou algum problema ou tem dúvidas:
- Verifique este manual para soluções comuns
- Consulte a seção de Problemas Comuns acima
- Entre em contato com o suporte técnico com as seguintes informações:
- Print da tela ou descrição do problema
- Nome da categoria (se aplicável)
- Mensagens de erro exibidas
- O que você estava tentando fazer
Informações Úteis ao Contatar o Suporte
Tenha em mãos:
- Seu nome de usuário
- Nome da categoria relacionada
- ID da categoria (se disponível)
- Nível hierárquico da categoria
- Prints de tela do problema
- Descrição detalhada do que você tentou fazer
Glossário
| Termo | Significado |
|---|---|
| Categoria | Agrupamento principal de produtos no catálogo |
| Subcategoria | Categoria criada dentro de outra categoria (categoria filha) |
| Categoria Pai | Categoria que contém subcategorias |
| Nível Hierárquico | Profundidade da categoria na árvore (0 = principal, 1, 2, 3...) |
| Slug | URL amigável da categoria (ex: /eletronicos/smartphones) |
| Árvore de Categorias | Visualização hierárquica de todas as categorias |
| Status | Estado da categoria (Ativa ou Inativa) |
| Visibilidade | Configuração de onde a categoria é exibida (Menu, Filtros) |
| Ícone do Menu | Imagem visual que representa a categoria |
| Expandir/Recolher | Mostrar ou ocultar subcategorias na árvore |
| Badge | Etiqueta visual que indica nível, status ou contador |
Próximos Passos
Após dominar as categorias, você pode:
- 📦 Vincular produtos às categorias criadas
- 🏷️ Criar atributos específicos por categoria
- 🎨 Personalizar a aparência das categorias no site
- 📊 Analisar desempenho de produtos por categoria
- 🔗 Configurar regras de navegação avançadas
Bom uso da ferramenta de categorias! 🚀