Como personalizar a página de categoria com o layout Ipanema na Nuvemshop?

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.

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.

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.