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.
Quais seções pode adicionar em cada página?
Veja na tabela abaixo um resumo das seções e blocos disponíveis e entenda o que você pode configurar dependendo da página em que estiver:
Seção |
Quando usar? |
O que configurar? |
Páginas de Categoria, Busca e Listagens | ||
| Lista de produtos | É a grade principal de produtos exibida nas categorias e nos resultados de busca, onde os clientes navegam e comparam os itens. | Configuração da seção: Não utiliza blocos soltos. As opções de filtros, ordenação e exibição da grade são ajustadas diretamente nas configurações da seção. |
| Título da página | Para dar contexto acima das listas de produtos (exibindo o nome da categoria, o termo pesquisado ou o título de uma campanha). | Título: Um bloco focado no texto e no alinhamento do cabeçalho da página (útil quando o layout exige um título superior de destaque). |
Página de Produto | ||
| Informações do produto | É a área principal de compra da loja: exibe a galeria de fotos, preço, variações, botão de comprar e as opções de frete. | Mídia e Informações fixas: Configura a exibição de imagens e miniaturas. A área de compra (título, preço e formulários) possui uma estrutura fixa definida pelo tema e não aceita a adição de blocos de textos livres. |
| Descrição do produto | Para detalhar especificações, cuidados, guia de medidas e a história do produto. Permite criar visuais ricos com abas e mídias. | Descrição, Título, Texto, Imagem, Botão, Vídeo e Sanfona: A Descrição é o bloco principal (com visualização opcional em formato de sanfona). Você pode adicionar os demais blocos para criar módulos extras de conteúdo. |
| Produtos relacionados | Para estratégias de vendas cruzadas ("Você também pode gostar") com o objetivo de aumentar o ticket médio do pedido. | Configuração da seção: Não utiliza blocos. As regras de quais produtos devem aparecer são definidas diretamente nas opções da própria seção. |
Página Inicial | ||
| Banners | Para exibir blocos promocionais (como campanhas, coleções e histórias sazonais) em formato de grade ou carrossel. | Banner: Cada bloco é uma promoção. Você define imagens para computador/celular, link, sobreposição de cor e posicionamento. Dentro dele, é possível adicionar blocos de Título, Texto, Botão, Imagem e Grupo. |
| Banner rotativo (Slideshow) | Para destacar grandes campanhas, promoções e coleções de forma impactante ocupando a largura total da tela. | Slide: Cada slide configura imagens (desktop e celular) e links. Você pode posicionar os blocos de Título, Texto, Botão ou Grupo em cima da imagem para criar chamadas para ação (CTAs). |
| Carrossel | Para alternar várias histórias visuais em uma única faixa (ideal para divulgar múltiplas ofertas sem precisar de um banner gigante em tela cheia). | Slide (Carrossel): Segue a mesma lógica do banner rotativo. Você adiciona a imagem, o link e preenche com blocos de Título, Texto, Botão ou Grupo dentro do slide. |
| Banner principal (Hero) | Para exibir uma imagem com história em largura total na página inicial, ideal para transmitir e comunicar de imediato o conceito de uma nova campanha. | Título, Texto, Botão e Grupo: Define os textos e as ações. A função Grupo serve para agrupar esses blocos e manter a organização do layout. |
| Produtos em destaque (Grade) | Para exibir uma seleção de produtos de forma estratégica (mais vendidos, novidades, envios no mesmo dia) escolhidos de modo manual ou pelo algoritmo. | Configuração da seção: Não utiliza blocos individuais. A origem dos produtos e a estrutura visual são configuradas de forma automatizada pela seção. |
| Produto em destaque | Para atrair a atenção do cliente para um item único e específico direto na página inicial (um superlançamento, um campeão de vendas ou um kit exclusivo). | Configuração da seção: A escolha do produto e a disposição dele na página ocorrem de forma direta nas configurações da seção. |
| Perguntas frequentes (FAQ) | Para reduzir chamados de suporte ao esclarecer rapidamente as dúvidas mais comuns sobre frete, devoluções e pagamentos direto na página. | Pergunta: Cada bloco representa uma dúvida. Você preenche o título (pergunta), o conteúdo rico (resposta) e escolhe se ela deve aparecer aberta ou fechada por padrão. |
| Ícone com texto | Para destacar os benefícios e diferenciais da loja (como frete grátis, compra segura e trocas), transmitindo confiança de forma fácil de ler. | Item de ícone com texto: Cada bloco gera uma linha de benefício contendo um ícone (ou imagem própria enviada por você), título, descrição e link opcional. |
| Imagem com texto | Para criar layouts com visual editorial (como lookbooks, história da marca ou introdução de uma categoria) posicionando foto e texto lado a lado. | Imagem, Título, Texto, Botão, Grupo (e extras): Permite misturar os blocos de conteúdo essenciais e, caso necessário, incorporar outros elementos da biblioteca do tema. |
| Feed do Instagram | Para gerar prova social e engajar os visitantes da loja utilizando o conteúdo visual gerado na sua rede social. | Título e Posts do Instagram: O título funciona como cabeçalho da seção. As fotos são integradas de forma automática a partir da sua conexão com o Instagram (não existe um bloco solto de "lista de imagens"). |
| Newsletter | Para capturar e-mails de visitantes e convertê-los em clientes oferecendo descontos, lançamentos e ações segmentadas no futuro. | Formulário de Newsletter: Gera automaticamente o campo de e-mail e o botão de envio. Você constrói o apelo visual ao redor dele utilizando blocos de Imagem, Título, Texto e Grupo (podendo inserir avisos com letras miúdas). |
| Pop-up promocional | Para reter visitantes que estão tentando sair da loja ou dar as boas-vindas ao primeiro acesso oferecendo um cupom de desconto. | Configuração da seção: Não utiliza blocos. O gatilho de aparição (tempo), textos e comportamentos do pop-up são definidos de forma global nas opções da seção. |
| Editorial de texto | Para exibir conteúdos contínuos e longos, como a página "Quem somos", explicações aprofundadas de políticas ou textos em formato de artigo. | Título, Texto, Botão e Imagem: Utilize essa combinação de blocos principais para estruturar conteúdos de forma muito mais livre, com imagens inseridas no meio do texto. |
| Ofertas com cronômetro | Para acelerar a decisão de compra usando gatilhos de escassez e urgência (vendas relâmpago ou "termina em breve"). | Cronômetro, Produtos, Grupo, Imagem, Texto, Título e Botão: O Cronômetro gerencia o tempo final, a faixa Produtos exibe a vitrine da promoção, e os demais blocos estilizam os textos informativos da oferta. |
| Depoimentos | Para exibir as avaliações reais e a opinião positiva de outros compradores, ajudando a quebrar as objeções de compra de novos clientes. | Depoimento: Cada bloco consolida a avaliação de uma pessoa, permitindo que você preencha a foto, nome, nota (em estrelas), título e a citação diretamente nele. |
| Vídeo | Para mostrar o produto em uso real, publicar um vídeo de "unboxing" ou promover a campanha de marca com uma chamada forte de vendas. | Vídeo, Título, Texto, Botão e Grupo: O bloco de Vídeo incorpora e reproduz o conteúdo; use os outros blocos de conteúdo para acompanhar o vídeo com legendas e botões de ação. |
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.