Como organizar a ordem do menu lateral?

[Matheus]

Vale para lojas com o editor antigo, em que o editor (botão Editar frente de loja na página inicial do painel) mostra as coleções Configurações, Layout, Páginas, Posts do blog, Páginas extra e Widgets. Lojas na versão Cloud Commerce usam outro editor.

Olá lojista,
Neste tutorial você aprende a organizar o primeiro nível do menu lateral, o mesmo que aparece para você no mobile e no desktop. O primeiro passo é entrar no CMS.
Depois vá em Layout > Menu lateral e abrirá algo como:

Nesse caso, já estão inseridas 5 categorias no campo Categorias principais.
Caso não tenha nenhuma categoria na lista, não há problema. Esse campo apenas organiza na ordem que você quer. Sem nenhuma categoria inserida, o menu usa a ordem padrão.
Se você tiver 10 categorias e colocar ordem em apenas 5, essas 5 aparecem primeiro e as outras 5 aparecem depois, na ordem padrão.

Para mover as categorias de lugar, basta clicar e arrastar no botão =, como pode ser visto destacado na imagem abaixo:

Caso queira inserir mais categorias, clique no botão + no canto superior direito do campo Categorias principais (em telas mais antigas do editor, o botão se chama Add categorias principais). Aparecerá algo como:

Basta clicar na seta para baixo e escolher a categoria pelo nome. A lista mostra todas as categorias, mas só fazem efeito as de primeiro nível (as que não estão dentro de outra categoria). Para colocá-la em outra posição, clique no botão = e arraste para a posição desejada, conforme podemos ver:

Depois clique em Publicar e aguarde alguns minutos. Se a mudança não aparecer, veja Alterei banner, menu ou produto e o site não mudou.

Outras opções da mesma tela

• Ordem alfabética: coloca as categorias em ordem alfabética, inclusive as subcategorias. As que estiverem em Categorias principais continuam aparecendo primeiro. Veja também Como organizar categorias no menu lateral em ordem alfabética?.
• As subcategorias (segundo nível em diante) não são ordenadas por este campo.

Esconder uma categoria do menu lateral

Se quiser esconder alguma categoria do menu lateral, coloque o código abaixo em Layout > Inserir código, no campo CSS customizado, trocando ID-DA-CATEGORIA pelo ID da categoria:

#c-ID-DA-CATEGORIA {
  display: none;
}

Um exemplo é:

#c-5ef1021d14ff772fde7aaa82 {
  display: none;
}

O ID da categoria fica no final do endereço (URL) da página da categoria no painel. Veja onde encontrar o ID.

---

Se depois de publicar e testar em uma guia anônima a ordem não mudar, abra um ticket informando o endereço da loja e a ordem que você configurou.

[mobifans]

Oi Matheus,
Não está aparecendo as categorias no nosso admin em Layout > Menu lateral
Pode verificar?

Gostaria que o lateral ficasse na mesma ordem do menu central.

[Matheus]

No tutorial acima, só tem 5 pré-cadastradas, pois já havia clicado no botão Add categorias principais que está na parte superior direita. Basta clicar que irá aparecer o campo de selecionar categorias. Já clicou nesse botão?

[Matheus]

Atualizei o tutorial, informando justamente a sua dúvida @mobifans

[mobifans]

Tudo certo agora, obrigado.

[mobifans]

Boa tarde @Matheus, mais uma dúvida dentro deste mesmo tópico, poderia demonstrar como organizar também as categorias filhas e netas pelo CMS?
Tipo tem como ordenar livremente, arrastando ou alocando de forma diferente?

[Matheus]

As filhas não, somente as categorias do primeiro nível

[mobifans]

As de primeiro nível ok, no caso seria necessário que ficasse organizado o menu lateral da categoria neta igual ao que temos no mobifans.com.br, para que apresente desta forma, o que precisamos fazer?

[Matheus]

Boa noite, essa ordem aí é por ordem de criação.

[Matheus]

As de segundo nível em diante

[mobifans]

Seria possível reorganizar elas dentro do cms, ou mesmo do painel administrativo através de importação via planilha no Drive?
O que sugere que seja mais prático para resolver?

Pensando na lógica de ordenação que tem ali no print comparando as lojas, tem como replicar o padrão da loja mobi na Customic tb?

A loja veio importada da e-com club, não chegamos a tratar diretamente com a criação um a um das categorias então não tivemos como pensar na ordem na hora de alocar as filhas e netas no meno, foram criadas todas uma única só vez na importação.

[thais]

Oi @mobifans, tudo bem?

Me passe a ordem exata que precisa que vejo aqui se em código é possível.
Pelo CMS não tem essa opção…

Aguardo vc!

[mobifans]

Olá @thais Bom dia, tudo ótimo!

Pois então, estamos analisando essa questão das ordens das categorias, ficaria bacana uma opção destas para incluir no CMS futuramente, para todos os lojistas conseguirem reorganizar as categorias livremente, fica como sugestão para implementações futuras

Precisamos alterar as ordens dos iphones no nível de categorias Neta alocadas em Aparelhos>iPhones, seguindo a lógica de modelos mais novos para mais antigos, ficaria dessa forma ali no menu lateral:

Bacana mesmo se ficasse igualzinho ao menu da direita, em negrito.

Aguardo vc!

Obrigado pelo suporte de todos, vocês são Show!

Abs.

[Matheus]

Via CSS é muito fácil, veja:

#a-iphone .menu__list {
  display: flex;
  flex-direction: column;
  font-weight: bold
}
#a-iphone .menu__list a#c-5f1f3f4df023684cdbd4a1d5 {
  order: 1;
}
#a-iphone .menu__list a#c-5f1f3f4cf023684cdbd4a1d2 {
  order: 2;
}
#a-iphone .menu__list a#c-5f1f3f4af023684cdbd4a1ce {
  order: 3
}
#a-iphone .menu__list a#c-5f1f3f42f023684cdbd4a1be {
  order: 4
}
#a-iphone .menu__list a#c-5f1f3f43f023684cdbd4a1c0 {
  order: 5
}
#a-iphone .menu__list a#c-5f1f3f49f023684cdbd4a1cc {
  order: 6
}
#a-iphone .menu__list a#c-5f1f3f4bf023684cdbd4a1d0 {
  order: 7
}
#a-iphone .menu__list a#c-5f1f3f5cf023684cdbd4a1f6 {
  order: 8
}
#a-iphone .menu__list a#c-5f1f3f4ef023684cdbd4a1d7 {
  order: 9
}
#a-iphone .menu__list a#personalize {
  order: 10
}

[Matheus]

No caso,

a-iphone

é a categoria superior e

5f1f3f4df023684cdbd4a1d5

é o ID da categoria da lista de categorias.

[mobifans]

Oi @Matheus, usamos a solução via CSS , trocamos no mesmo dia que indicou como fazer, mas ainda não apresentou modificação no storefront da loja:

Seria alguma coisa que estamos deixando passar ao inserir o código no CCS customizado, ou mesmo o sistema não esta conseguindo ler o código inserido ali, impedindo de reproduzir as alterações que o código aplica lá na loja?

Abs!

[Matheus]

Você que selecionou o código ficando nessa cor distinta, ou ele consta assim lá no editor?

[mobifans]

Esta assim no editor CSS, simplesmente copiando e colando fica dessa forma. Tem que passar por outro tratamento antes de inserir lá no painel o código?

[Matheus]

Quando fica assim, quer dizer um erro. Coloquei o código na raiz do site e funcionou

[mobifans]

@Matheus Ficou Show!
Nós vamos ter que usar esse novo recurso de código em menus diferentes, em outras categorias também, colocando em ordens diferentes os menus, tem como fazer sem tem que ir pela raiz do site?
O negrito tem como sair do texto, voltar pro normal da fonte?