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.
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.
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.
Helpjuice Warning Callout Title
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.