Design de Homepage para Ecommerce: Guia por Seções

Guia por seções para o design da homepage de ecommerce: o que vai acima da dobra, a ordem das seções, checklist de lançamento e dicas para mobile.

Perguntas frequentes

O que uma homepage de ecommerce deve ter?

No mínimo: um cabeçalho com busca, carrinho e navegação por categorias; um banner principal que diga o que você vende e ofereça um próximo passo claro; um caminho para as suas principais categorias; alguns produtos mais vendidos ou lançamentos; sinais de confiança, como frete, trocas e devoluções e avaliações reais; e um rodapé com políticas e dados de contato. O restante (blocos editoriais, cadastro de e-mail, prova social) é opcional e precisa merecer o espaço.

O que colocar acima da dobra na homepage de uma loja virtual?

Quatro coisas: uma navegação que inclua busca e carrinho, um título que diga o que você vende, uma chamada para ação principal que leve aos produtos e um motivo visível para confiar na loja, como uma linha sobre frete ou trocas e devoluções. Boas imagens de produto no banner ajudam o visitante a entender o catálogo sem precisar ler nada.

Quantos produtos devo mostrar na homepage?

Não existe um número universal. Mostre o suficiente para representar o mix da loja, geralmente uma fileira ou grade (sem carrossel) de mais vendidos, além de blocos de categorias, e depois leve o visitante à coleção completa. Se você vende poucos produtos, pode exibir todos. Se vende milhares, a homepage deve encaminhar as pessoas para as categorias, e não tentar exibir o catálogo inteiro.

A homepage de um ecommerce deve ter slider ou carrossel?

Um único banner estático costuma comunicar com mais clareza do que um rotativo. Slides que trocam sozinhos escondem o conteúdo atrás de um temporizador, são mais difíceis de tornar acessíveis e muitas vezes deixam a página mais pesada. Se precisar divulgar várias coisas, dê a cada uma o seu próprio bloco logo abaixo do banner.

Como fazer a homepage da minha loja virtual carregar mais rápido?

Comprima e dimensione corretamente as imagens, use formatos modernos como WebP ou AVIF, carregue a imagem do banner com prioridade e use carregamento tardio (lazy loading) em tudo o que vem abaixo dele, limite scripts de terceiros (chats, pop-ups, rastreadores) e reserve espaço para as imagens para que o layout não "pule" durante o carregamento. O PageSpeed Insights do Google e o relatório de Core Web Vitals do Search Console mostram o que realmente está lento na sua página.

O que é mais importante: a homepage ou a página de produto?

As páginas de produto e de coleção são onde a maioria das decisões de compra acontece, mas a homepage costuma ser a primeira impressão para visitantes diretos, vindos da marca e recorrentes. A função dela é direcionar: levar cada visitante rapidamente à categoria ou ao produto certo. Consulte suas próprias métricas para ver quantas sessões começam na homepage antes de decidir onde investir.

Resposta rápida: Uma boa homepage de ecommerce tem um único trabalho: levar cada visitante aos produtos certos o mais rápido possível. Coloque, nesta ordem, um cabeçalho claro (busca, carrinho, categorias), um banner principal que diga o que você vende com um botão principal, blocos de categorias, uma fileira curta de mais vendidos, sinais de confiança (frete, trocas e devoluções, avaliações) e um rodapé útil. Tudo o que fica acima da dobra deve responder a "que loja é essa e onde eu clico?"

O guia em resumo

Use esta como uma ordem inicial. Remova as seções que você não consegue preencher com conteúdo real; um bloco de "depoimentos" vazio prejudica mais do que não ter bloco nenhum.

#	Seção	Função	Limite
1	Barra de avisos	Uma mensagem oportuna: valor mínimo para frete grátis, fim da promoção, prazo de entrega	Uma linha
2	Cabeçalho e navegação	Busca, carrinho, conta, principais categorias	5 a 7 links de primeiro nível
3	Banner principal (hero)	Dizer o que você vende e dar um próximo passo	Um título, um botão
4	Faixa de confiança	Frete, trocas e devoluções, pagamento, atendimento	3 a 4 itens curtos
5	Blocos de categorias	Direcionar os clientes pelo que eles procuram	4 a 8 blocos
6	Mais vendidos / lançamentos	Provar que o catálogo é real	Uma fileira ou grade
7	Bloco de valor ou história	Por que escolher você e não outra loja	Um bloco curto
8	Prova social	Avaliações reais, menções na imprensa, fotos de clientes	Só se forem genuínas
9	Cadastro de e-mail	Captar visitantes que ainda não estão prontos para comprar	Um campo
10	Rodapé	Políticas, contato, links secundários	Colunas organizadas

O que vai acima da dobra

"Acima da dobra" é tudo o que o visitante vê antes de rolar a página, e isso muda conforme o dispositivo. Projete para a tela de um notebook e para a de um celular separadamente, em vez de traçar uma única linha em um mockup. Seja qual for o dispositivo, estas quatro coisas devem estar visíveis sem rolar:

Navegação com busca e carrinho. Quem já sabe o que quer usa a busca primeiro. Não a esconda atrás de um ícone no desktop.
Um título que diz qual é o produto. "Canecas de cerâmica feitas à mão, enviadas de Curitiba" é melhor do que "Bem-vindo à nossa loja". Diga a categoria em palavras simples.
Uma chamada para ação principal. "Ver canecas" ou "Ver lançamentos". Um segundo link, mais discreto, não tem problema; três botões do mesmo peso, sim.
Um motivo para confiar em você. Um valor mínimo para frete grátis, um prazo de troca ou um número de avaliações que você realmente possa comprovar. Use apenas afirmações que você consiga provar.

Use no banner uma foto real de produto ou de uso, e não uma imagem de banco que poderia ser de qualquer loja. A imagem é a forma mais rápida de o visitante confirmar que está no lugar certo.

Notas por seção

Cabeçalho e navegação

Mantenha nas categorias de primeiro nível o que um visitante novo procuraria, usando as palavras que ele usa. Deixe a busca em um campo visível, mantenha a contagem do carrinho atualizada e faça o logotipo levar à página inicial. Se o catálogo é grande, um megamenu pode funcionar, mas teste se ele é usável no trackpad e com o teclado. Para um aprofundamento no restante da loja, veja nossas boas práticas de design para sites de ecommerce.

Banner principal (hero)

O banner deve ter uma única mensagem. Se você faz uma promoção sazonal, deixe-a como banner durante o período e depois volte à sua mensagem permanente. Evite slides que trocam sozinhos: eles escondem o conteúdo atrás de um temporizador e são mais difíceis de tornar acessíveis. Se você tem várias campanhas, dê a cada uma o seu próprio bloco mais abaixo na página.

Blocos de categorias

Esta é a seção que faz o trabalho pesado. Cada bloco precisa de uma foto clara e de um rótulo simples ("Tênis de corrida feminino", e não "Coleção Passada"). Ordene-os pelo que você mais quer vender ou pelo que os visitantes mais procuram, e não em ordem alfabética.

Mais vendidos e lançamentos

Mostre produtos reais com preços reais, e não uma grade genérica. Cada card precisa de imagem, nome, preço e link; só adicione notas se você tiver avaliações genuínas. Mantenha a proporção das imagens consistente para que a grade fique organizada. Termine a fileira com um link "Ver tudo" para a página da coleção.

Confiança e prova social

Os compradores hesitam por causa do custo do frete, das trocas e devoluções e da dúvida sobre se a loja é confiável. Responda a isso na homepage com frases curtas e específicas: prazos de entrega, prazo para troca, formas de pagamento aceitas e um canal de contato. Nas avaliações, mostre as reais, com nome ou selo de verificação, conforme a sua plataforma permitir. Nunca invente depoimentos ou notas; além de antiético, isso pode violar o Código de Defesa do Consumidor e outras regras de proteção ao consumidor.

Rodapé

O rodapé é onde os compradores mais cuidadosos procuram as políticas. Inclua frete, trocas e devoluções, privacidade, termos, contato e um link para o guia de tamanhos ou para o FAQ, se você tiver. Falamos de layouts em exemplos de design de rodapé de site.

Notas para mobile

A maioria das lojas recebe boa parte das visitas pelo celular, então confira nas suas métricas qual é a divisão. Projete a homepage mobile como um layout próprio, e não como uma página de desktop espremida.

Mantenha o banner curto. Título, imagem e botão devem aparecer na tela de um celular comum, sem precisar rolar além do cabeçalho.
Faça áreas de toque generosas. Botões, filtros e itens de menu precisam de tamanho e espaçamento suficientes para os dedos. Teste em um aparelho de verdade.
Recolha a navegação com critério. Um ícone de menu é aceitável, mas mantenha a busca e o carrinho visíveis na barra do cabeçalho.
Use a rolagem horizontal com moderação. Uma fileira de produtos que rola para o lado é aceitável se sugerir visivelmente que há mais conteúdo; uma grade empilhada é mais segura.
Evite pop-ups em tela cheia na chegada. Eles bloqueiam a página e podem prejudicar tanto a usabilidade quanto a visibilidade nas buscas. Adie-os ou troque-os por um bloco de cadastro dentro da página.
Fique de olho no teclado. Garanta que o campo de cadastro de e-mail não fique escondido quando o teclado na tela abrir.

Noções básicas de velocidade e acessibilidade

Uma homepage linda que carrega devagar perde visitantes antes mesmo de eles a verem. As maiores alavancas quase sempre são as imagens e os scripts de terceiros.

Comprima as imagens e use formatos modernos, como WebP ou AVIF.
Defina largura e altura explícitas nas imagens para que o layout não se desloque durante o carregamento.
Carregue primeiro a imagem do banner; use lazy loading nas imagens abaixo dele.
Revise todos os scripts de terceiros (chat, pop-ups, rastreadores) e remova o que você não usa.
Escreva textos alternativos (alt) de verdade para as imagens de produtos e categorias.
Verifique se o texto tem contraste suficiente com o fundo e se todos os elementos interativos funcionam com o teclado.

Use o PageSpeed Insights do Google na URL publicada para ver quais arquivos específicos estão deixando a página lenta.

Checklist da homepage

Copie isto para as suas anotações de lançamento:

[ ] O cabeçalho tem busca e carrinho visíveis e de 5 a 7 links claros de categorias
[ ] O título do banner diz o que vendemos em palavras simples
[ ] Um único botão principal; ele leva aos produtos, e não a uma página "Sobre"
[ ] A imagem do banner mostra um produto real ou um uso real
[ ] Frete e trocas e devoluções resumidos acima ou logo abaixo da dobra
[ ] Os blocos de categorias usam a linguagem do cliente e cobrem as principais linhas
[ ] Os mais vendidos mostram preços reais e levam às páginas de produto
[ ] Avaliações e menções na imprensa exibidas apenas se forem genuínas
[ ] O cadastro de e-mail tem um único campo e um benefício claro
[ ] O rodapé inclui políticas, dados de contato e formas de pagamento
[ ] Nenhum carrossel automático escondendo conteúdo importante
[ ] Layout mobile conferido em um celular de verdade
[ ] Imagens comprimidas, dimensionadas e com texto alternativo
[ ] Título da página e meta description escritos especificamente para a homepage

Erros comuns

Querer mostrar tudo. A homepage é um roteador, não um catálogo.
Texto vago no banner. Se um desconhecido não consegue dizer o que você vende em cinco segundos, reescreva o título.
Promover cinco coisas com o mesmo peso. Quando tudo está em destaque, nada está.
Urgência falsa. Contadores regressivos que reiniciam a cada visita corroem a confiança.
Ignorar visitantes recorrentes. Considere um bloco de "continuar comprando" ou de itens vistos recentemente, se a sua plataforma permitir.

Para princípios de homepage além do ecommerce, nossos guias sobre como projetar uma homepage e design da homepage de um site vão mais fundo e, se você ainda está escolhendo uma plataforma, veja os melhores criadores de sites para ecommerce.

Colocando em prática

Comece escrevendo o conteúdo antes de desenhar: seu título, os nomes das categorias, as linhas sobre frete e trocas e devoluções e os seus seis melhores produtos. Depois, posicione-os na ordem acima. Se quiser sair na frente no layout, o plano gratuito da We.Inc permite publicar até três sites a partir de templates prontos; o construtor com IA, que cria um site a partir de um prompt, começa no plano Starter, por $20 por mês. Você pode se cadastrar aqui. Seja qual for a ferramenta, revise cada seção com o checklist antes de lançar.

Comece grátis · Sem cartão de crédito

Umair Ali Sadaqat

Fundador da We.Inc

Umair é o fundador da We.Inc. Ele escreve sobre criação de sites com IA, agências e o negócio de administrar um estúdio web.

Pronto para criar algo incrível?

Junte-se a 15,000+ empresas que usam o We.Inc para lançar, crescer e automatizar, tudo em uma plataforma.