O layout Ipanema oferece flexibilidade total para você estruturar o design da sua loja virtual Nuvemshop.
Além das configurações globais de cores e fontes, você pode adicionar, reordenar e personalizar seções e blocos de conteúdo nas principais páginas do seu site: Página Inicial, Produto, Categoria, Resultados de Busca e até na página de Erro 404.
Para conferir quais são as seções disponíveis no layout Ipanema, acessar o tutorial: Quais seções posso adicionar nas páginas da minha loja com o layout Ipanema na Nuvemshop?
Como editar e adicionar as seções?
A seguir, veja o que é possível adicionar em cada tipo de página e o passo a passo completo para personalizar o layout de cada uma delas.
Vamos aos passos!
1. Acessar o painel administrador Nuvemshop.
2. Seguir o caminho "Loja online > Layout" e clicar em "Editar layout".
3. Em seguida, você deve clicar no botão do menu superior central para escolher a página que deseja editar: Início, Produto, Categoria, Página 404 ou Busca.
Início
4. Dentro da página “Início”, clicar em “Adicionar seção” para começar a incluir as seções e personalizar a página inicial.
5. Você pode personalizar 100% a página de inicio adicionando seções do zero, escolhendo quais estarão disponíveis e definindo a ordem em que aparecem. Basta clicar na opção desejada e depois em “Adicionar”.
6. Após finalizar, clicar em “Salvar” para publicar as alterações.
Produto
4. Dentro da página de “Produto" você poderá configurar as seções padrões, Informação do produto, Descrição do produto, Produtos complementares e Produtos alternativos.
5. Clicar em cada uma para abrir as configurações.
Informação do produto
5.1. Clicar na opção “Informação do produto” para poder configurar design, cores e CSS personalizado dentro das informações do produto.
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.
- Separação entre elementos: controla o espaçamento entre os blocos ou elementos internos da seção, em pixels (px).
- 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
- Cor de fundo: define a cor de fundo da seção. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
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.2. Feito isso, você também poderá configurar os outros elementos, como Multimidia e Informações sobre a compra.
Multimidia
Disposição
-
Mostrar miniaturas: quando ativado, exibe pequenas miniaturas das imagens do produto ao lado ou abaixo da imagem principal, permitindo ao cliente navegar entre as fotos rapidamente.
- Posição no computador: define onde as miniaturas serão exibidas na versão desktop. Escolha entre Esquerda (miniaturas em coluna ao lado da imagem principal) ou Inferior (miniaturas em linha abaixo da imagem principal).
Informações sobre a compra
Design
- Separação entre elementos: controla o espaçamento entre as miniaturas e a imagem principal, em pixels (px).
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno da galeria, em pixels (px).
- Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da galeria, em pixels (px).
Descrição do produto
5.1. Clicar na opção “Descrição do produto” para poder configurar exibição, design, cores e CSS personalizado dentro da descrição do produto.
Exibição
- Mostrar título: quando ativado, exibe o título da seção "Descrição" acima do texto descritivo do produto, ajudando o cliente a identificar o conteúdo rapidamente.
- Mostrar redes sociais: quando ativado, exibe os ícones de compartilhamento em redes sociais junto à descrição, permitindo que o cliente compartilhe o produto facilmente.
Cores
- Cor de fundo: define a cor de fundo da seção de descrição. A opção Sem preenchimento mantém o fundo transparente, sem aplicar nenhuma cor.
- Cor dos textos: define a cor dos textos da descrição. A opção Padrão mantém a cor definida nas configurações gerais do tema.
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).
CSS personalizado
- CSS personalizado: permite adicionar regras de CSS próprias para customizar visualmente a seção de descrição além das opções padrão disponíveis no editor.
Produtos complementares
5.1. Clicar na opção “Produtos complementares” para poder configurar design, cores e CSS personalizado dentro dos produtos complementares.
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.
- Separação entre elementos: controla o espaçamento entre os blocos ou elementos internos da seção, em pixels (px).
- 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 e CSS personalizado
- Cor de fundo: define a cor de fundo da seção. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
- 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.2. Feito isso, você também poderá configurar os outros elementos, como definir e formatar o Título e disposição dos Produtos. Para configurar, basta clicar em cada elemento.
Produtos alternativos
5.1. Clicar na opção “Produtos alternativos” para poder configurar design, cores e CSS personalizado dentro dos produtos complementares.
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.
- Separação entre elementos: controla o espaçamento entre os blocos ou elementos internos da seção, em pixels (px).
- 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 e CSS personalizado
- Cor de fundo: define a cor de fundo da seção. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
- 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.2. Feito isso, você também poderá configurar os outros elementos, como definir e formatar o Título e disposição dos Produtos. Para configurar, basta clicar em cada elemento.
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.
7. Clicar em “Salvar” para publicar as alterações.
Helpjuice Info Callout Title
Na página de Produto, você pode selecionar um produto específico da sua loja para visualizar como ficam as mudanças. Basta clicar no botão “Visualizar” no meu superior e selecionar.
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
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
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
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.
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.
Página 404
4. Dentro da “Página 404”, clicar na seção "Página não encontrada” para configurar.
5. Nessa seção você poderá configurar o design e o CSS personalizado da página de erro.
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).
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.
6. Para adicionar novas seções a página de Erro 404 basta clicar em “Adicionar seção" e selecionar as seções que deseja incluir.
7. Clicar em “Salvar” para publicar as alterações.
Busca
4. Dentro da página de “Busca” você poderá configurar as seções padrões, Cabeçalho e Produtos, e adicionar novas seções.
5. Clicar em cada uma para abrir as configurações.
Cabeçalho
Ao clicar em “Cabeçalho” você poderá configurar o design, cores e CSS personalizado do cabeçalho da página de buscas 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
Ao clicar em “Produtos” você poderá configurar a disposição que aparecem os produtos na página de resultados de busca, 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 Busca, basta clicar em “Adicionar seção" e selecionar as seções que deseja incluir.
7. Clicar em “Salvar” para publicar as alterações.
Pronto!
Agora você sabe como estruturar e personalizar todas as páginas da sua loja usando o editor do layout Ipanema.
Helpjuice Info Callout Title
Aproveite a flexibilidade dos blocos para criar uma vitrine atrativa, comunicar campanhas de vendas e oferecer uma excelente experiência de navegação ao seu cliente.