Início›Configure sua loja›Layout›Escolher Layout›Layout Ipanema

Como personalizar as páginas de busca e erro 404 com o layout Ipanema?

Aprenda a configurar o cabeçalho e a listagem de produtos da página de busca, e o design da página de erro 404 com o layout Ipanema da Nuvemshop.

Última atualização: 22/07/2026

As páginas de Busca e Erro 404 são as que seu cliente vê em duas situações específicas. A primeira é quando ele busca algo que não encontra na sua loja. A segunda é quando acessa um link quebrado ou inexistente. Personalizá-las serve, por exemplo, para que esses resultados continuem mostrando produtos relevantes em vez de uma tela vazia. Também serve para guiar seu cliente de volta à loja com uma mensagem clara em caso de erro.

O layout Ipanema permite configurar essas páginas com uma estrutura simples. A página de Busca tem um cabeçalho e a listagem de produtos, e a página de Erro 404 tem seu próprio design de mensagem.

Neste tutorial, explicamos como configurar as duas páginas e adicionar novas seções.

Como configurar a página de Busca?

1. Acessar o administrador da sua Nuvemshop.

2. Acessar "Loja online > Layout" e clicar em "Editar layout".

3. Em seguida, clicar no botão do menu superior central para escolher a página que deseja editar.

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.

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.

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.

Você pode escolher entre todas as seções do catálogo geral do Ipanema para adicionar a esta página. Para ver mais detalhes sobre cada uma acessar: Quais seções posso adicionar nas páginas da minha loja com o layout Ipanema na Nuvemshop? 

7. Clicar em “Salvar” para publicar as alterações.

Como configurar a página de Erro 404?

1. Acessar o administrador da sua Nuvemshop.

2. Acessar "Loja online > Layout" e clicar em "Editar layout".

3. Em seguida, clicar no botão do menu superior central para escolher a página que deseja editar.

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.

Importante

Consulte o catálogo completo com o detalhe de cada seção e o que você pode configurar acessando: Quais seções posso adicionar nas páginas da minha loja com o layout Ipanema?

Pronto! 

Agora você já sabe como adicionar e configurar seções nas páginas de Busca e de Erro 404 da sua loja usando o editor do layout Ipanema. Você também pode personalizar as outras páginas da sua loja, Início, Produto e Categoria, seguindo a mesma lógica de seções e blocos.