Design de página de produto para ecommerce: anatomia e exemplos
Design de página de produto para ecommerce
Design de página de produto: anatomia, exemplos e checklist | We.Inc
A anatomia de uma página de produto de ecommerce com layouts ao vivo e editáveis, um checklist de autoavaliação e dados estruturados Product que seguem as exigências atuais do Google.
Uma página de produto precisa responder três coisas antes do botão de compra: o que é, se serve para mim e o que acontece depois que eu pagar. No desktop, coloque fotos claras, o nome, o preço e as opções acima da dobra, depois entrega, devoluções e detalhes mais abaixo, e marque o preço e a disponibilidade com dados estruturados Product.
Anatomia da página de produto, de cima para baixo
Parte
Função
Falha comum
Galeria
Mostra o item de todos os ângulos, em uso e em escala
Só uma foto de estúdio
Nome e preço
Confirma que é o item certo, com um custo conhecido
Preço escondido até o checkout
Opções
Tamanho, cor e quantidade com estado de estoque claro
Falta de estoque descoberta depois da escolha
Adicionar ao carrinho
A única ação principal
Botões concorrentes com o mesmo peso
Entrega e devoluções
Tira a preocupação do pós-compra
Política só no rodapé
Detalhes e especificações
Materiais, dimensões, cuidados
Muro de texto sem títulos
Perguntas
Respostas que travam a decisão
Ausentes por completo
Em vez de prints de outras lojas, este guia monta, parte por parte, uma página de produto para um ateliê de cerâmica fictício em HTML e CSS puros. Use o checklist para avaliar a sua própria página e copie os dados estruturados que seguem as regras atuais do Google.
Avalie a sua página de produto atual com o checklist e veja quais partes estão faltando.
Abra os exemplos de layout ao vivo e edite-os com os dados do seu produto.
Copie o JSON-LD Product e preencha com o mesmo preço e estoque que a página mostra.
Teste a marcação no Teste de pesquisa aprimorada do Google antes de publicar.
Escreva a data ou o prazo de entrega perto do botão, não só o custo. As pessoas se planejam pelo dia em que o produto chega.
Mostre o estado do estoque em cada opção antes da escolha, para que ninguém selecione um tamanho esgotado.
Use dimensões reais e uma foto com algo conhecido para dar escala, como uma mão ou uma caneca.
Mantenha o texto do botão específico e igual em todo lugar, como Adicionar à sacola.
Os dados estruturados precisam bater com a página. Um preço na marcação diferente do que aparece na tela é motivo para o Google ignorá-la.
Perguntas frequentes
O que deve ficar acima da dobra em uma página de produto?
No desktop: a foto principal, o nome do produto, o preço, os seletores de opção e o botão de adicionar ao carrinho. No celular, a foto costuma ocupar a primeira tela, então garanta que o nome e o preço venham logo depois dela, com o botão logo em seguida.
De quais dados estruturados uma página de produto precisa?
Para páginas em que é possível comprar, a documentação de listagens de comerciantes do Google exige Product com name, image e offers, e um Offer com preço acima de zero e priceCurrency. Disponibilidade, detalhes de frete, política de devolução, marca e GTIN são recomendados.
Qual é a diferença entre snippets de produto e listagens de comerciantes?
Os snippets de produto são para páginas em que não dá para comprar diretamente, como avaliações, e precisam de um nome mais um entre review, aggregateRating ou offers. As listagens de comerciantes são para páginas que vendem o produto e precisam do preço e da moeda.
Devo mostrar avaliações nas páginas de produto?
Se você tem avaliações reais, sim, perto do preço ou abaixo dos detalhes. Nunca invente avaliações ou notas, e só adicione a marcação aggregateRating quando a nota aparecer na página e vier de clientes reais.
As fotos fazem a maior parte da venda
Planeje a galeria como um conjunto: frente, verso ou lateral, close do material, o item em uso e uma foto com algo para dar escala. Cada imagem precisa de um texto alternativo que descreva o que aquela vista mostra.
Reserve o espaço da galeria com width e height ou aspect-ratio, para que a página não pule enquanto as imagens carregam.
O bloco de compra
Agrupe o preço, as opções, a quantidade e o botão, com o resumo de entrega e devoluções logo abaixo. Esse bloco sozinho deve responder à maioria das perguntas sem rolagem.
Opções desativadas precisam de mais do que texto cinza. Adicione a palavra Esgotado ao rótulo para que o estado fique claro para todos, inclusive para quem usa leitor de tela.
Detalhes que reduzem devoluções
Dimensões, materiais, instruções de cuidado e o que vem na caixa ficam em seções fáceis de escanear, com títulos. Uma nota curta sobre tamanho ou caimento evita muitos pedidos errados.
Responda na própria página as duas ou três perguntas que os clientes mais fazem e coloque um link para o FAQ completo para o resto.
Exemplos de layout de página de produto
Página de produto em duas colunas com galeria e bloco de compra
Galeria à esquerda e bloco de compra à direita em telas largas; no celular eles se empilham. O tamanho esgotado diz isso em palavras, não só em cinza.
Detalhes em seções com rótulos
Seções curtas com títulos são mais fáceis de escanear do que uma descrição longa. A primeira vem aberta porque responde à pergunta mais comum.
Dados estruturados de produto para uma página que vende
name, image e offers com price e priceCurrency são os campos obrigatórios das listagens de comerciantes; availability e o resto são recomendados. Os valores precisam bater com a página.
Pelo menos quatro fotos, incluindo uma em uso e uma mostrando a escala
Toda imagem tem texto alternativo descrevendo aquela vista
Preço visível ao lado do nome do produto
Estado do estoque mostrado em cada opção antes da escolha
Um único botão principal claro de adicionar ao carrinho
Custo e prazo de entrega mostrados perto do botão
Política de devolução resumida perto do botão
Dimensões, materiais e cuidados em seções com rótulos
Perguntas mais comuns respondidas na página
Funciona com 375 px de largura sem rolagem lateral
Os dados estruturados de produto batem com o preço e o estoque visíveis
Só avaliações reais, se houver alguma exibida
Checklist da página de produto
Marque o que a sua página de produto já faz. A pontuação mostra o que falta corrigir; nada é salvo nem enviado para lugar nenhum.