**TL;DR.** Ótimos PDPs otimizam três coisas: (1) velocidade (LCP < 1,8s, INP < 200ms), (2) clareza (galeria, variante, botão de compra) e (3) confiança (avaliações, política de devolução, envio, prova social). Cada elemento tem impacto mensurável na conversão. Empilhe-os de forma deliberada.
## O funil PDP
Funil típico de ecommerce (referências do setor 2025–2026):
| Etapa | Conversão mediana | Quartil superior |
| ------------------------------------- | ----------------- | ------------------ |
| Visualização PDP → adicionar ao carrinho | 8–15% | 20–30% |
| Adicionar ao carrinho → checkout | 50–65% | 70–80% |
| Checkout → compra | 50–70% | 75–90% |
| **Visualização geral do PDP → compra** | **2–4%** | **8–15%** |
Lojas que passam da mediana para o quartil superior em cada etapa dobram ou triplicam a receita por sessão.
## Velocidade
Coberto em detalhes no [guia de Core Web Vitals](/guides/core-web-vitals-ecommerce-2026). Limiares chave para PDP:
- LCP ≤ 1,8s (meta), ≤ 2,5s (bom).
- INP ≤ 150ms (meta), ≤ 200ms (bom).
- CLS < 0,05 (meta), ≤ 0,1 (bom).
Uma melhoria de um segundo no LCP em PDP geralmente resulta em um aumento de 5–15% na conversão.
## Galeria e imagem principal
A primeira imagem do produto é seu LCP. Padrões:
| Elemento | Melhor prática |
| ------------------ | ------------------------------------------------------------------- |
| Tamanho da imagem principal | 800×800px a 1200×1200px no desktop; largura total da viewport no mobile |
| Formato | AVIF (com fallback para WebP/JPEG) |
| Pré-carregamento de LCP | Sim, `
```
**Tamanho**: use botões com o rótulo do tamanho.
```html
P
M
G
GG (Fora de estoque — avise-me)
```
Regras:
- Use `aria-pressed` para o estado selecionado.
- Desative visualmente as variantes fora de estoque; ofereça "Notificar quando disponível."
- Atualize a URL para incluir a variante selecionada para compartilhamento (`?variant=size-m`).
- UI otimista para troca de variantes (coberto no [guia INP](/guides/inp-optimization-product-pages)).
## Adicionar ao carrinho
O CTA principal. Melhores práticas:
| Elemento | Padrão |
| ---------------------- | ---------------------------------------------------------------------- |
| Texto do botão | "Adicionar ao Carrinho" ou "Adicionar à Bolsa" (vocabulario da sua marca) |
| Cor | Primária da marca; alto contraste em relação ao fundo da página |
| Tamanho | Largura total no mobile; alvo de toque mínimo de 48×48px |
| Fixo no mobile | Sim, ancorado na parte inferior ao rolar além da dobra inicial |
| Estado de carregamento | Spinner no botão enquanto o servidor confirma; nunca bloqueie a página |
| Padrão de confirmação | Mini-carrinho deslizante ou toast; não uma interrupção de página |
| Urgência de estoque | "Apenas 3 restantes" se verdadeiro; nunca falso |
| Preço próximo ao botão | Sim, grande e claro |
Anti-padrões:
- Múltiplos CTAs principais ("Adicionar ao Carrinho" + "Comprar Agora" + "Compra Rápida") — divide a atenção.
- Interrupção modal após adicionar ao carrinho ("Continuar comprando ou checkout?") — adiciona uma etapa.
- Preço oculto (forçar rolagem para cima para ver).
## Sinais de confiança
O conjunto de sinais próximo ao botão de compra:
1. **Limite de frete grátis**: "Frete grátis acima de $50" — aumenta o tamanho do carrinho.
2. **Resumo da política de devolução**: "Devoluções gratuitas em 30 dias" — reduz a fricção na compra.
3. **Entrega estimada**: "Chega na quarta-feira, 15 de maio" — datas concretas superam intervalos.
4. **Emblemas de segurança**: Indicador de "Checkout seguro" estilo Stripe — menor, mas cumulativo.
5. **Estrelas de avaliação agregadas + contagem**: "4,7 ★ de 218 avaliações" — sinal de confiança primário.
## Prova social
Padrões eficazes de prova social:
- **Trechos de avaliações verificadas**: 2–3 avaliações acima da dobra com classificação em estrelas, autor, data.
- **Contagem de avaliações**: um grande número (218 avaliações) é mais persuasivo do que apenas estrelas.
- **"X pessoas visualizaram isso hoje"**: escassez de baixa pressão. Use dados reais, não aleatórios.
- **Notificações de compras recentes**: pop-up mostrando "Sarah de Londres comprou isso há 3 horas." Real, opt-in para o comprador. Frequência: a cada 30–60 segundos, no máximo.
- **Fotos geradas por usuários**: grade estilo Instagram de clientes usando/vestindo o produto.
Evite:
- Avaliações falsas.
- Urgência de estoque falsa ("Apenas 1 restante!" quando há 200).
- Temporizadores de contagem agressivos ("Oferta termina em 3:21!").
Esses métodos falham — os compradores modernos os reconhecem e a confiança diminui.
## Frequentemente comprados juntos
Uma verdadeira alavanca de conversão. Padrão:
```
Este produto: Bolsa Mensageira de Couro Marrom $149
+ Cinto de Fivela de Latão $89
+ Porta-cartões de Couro $49
─────────────────────────────────────────────────────
Total do pacote: $287
[ Adicionar pacote ao carrinho → $258 ] (economiza $29)
```
Implementação:
- Pré-calcular pares de "frequentemente comprados juntos" a partir da coocorrência de itens de pedido + similaridade cosseno em `descriptionEmbedding`.
- Tags `` reais apontando para os produtos recomendados (crawleáveis para SEO).
- Adição de pacote com um clique.
## Produtos similares
Abaixo de frequentemente comprados juntos. Use:
- similaridade cosseno pgvector em `descriptionEmbedding` para encontrar similares na mesma categoria.
- Opcionalmente, filtre por faixa de preço.
- Tags ` ` reais com `rel="related"`.
## Especificações e descrição
Conteúdo longo é bom para SEO e para compras de alta consideração. Estrutura:
```markdown
## Descrição
[Cópia de marketing completa — 2-4 parágrafos]
## Especificações
| Material | Couro de grão integral |
| Dimensões | 33 cm × 28 cm × 10 cm |
| Peso | 0,8 kg |
| Ferragens | Latão sólido |
| Origem | Feito na Itália |
## O que vem na caixa
- Bolsa
- Alça de ombro removível
- Bolsa de poeira
- Guia de cuidados
## Cuidados
[Instruções de cuidados]
```
Esse conteúdo também vai para o campo `description` do JSON-LD do produto, melhorando a profundidade do resultado rico.
## Seção de avaliações
Abaixo da seção de especificações. Melhores práticas:
- Mostre a média de todos os tempos + contagem de forma proeminente.
- Histograma de distribuição (5 estrelas: 67%, 4 estrelas: 22%, 3 estrelas: 8%, 2 estrelas: 2%, 1 estrela: 1%).
- Classificação e filtragem (mais recentes, mais úteis, por estrela).
- Paginação ou rolagem infinita (carregamento preguiçoso).
- Responda a avaliações quando relevante.
- Emblema de compra verificada.
## Como o PDP padrão da Ordiko é construído
- Renderizado no servidor com React Server Components.
- Imagem principal LCP pré-carregada com `priority` e `fetchPriority="high"`.
- Seletor de variantes com `useOptimistic` para feedback instantâneo.
- Adicionar ao carrinho fixo no mobile ao rolar além da dobra inicial.
- Confirmação de mini-carrinho deslizante (sem interrupção de página).
- Sinais de confiança (frete grátis, devoluções, checkout seguro) renderizados no lado do servidor.
- Resumo de avaliações verificadas e lista de avaliações (top 5 em JSON-LD).
- Frequentemente comprados juntos via similaridade cosseno pgvector.
- Produtos similares na mesma categoria, links crawleáveis.
- Descrição completa + especificações + avaliações abaixo da dobra.
INP padrão < 200ms p75 com essa configuração.
## FAQ
**Qual é a otimização de PDP mais subestimada?**
Um botão de adicionar ao carrinho fixo no mobile que permanece visível durante a rolagem. Em PDPs longas (que devem ser para SEO), usuários rolando por avaliações ou especificações precisam de um único toque para comprar. Lojas que adicionam um CTA fixo geralmente veem um aumento de 10–20% na conversão mobile.
**Devo ocultar variantes fora de estoque?**
Não. Mostre-as visualmente desativadas, mas ainda presentes. Ocultá-las cria uma UX inconsistente e sinaliza que clientes retornantes não conseguem encontrar um produto que compraram antes. Desative + 'Notifique-me quando disponível' converte clientes em assinantes de e-mail.
**Quanto de prova social é demais?**
Uma notificação pop-up de compras recentes a cada 30–60 segundos parece útil. A cada 5 segundos parece manipulativa. Um 'X pessoas visualizaram isso nas últimas 24h' é aceitável. Prova social excessiva é a principal causa de erosão da confiança.
**Como a Ordiko aborda a UX do PDP?**
O PDP padrão da Ordiko inclui CTA fixo no mobile, imagem principal pré-carregada LCP, amostras de cor/tamanho com UI otimista, resumo de avaliações verificadas, frequentemente comprados juntos (similaridade cosseno pgvector em embeddings de descrição), e breadcrumb + JSON-LD por padrão. INP < 200ms p75 com o tema padrão.