VendasArtigo
Página de produto da loja virtual: os oito blocos que ela deve ter e a ordem de cada um
Em resumo
A página de produto é a tela da loja virtual em que o cliente decide a compra de um item. O ConnectWeek lista os oito blocos que ela deve ter, das fotos às avaliações, e sugere a ordem de cada um. A base são os testes do Baymard Institute, empresa de pesquisa que avalia grandes lojas dos Estados Unidos e da Europa, e as exigências da legislação brasileira.
A página de produto é a tela da loja virtual que apresenta um único item, com fotos, preço e botão de compra. É nela que o cliente decide se põe o item no carrinho. Este artigo lista os oito blocos que essa página deve ter e a ordem em que o ConnectWeek sugere montá-los. A base é o levantamento do Baymard Institute sobre páginas de produto, atualizado em 18 de março de 2026 e lido pelo ConnectWeek em 12 de outubro de 2026, somado ao que a legislação brasileira manda exibir.
O Baymard Institute é uma empresa de pesquisa que testa lojas virtuais com usuários reais. O levantamento avaliou mais de 155 grandes lojas dos Estados Unidos e da Europa. Só 48% das versões para computador e 38% das versões para celular tiveram a página de produto classificada como "razoável" ou "boa". Nenhuma loja brasileira aparece na descrição da amostra. Os percentuais servem, portanto, como lista de falhas frequentes para conferir na sua loja, e não como retrato do mercado brasileiro.
Os oito blocos e a pergunta que cada um responde
A ordem do quadro é uma avaliação do ConnectWeek. Ela segue a sequência das dúvidas de quem compra: primeiro o que é o produto, depois quanto custa ao todo e, por fim, se dá para confiar na loja. As recomendações sobre fotos, preço por unidade, variações, botão de salvar, frete, troca e avaliações vêm do levantamento do Baymard. As exigências sobre preço à vista, descrição e ficha técnica vêm da legislação brasileira. O restante é avaliação do ConnectWeek. Tudo é detalhado nas seções seguintes.
| Ordem | Bloco | Pergunta do cliente que ele responde |
|---|---|---|
| 1 | Fotos do produto | Como é o produto e de que tamanho ele é? |
| 2 | Nome do produto e preço | O que é exatamente e quanto custa à vista? |
| 3 | Escolha de variação (tamanho, cor, voltagem) | Tem a opção que eu quero? |
| 4 | Botão de compra | Como eu levo? |
| 5 | Frete, prazo de entrega e custo total | Quanto pago ao todo e quando chega? |
| 6 | Resumo da política de troca e devolução | E se não servir? |
| 7 | Descrição e ficha técnica | Quais são as medidas, os materiais e o modo de usar? |
| 8 | Avaliações de clientes | Quem comprou gostou? |
No celular, os blocos de 1 a 6 ficam empilhados e o cliente rola a tela. No computador, é comum que as fotos ocupem uma coluna e os blocos de 2 a 6, a outra. Nos dois casos, a sugestão do ConnectWeek é que o cliente não precise passar pela descrição longa para achar o frete e a regra de troca.
Fotos: mostre o tamanho real e o produto em uso
O cliente da loja virtual não pega o produto na mão. Nos testes do Baymard, 42% dos usuários tentaram descobrir o tamanho do produto pelas fotos, e 37% das lojas da amostra não têm nenhuma imagem "em escala", informa o instituto. Imagem em escala é a foto que mostra o produto ao lado de uma pessoa ou de um objeto de tamanho conhecido, como uma luminária sobre a mesa ou uma câmera na mão de alguém.
Para produtos usados no corpo, o instituto recomenda ir além: roupas, bolsas, joias, relógios e cosméticos pedem foto em uma pessoa, porque só assim o cliente entende o caimento e a proporção. Das lojas da amostra, 23% não oferecem esse tipo de imagem, de acordo com a mesma página.
Um conjunto mínimo de fotos, na avaliação do ConnectWeek, tem quatro tipos: o produto sozinho em fundo neutro, o produto em escala, o produto em uso e o detalhe que gera dúvida, como o fecho, a etiqueta ou o conector. Quem pensa em criar essas imagens com inteligência artificial deve ler antes o que os marketplaces e o Google aceitam em foto de produto feita com IA. As fotos também pesam no tempo de carregamento da página, assunto do artigo sobre Core Web Vitals, as métricas de experiência de página do Google.
Preço, variação e botão de compra
Estes três blocos formam a área de compra e devem ficar juntos, logo depois das fotos.
Preço à vista, legível e ao lado da foto
No Brasil, a posição do preço não é só questão de layout. A Lei nº 10.962, de 2004, determina no artigo 2º, inciso III, que a loja virtual divulgue o preço à vista de forma ostensiva, junto à imagem do produto, em letras fáceis de ler e com tamanho de fonte de pelo menos doze. O inciso foi incluído pela Lei nº 13.543, de 2017 (o texto atualizado também está no portal da Câmara dos Deputados). O artigo 5º-A da mesma lei manda informar, em local e formato visíveis, os descontos que dependem do prazo ou do meio de pagamento. É o caso do preço menor no Pix.
Quando o mesmo produto é vendido em embalagens de tamanhos diferentes, o Baymard recomenda mostrar também o preço por unidade de medida. Das lojas da amostra, 81% não fazem isso, segundo o instituto. Um exemplo hipotético mostra a utilidade: um sabonete líquido custa R$ 15 no frasco de 250 ml e R$ 40 no refil de 1 litro. Por litro, o frasco sai a R$ 60 (R$ 15 divididos por 0,25 litro) e o refil sai a R$ 40. Com os dois valores por litro na tela, o cliente vê a vantagem do refil sem fazer a conta.
Tamanhos em botões, não em menu suspenso
Menu suspenso é a caixa que só mostra as opções depois do clique. Nos testes do Baymard, os tamanhos ficavam escondidos dentro do menu, e o participante só via que o seu estava esgotado ao abri-lo. A recomendação do instituto é expor os tamanhos em botões, com as opções disponíveis à vista. Das lojas da amostra, 57% não usam botões para a escolha de tamanho, informa o levantamento. O artigo sobre produto esgotado ou fora de linha explica o que fazer com a página quando todas as variações acabam.
Botão de compra e botão de salvar
Na sugestão do ConnectWeek, o botão de compra vem logo abaixo das variações, com um verbo claro, como "Comprar" ou "Adicionar ao carrinho". Ao lado dele cabe o botão de salvar o produto em uma lista de favoritos. Em uma pesquisa do Baymard com 1.193 pessoas, 21% disseram usar esse recurso. O instituto recomenda que ele funcione sem exigir cadastro.
Frete, prazo e custo total antes do carrinho
O cliente quer saber o valor final antes de pôr o produto no carrinho. O Baymard recomenda mostrar, perto da área de compra, quanto o pedido vai custar ao todo. Para isso, a página deve informar o menor valor de frete ou, no mínimo, uma estimativa do frete e as condições em que ela vale. Das lojas da amostra, 67% não mostram essa estimativa perto da área de compra, segundo o instituto. Sem ela, o cliente precisa adicionar o item ao carrinho só para descobrir o frete, e repete o trabalho em cada loja que compara.
Em lojas brasileiras, esse bloco costuma ser o campo de CEP, que devolve o valor e o prazo de cada modalidade de entrega. A norma brasileira também trata do tema, sem dizer em qual página. O artigo 2º do Decreto nº 7.962, de 2013, manda a loja virtual exibir, em lugar de destaque e fácil de ver, as despesas adicionais ao preço, como a de entrega. O mesmo artigo exige as condições da oferta, entre elas as formas de pagamento, a disponibilidade e o prazo de entrega (a publicação original do decreto também está no portal da Câmara dos Deputados). O frete revelado tarde é o primeiro item do artigo do ConnectWeek sobre os pontos de atrito do checkout, a etapa de finalização da compra.
Troca e devolução: um resumo perto do botão
Quem compra sem experimentar quer saber como devolver. Em uma pesquisa do Baymard com 1.032 pessoas, 60% disseram procurar a regra de devolução na própria página de produto. Ainda assim, 44% das lojas da amostra não exibem a política nem um link para ela no conteúdo principal dessa página, informa o levantamento. Em outra pesquisa do instituto, com 1.026 consumidores dos Estados Unidos, 15% disseram ter abandonado um pedido no trimestre anterior por causa de uma política de devolução insatisfatória.
O Baymard pede um link para a política ou um resumo breve dela, em destaque. Na avaliação do ConnectWeek, bastam duas ou três linhas com o prazo, quem paga o frete da devolução e o link para o texto completo. O Decreto nº 7.962 trata de um ponto vizinho, o direito de arrependimento, que é a desistência da compra feita fora da loja física, prevista no artigo 49 do Código de Defesa do Consumidor. O artigo 5º do decreto manda a loja informar, de forma clara e ostensiva, como o consumidor exerce esse direito. O texto completo da política pode seguir o modelo de política de troca e devolução publicado pelo ConnectWeek.
Descrição e ficha técnica: o que a foto não mostra
Depois do frete e do resumo de troca ficam os textos longos. O artigo 31 do Código de Defesa do Consumidor exige que a oferta traga informações corretas, claras, precisas, ostensivas e em português sobre o produto: características, qualidades, composição, quantidade, preço, garantia, origem e prazos de validade, entre outros dados, além dos riscos à saúde e à segurança. Na prática, o bloco tem duas partes: a descrição, que explica para quem o produto serve e como se usa, e a ficha técnica, uma tabela com medidas, peso, material e voltagem.
Como escrever a descrição, com um exemplo de antes e depois, é assunto do artigo sobre o modelo de descrição de produto. Este artigo trata só do lugar dela na página: depois do resumo de troca, com intertítulos, para que o cliente ache a medida que procura sem ler tudo.
Avaliações: fotos de clientes e resposta às notas baixas
O último bloco é a opinião de quem já comprou. O Baymard destaca dois cuidados. O primeiro é responder às avaliações negativas. Das lojas da amostra, 89% não respondem, segundo o instituto, e muitos participantes dos testes consultavam com frequência as avaliações negativas. O instituto recomenda que a resposta da loja tenha aparência diferente da avaliação, para que o cliente perceba quem está falando.
O segundo cuidado é com as fotos enviadas pelos clientes. Os participantes dos testes usavam essas fotos para conferir se as imagens da loja correspondiam ao produto real. O instituto recomenda que o cliente consiga passar de uma foto para a outra, entre avaliações diferentes, sem abrir e fechar cada avaliação. Das lojas da amostra, 63% não permitem isso, de acordo com o mesmo levantamento. O artigo avaliações de clientes: como pedir, responder e usar trata de como pedir avaliações e do que não fazer com elas.
Roteiro para conferir a sua página pelo celular
Abra no celular a página do produto mais vendido da loja, sem entrar na sua conta, e responda às oito perguntas abaixo. Elas não seguem a numeração do quadro. Cada "não" é uma correção a pôr na fila.
- Tamanho. Alguma foto mostra o produto ao lado de uma pessoa ou de um objeto conhecido?
- Uso. Se o produto é de vestir ou de usar no corpo, há foto dele em uma pessoa?
- Preço. O preço à vista aparece junto à foto, em letra fácil de ler, e o desconto por meio de pagamento está visível?
- Variações. Os tamanhos aparecem em botões, e dá para ver quais estão esgotados sem clicar?
- Custo total. O campo de CEP está perto do botão de compra e devolve o valor e o prazo do frete?
- Troca. Há um resumo da regra de troca e devolução, com link para a política, antes da descrição longa?
- Ficha técnica. Medidas, peso e material estão em tabela, e não perdidos no meio do texto?
- Avaliações. As notas baixas têm resposta da loja, e as fotos dos clientes abrem em sequência?
Corrija primeiro o que vale para todas as páginas de uma vez, como o campo de CEP e o resumo de troca, que ficam no modelo de página da plataforma de loja virtual. Fotos em escala e fichas técnicas exigem trabalho produto a produto: comece pelos itens mais vendidos. Antes de mudar a ordem dos blocos em uma loja que já vende, vale medir o efeito da mudança. O artigo sobre teste A/B, a comparação entre duas versões da mesma página, mostra o que dá para testar com o volume de visitas de uma loja pequena.
Comece por aqui Novo no assunto? Leia primeiro o que é e-commerce, o texto-base desta cobertura.
Fonte: Baymard Institute: Product Page UX 2026, 10 Pitfalls and Best Practices
Perguntas frequentes
O que uma página de produto deve ter?
Na avaliação do ConnectWeek, oito blocos: fotos, nome e preço, escolha de variação, botão de compra, frete com prazo e custo total, resumo da política de troca, descrição com ficha técnica e avaliações de clientes. A ordem segue as dúvidas de quem compra: primeiro o que é o produto, depois quanto custa ao todo e, por fim, se dá para confiar na loja.
O que o Baymard Institute recomenda mostrar sobre o custo total do pedido na página de produto?
Uma estimativa do custo total perto do botão de compra, com o menor valor de frete ou, no mínimo, uma estimativa do frete e as condições em que ela vale. O instituto informa que 67% das grandes lojas que avaliou, nos Estados Unidos e na Europa, não mostram essa estimativa. No Brasil, o Decreto nº 7.962, de 2013, manda exibir em local de destaque as despesas de entrega e o prazo.
É melhor mostrar os tamanhos em botões ou em menu suspenso?
Em botões. Nos testes do Baymard Institute, os tamanhos ficavam escondidos dentro do menu suspenso, e o participante só via que o seu estava esgotado ao abrir a lista. Com botões, as opções disponíveis ficam à vista. Segundo o instituto, 57% das lojas que ele avaliou não usam botões para a escolha de tamanho.
Em que parte da página de produto fica a política de troca e devolução?
Na avaliação do ConnectWeek, um resumo de duas ou três linhas fica perto do botão de compra, com link para o texto completo. Em uma pesquisa do Baymard Institute com 1.032 pessoas, 60% disseram procurar a regra de devolução na própria página de produto. O Decreto nº 7.962, de 2013, manda a loja informar de forma clara e ostensiva como exercer o direito de arrependimento, que é a desistência da compra feita fora da loja física.
Que tipos de foto a página de produto deve ter?
Na avaliação do ConnectWeek, quatro: o produto sozinho em fundo neutro, o produto ao lado de uma pessoa ou de um objeto conhecido, o produto em uso e o detalhe que gera dúvida. O Baymard Institute chama a segunda de imagem em escala e informa que 42% dos usuários dos seus testes tentaram descobrir o tamanho do produto pelas fotos.
