Boas práticas de design para loja virtual organizadas por página: início, navegação, categorias, busca, produto e celular, com itens essenciais e erros comuns.
Navegação clara conforme a forma como clientes organizam os produtos, páginas rápidas, fotos grandes com zoom, preço e frete perto de Adicionar ao carrinho, avaliações visíveis, busca interna funcional e checkout curto com compra como visitante. Priorize celulares, onde ocorre a maioria da navegação.
O suficiente para comparar sem paginação infinita. Muitas lojas mostram de 24 a 48 por página ou usam botão “Carregar mais”. O mais importante são filtros por atributos escolhidos, como tamanho, cor, preço e disponibilidade.
Nome do produto, imagem principal, preço, opções de variante (tamanho, cor), estoque, botão Adicionar ao carrinho e informação de frete ou prazo. Nota em estrelas e número de avaliações também, se houver.
Geralmente não. Slides que giram sozinhos são ignorados e podem prejudicar acessibilidade e velocidade. Uma imagem principal forte, mensagem clara e links para categorias importantes costuma funcionar melhor.
Um bom design de e-commerce ajuda o cliente a fazer três coisas rapidamente: encontrar o produto certo, confiar o suficiente para comprar e pagar sem obstáculos. Isso significa navegação alinhada ao jeito de pensar do cliente, páginas móveis rápidas, fotos grandes, preço e frete informados cedo, avaliações visíveis e checkout curto.
Este guia percorre página por página, pois a dúvida do comprador muda em cada etapa.
Em poucos segundos, a página precisa explicar o que você vende e para quem.
Inclua:
Evite: carrosséis automáticos, pop-ups antes de carregar a página e vídeos principais que atrasem a tela no celular.
| Elemento | Boa prática |
|---|---|
| Cartões de produto | Mesma proporção de imagem, nome, preço, avaliação e segunda imagem ao passar o cursor |
| Filtros | Refletem escolhas reais: tamanho, cor, preço, material e estoque. Mostre contagens. |
| Ordenação | Padrão “Destaques” ou “Mais vendidos”; ofereça preço e novidades |
| Estoque | Oculte ou identifique claramente itens esgotados |
| Paginação | “Carregar mais” ou páginas numeradas; mantenha filtros ao voltar |
| Celular | Filtros em painel deslizante com botão claro “Mostrar 34 resultados” |
Erro comum: filtros são apagados ao abrir um produto e voltar. Teste o botão Voltar.
Quem pesquisa costuma ter alta intenção; busca ruim custa vendas.
A página vende o produto. Revise-a de cima a baixo.
Comece explicando o benefício para o cliente e depois os dados técnicos. Use tabela curta para dimensões, materiais e cuidados. Guias de tamanho devem abrir na própria página, não afastar o comprador.
Adicione dados estruturados Product (nome, imagem, preço, disponibilidade e avaliações) para permitir preço e nota nos resultados de busca.
Checkout exige atenção própria. Resumindo: mostre o preço total cedo, permita compra como visitante, encurte o formulário e ofereça Apple Pay e Google Pay. Nosso guia de otimização de checkout detalha cada etapa.
Design também inclui a página e o e-mail de confirmação, lidos com atenção por quase todos os compradores.
A maioria das visitas à loja vem do celular. Projete e teste primeiro nesse formato e depois amplie para computador.
São decisões de design e também técnicas.
Velocidade: comprima imagens em WebP ou AVIF, defina dimensões para evitar saltos, limite aplicativos e scripts de terceiros e consulte Core Web Vitals no PageSpeed Insights do Google.
Acessibilidade: contraste conforme WCAG 2.2 AA, texto alternativo nas imagens, campos identificados, menus e filtros acessíveis pelo teclado e mensagens que expliquem erros. Lojas acessíveis são mais fáceis para todos e, em muitas regiões, também atendem a expectativas legais.
Se estiver começando, um bom layout reduz decisões. Veja nossos modelos para lojas ou descreva seu negócio à We.Inc no chat. Ela cria páginas de produto, carrinho e checkout, que você refina visualmente ou no código, com hospedagem e SSL incluídos.
Comece grátis · Sem cartão de crédito