A página de Categoria é onde seus clientes navegam pelos produtos agrupados por tipo, coleção ou temporada. Personalizá-la serve, por exemplo, para destacar uma promoção ou um lançamento com um banner no início da categoria. Também serve para deixar claro do que se trata a coleção com um título ou imagem própria. E você pode ajustar quantos produtos aparecem por linha, conforme o estilo que você busca para o seu catálogo.
O layout Ipanema permite configurar a página de Categoria com um banner (hero) de destaque, um cabeçalho e a listagem de produtos.
Neste tutorial, explicamos como configurar essas seções e adicionar outras novas à página de Categoria.
Vamos aos passos!
1. Acessar o painel administrador Nuvemshop.
2. Seguir o caminho "Loja online > Layout" e clicar em "Editar layout".
3. Clicar no botão do menu superior central e selecionar a página "Categoria".
4. Dentro da página de “Categoria" você poderá configurar as seções padrões, Hero de categoria, Cabeçalho, Produtos, e adicionar novas seções.
5. Clicar em cada uma para abrir as configurações.
Hero de categoria
5.1. Ao clicar em “Hero de categoria ” você poderá configurar uma espécie de banner de destaque no topo das páginas de categoria, comunicando campanhas, lançamentos ou contextualizando a coleção visualmente para o cliente.
Imagem
- Imagem: permite enviar a imagem principal que será exibida no Hero da categoria. Funciona como banner de destaque para reforçar a identidade visual e comunicar campanhas.
- Usar outra imagem para celulares: ative para enviar uma imagem específica para a versão mobile, garantindo melhor enquadramento e legibilidade em telas menores.
Imagem de categoria
- Imagem de categoria: quando ativado, permite exibir uma imagem exclusiva para cada categoria da loja, em vez de utilizar a imagem geral do Hero. As imagens individuais devem ser enviadas diretamente na seção de categorias do administrador da loja, para isso clicar em “Envie daqui”.
Design
- Largura: define a largura do Hero. Selecione “Página” para alinhá-lo ao conteúdo principal ou “Completo” para que ele ocupe toda a tela, gerando maior impacto visual.
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno do Hero, em pixels (px).
- Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno do Hero, em pixels (px).
CSS personalizado
- CSS personalizado: permite adicionar regras de CSS próprias para customizar visualmente o Hero de categoria além das opções padrão disponíveis no editor.
Cabeçalho
5.1. Ao clicar em “Cabeçalho” você poderá configurar o design, cores e CSS personalizado do cabeçalho da página das categorias da sua loja.
Design
- Largura: define a largura da seção. Selecione “Página” para alinhá-la ao conteúdo principal ou “Completo” para que ela ocupe toda a tela.
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno da seção, em pixels (px).
- Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da seção, em pixels (px).
Cores
- Fundo: define a cor de fundo da seção. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
- Cor do texto: define a cor dos textos exibidos na seção. A opção “Padrão” mantém a cor definida nas configurações gerais do tema.
CSS personalizado
- CSS personalizado: permite adicionar regras de CSS próprias para customizar visualmente a seção além das opções padrão disponíveis no editor.
Produtos
5.1. Ao clicar em “Produtos” você poderá configurar a disposição que aparecem os produtos na página de cada categoria, design e CSS personalizado.
Disposição
- Disposição em computadores: define quantas colunas de produtos serão exibidas na versão desktop. Escolha entre 4 colunas, 5 colunas ou 6 colunas, conforme o tamanho desejado dos cards e a quantidade de produtos visíveis por linha.
- Disposição em celulares: define quantas colunas de produtos serão exibidas na versão mobile. Escolha entre 1 coluna (cards maiores, com mais destaque) ou 2 colunas (mais produtos visíveis por linha).
- Navegação de produtos: define como o cliente avança pela lista de produtos. Selecione “Lista de páginas” para uma navegação paginada (com números de página) ou “Carregamento infinito” para que novos produtos sejam carregados automaticamente conforme o cliente rola a tela.
Design
- Largura: define a largura da listagem. Selecione “Página” para alinhá-la ao conteúdo principal ou “Completo” para que ela ocupe toda a tela.
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno da seção, em pixels (px).
- Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da seção, em pixels (px).
CSS personalizado
- CSS personalizado: permite adicionar regras de CSS próprias para customizar visualmente a listagem de produtos além das opções padrão disponíveis no editor.
6. Para adicionar novas seções a página de Categoria, basta clicar em “Adicionar seção" e selecionar as seções que deseja incluir.
Helpjuice Warning Callout Title
Para ver o catálogo completo com o detalhe de cada seção e o que você pode configurar, acessar: Quais seções posso adicionar nas páginas da minha loja com o layout Ipanema?
7. Clicar em “Salvar” para publicar as alterações.
Helpjuice Info Callout Title
Na página de Categoria, você pode selecionar uma categoria específica da sua loja para visualizar como ficam as mudanças. Basta clicar no botão “Visualizar” no meu superior e selecionar.
Pronto!
Agora você já sabe como adicionar e configurar seções na página de Categoria da sua loja usando o editor do layout Ipanema. Você também pode personalizar as outras páginas da sua loja, Início, Produto, Busca e Erro 404, seguindo a mesma lógica de seções e blocos.