Como criar páginas de produto que vendem

Uma página de produto que vende responde, sem obrigar o cliente a procurar, às perguntas de quem está prestes a comprar: o que é, como é, quanto custa no total, quando chega e o que acontece se não servir. Título claro, fotos que mostram escala e detalhe, variações fáceis de escolher, preço com parcelamento, frete e prazo visíveis, avaliações reais e uma página que abre rápido no celular formam a base.

• Preço, parcelamento, frete e prazo precisam aparecer antes do carrinho, porque custo extra é o principal motivo de abandono segundo a Baymard Institute.
• Fotos com escala, detalhe e o produto em uso respondem dúvidas que a descrição sozinha não resolve.
• Variações de tamanho e cor funcionam melhor em botões do que em lista suspensa.
• Avaliações só entram no dado estruturado quando o cliente enxerga essas avaliações na própria página.
• O Google pede nome, imagem, preço e moeda para exibir o produto em resultados enriquecidos de comerciante.
• Em tela pequena, a foto principal do produto costuma ser o elemento que decide o tempo de carregamento.

Quem abre uma página de produto quer comprar ou está comparando com outra loja. Cada dúvida sem resposta vira uma aba nova no navegador.

Este guia percorre a página de produto de cima a baixo, na ordem em que o cliente lê, e termina nos dados estruturados que ajudam o Google a entender o que você vende.

O que uma página de produto precisa mostrar

Uma página de produto precisa mostrar o que o produto é, o que ele custa por inteiro, quando chega e como devolver. Essa lista vem do bom senso de quem compra e, no Brasil, também da lei.

O Decreto 7.962/2013, que regulamenta o Código de Defesa do Consumidor no comércio eletrônico, pede que o site informe em local de destaque o nome empresarial, o CNPJ, o endereço e as formas de contato do fornecedor. Pede também as características essenciais do produto, o preço com as despesas adicionais, como entrega e seguro, e as condições da oferta, incluindo formas de pagamento, disponibilidade e prazo de entrega.

Na prática, a página completa reúne estes blocos:

• Título com o nome do produto e o que o diferencia.
• Galeria de fotos com o produto inteiro, o detalhe e o uso.
• Preço, parcelamento e formas de pagamento.
• Campo para calcular frete e prazo pelo CEP.
• Descrição com o que a pessoa quer saber antes de comprar.
• Variações escolhidas em botões.
• Política de troca e devolução resumida.
• Avaliações de quem já comprou.

Quem monta a estrutura da loja antes de cadastrar os produtos ganha tempo, porque a página se repete para o catálogo inteiro. É o trabalho que fazemos na criação de lojas virtuais em Florianópolis, onde o modelo da página de produto sai definido antes do primeiro cadastro.

Como escrever o título e a descrição do produto

O título do produto deve trazer o nome que o cliente digitaria na busca, seguido do atributo que o separa dos parecidos. Camiseta de algodão orgânico masculina preta diz mais do que um nome de coleção que só a sua equipe conhece.

O que colocar no título

O padrão é tipo do produto, marca ou modelo e o atributo principal, nessa ordem, porque o título aparece cortado em listas e no resultado do Google.

O que a descrição responde

A descrição serve a quem chegou com dúvida específica: material, medidas, compatibilidade, cuidados, o que vem na caixa e para quem o produto serve.

Escreva a primeira frase com o ponto principal, porque muita gente lê só ela. Detalhes técnicos ficam depois, em lista curta ou em tabela de especificações.

Texto do fornecedor copiado ao pé da letra aparece igual em dezenas de lojas. Reescrever com o que você sabe do produto, do estoque e do cliente dá à página um texto que só ela tem, e é isso que o Google e o cliente conseguem diferenciar.

Quais fotos mostram o produto de verdade

A galeria precisa mostrar o produto inteiro, o detalhe do acabamento, a escala em relação a algo conhecido e o produto em uso. A Baymard Institute, que estuda o comportamento de compra online, aponta que 37% dos sites que ela avaliou não trazem imagens com escala, e 23% não mostram o produto em uma pessoa quando isso ajudaria a entender o tamanho.

Uma boa sequência para a galeria:

1. Foto principal, com fundo limpo e o produto inteiro.
2. Detalhe de material, costura, encaixe ou acabamento.
3. Foto de escala, com o produto ao lado de uma mão, de um móvel ou de outro objeto de tamanho conhecido.
4. Foto de uso, no ambiente onde o produto vai ficar.
5. Foto da embalagem, quando o produto é presente ou vem com acessórios.

Em celular, a galeria precisa deslizar com o dedo e ampliar com o toque. Miniaturas pequenas ajudam a indicar quantas fotos existem, e a Baymard observa que elas aparecem pouco nas versões mobile.

Foto própria reduz a devolução por expectativa errada, porque o cliente vê o que vai receber. Cada foto precisa de texto alternativo que descreva o que aparece, o que também ajuda a busca por imagens.

Como apresentar as variações do produto

Variações de tamanho, cor e modelo funcionam melhor em botões visíveis, com a opção sem estoque indicada no próprio botão. A Baymard registra que 57% dos sites avaliados ainda usam lista suspensa para escolher o tamanho, o que esconde as opções e obriga um clique extra.

Cada variação precisa trocar a foto, o preço e a disponibilidade sem recarregar a página inteira. Se a cor azul tem foto própria, o cliente precisa ver o azul assim que tocar no botão.

Para o Google, variações do mesmo produto se agrupam com o tipo ProductGroup do schema.org, que reúne os produtos parecidos sob um código pai. A documentação da Central de Pesquisa do Google descreve as propriedades variesBy, hasVariant e productGroupID para essa tarefa.

Preço, parcelamento, frete e prazo visíveis

O preço total precisa ser conhecido antes do carrinho: valor do produto, parcelamento, frete e prazo. Segundo a Baymard Institute, o custo extra com frete, imposto e taxas é o motivo mais citado de abandono de compra, apontado por 40% dos entrevistados, e a entrega lenta vem em segundo, com 20%.

Isso explica por que a página de produto deve carregar a resposta que o carrinho costuma dar tarde demais. O campo de CEP com cálculo na própria página tira essa surpresa do fim do caminho.

O que mostrar sobre preço

• O preço à vista e o valor da parcela com o número de vezes.
• A condição de desconto para Pix ou boleto, se a loja oferece.
• O valor mínimo para frete grátis, quando existir.
• O preço por unidade, quando o produto é vendido em kit.

A mesma Baymard aponta que 67% dos sites não mostram uma estimativa do custo total do pedido perto do checkout. Quem mostra na página de produto sai na frente.

O que mostrar sobre entrega e devolução

Prazo de entrega em data ou em dias úteis é mais claro do que a palavra rápido. A política de devolução em duas linhas, na própria página, responde à dúvida que 13% dos entrevistados da Baymard citam como motivo de abandono, e 44% dos sites avaliados não exibem essa política na página do produto.

No Brasil, o Código de Defesa do Consumidor dá sete dias para desistir de compra feita fora da loja física, contados do recebimento. Escrever isso de forma simples na página evita dúvida e reduz contato no atendimento.

A etapa seguinte à página do produto é o pagamento, e nosso guia sobre checkout simplificado mostra como manter o cliente no caminho até a confirmação.

Como usar avaliações reais na página

Avaliações reais dão a quem está em dúvida a informação que o texto da loja não dá, que é a experiência de outro comprador. A Baymard verificou que a maioria das lojas trata mal esse bloco: 65% erram no resumo da distribuição de notas, aquele gráfico que mostra quantas avaliações têm cinco, quatro ou três estrelas.

Uma seção de avaliações útil traz a nota média, a quantidade de avaliações, a distribuição das notas, filtros por nota e fotos enviadas pelos clientes. Perguntas e respostas sobre o produto completam o bloco.

Responder às avaliações mostra atenção. A Baymard identificou que 89% dos sites avaliados não respondem às avaliações negativas, então uma resposta educada e objetiva se destaca.

O que o Google exige das avaliações

A documentação de Review Snippet do Google diz que o conteúdo de avaliação precisa estar visível na página, com texto e nota. Quando a loja marca várias avaliações individuais, ela também precisa informar a nota agregada.

O Google também proíbe avaliações falsas e avaliações incentivadas sem aviso claro, isto é, escritas em troca de dinheiro, desconto, cupom ou produto grátis. Quando existe incentivo, ele precisa aparecer de forma visível ao lado da avaliação.

Dados estruturados de Product e o que o Google exige

Dado estruturado de Product é um código no HTML da página que descreve o produto em vocabulário do schema.org, e o Google usa esse código para entender preço, disponibilidade e avaliações. A Central de Pesquisa do Google separa duas formas de uso: trechos de produto, para páginas em que não se compra direto, e listagens de comerciante, para páginas em que o cliente pode comprar.

Para listagens de comerciante, a documentação lista como obrigatórios:

• name, o nome do produto.
• image, com as URLs das fotos do produto (o Google recomenda imagens de alta resolução).
• offers, com price (maior que zero) e priceCurrency, o código de moeda de três letras, como BRL.

Entre as propriedades recomendadas estão availability, url, itemCondition, priceValidUntil, shippingDetails e hasMerchantReturnPolicy, além de aggregateRating, review, brand, description e sku ou gtin no próprio produto.

Regras que evitam erro no Google

Só páginas em que o cliente consegue comprar o produto são elegíveis às listagens de comerciante. A documentação também pede que a página trate de um único produto, o que exclui página de categoria e listagem.

O preço marcado no código precisa ser o mesmo que o cliente vê na página. Diferença entre os dois é motivo comum para o Google ignorar a marcação.

Merchant Center e dados estruturados juntos

O Google informa que oferecer dados estruturados na página e um feed no Merchant Center aumenta a chance de aparecer nas experiências de compra. Parte das informações se combina entre as duas fontes, e o preço do feed, por exemplo, pode completar um dado estruturado que veio sem preço. Detalhamos esse caminho no artigo sobre como aumentar a conversão da loja virtual.

Nenhum código garante destaque nos resultados, e o Google avisa que os recursos de exibição mudam com o tempo. O ganho está em entregar ao Google um retrato correto do produto.

Velocidade da página de produto no celular

A página de produto precisa carregar a foto principal rápido, porque é ela que costuma ser o maior elemento visível e define o LCP (Largest Contentful Paint). Segundo a web.dev, o Google considera bom um LCP de até 2,5 segundos, um INP de até 200 milissegundos e um CLS de até 0,1, medidos no percentil 75 das visitas, separados por celular e computador.

LCP mede quando a parte principal aparece, INP mede a resposta ao toque e CLS mede quanto a página se mexe enquanto carrega.

O que costuma pesar na página de produto

• Galeria com fotos grandes demais para a tela do celular.
• Foto principal carregada com lazy load, que atrasa justamente o item mais importante.
• Botão de compra que se desloca quando um banner ou um selo de avaliação carrega depois.
• Scripts de terceiros, como chat e pixels, disputando a mesma largura de banda.

A web.dev orienta nunca aplicar lazy load na imagem do LCP e usar fetchpriority alto em uma ou duas imagens, no máximo. Ela também indica que em uma página bem ajustada cerca de 40% do tempo vai para o servidor entregar o HTML e cerca de 40% para baixar a imagem principal, com pouco tempo perdido entre um e outro.

Quando a loja demora a responder, o problema começa no servidor e não na foto. Nosso guia sobre site lento e como resolver mostra como separar uma coisa da outra.

Como montamos a página de produto nos nossos projetos

Nós recomendamos definir o modelo da página de produto antes de cadastrar o primeiro item, porque o catálogo inteiro herda a estrutura. Começamos por uma conversa para entender o negócio, o tipo de cliente e as dúvidas que ele tem antes de comprar.

Escrevemos os textos do modelo a partir do que o lojista explica, e recomendamos que as fotos sigam a sequência de produto inteiro, detalhe, escala e uso. Usamos WooCommerce, com a loja no domínio e na hospedagem do próprio cliente e com um painel visual para ele cadastrar e atualizar produtos sozinho.

Testamos a página em tela pequena antes de entregar, medimos a velocidade antes de publicar e entregamos a loja com dados estruturados de Product e Search Console configurado. A ideia é que o dono da loja receba um modelo que se repete bem quando ele cadastrar o produto de número cinquenta.

Perguntas frequentes sobre página de produto

Quantas fotos uma página de produto precisa ter?
Não existe número fixo, e o critério é cobrir produto inteiro, detalhe, escala e uso. Produto simples pode pedir quatro fotos, e produto com variações pede foto para cada cor ou modelo.

A descrição do fornecedor pode ser usada?
Pode, mas a mesma descrição aparece em outras lojas e não diferencia a sua. Reescrever com medidas reais, cuidados e o que vem na caixa dá à página um texto próprio.

Preciso marcar as avaliações com dado estruturado?
Só marque se as avaliações aparecem na página para o cliente. O Google pede que texto e nota estejam visíveis, e que avaliações incentivadas informem o incentivo de forma clara.

Qual a diferença entre trecho de produto e listagem de comerciante?
Trecho de produto vale para páginas que descrevem o produto sem permitir compra direta, como análises. Listagem de comerciante vale para páginas em que o cliente compra, e pede preço, moeda e disponibilidade.

Por onde começar

Comece pela página do produto que mais vende hoje e confira, com o celular na mão, se preço total, prazo, política de troca e uma foto de escala aparecem sem rolar demais. Corrija o que faltar nessa página e replique o modelo para o resto do catálogo.

O critério para priorizar é a dúvida que mais tira o cliente do caminho: custo total, prazo e confiança vêm antes de qualquer ajuste de design. Para ver como isso se encaixa no restante do projeto, o guia sobre como criar uma loja virtual mostra a ordem completa.

Se você quer montar ou refazer a página de produto da sua loja, fale com a Virtual Floripa e explique o que vende. Fazemos o modelo pensando no celular e no que o Google pede.