Checklist da página de produto: o que impede a compra

Checklist da página de produto com base na Baymard e na WebAIM: preço, frete e devolução, fotos, avaliações, compra no celular, pop-ups, busca e teclado.

Equipe editorial FixReports13 min de leitura

Os compradores desistem com mais frequência na página de produto quando não conseguem descobrir o custo total, não encontram as condições de frete e de devolução, não conseguem avaliar o produto pelas fotos e pelas avaliações ou não conseguem alcançar e usar com facilidade o botão de compra, principalmente no celular. Pop-ups que cobrem a página, páginas de políticas difíceis de encontrar, uma busca interna que não responde a perguntas simples e controles que não funcionam com teclado também bloqueiam compras. Os números abaixo são dados de pesquisas do setor feitas pelo Baymard Institute e pela WebAIM, com base em grandes amostras de sites e de compradores; eles descrevem padrões comuns, e não previsões para uma loja específica.

Pontos principais

  • Na pesquisa de 2026 da Baymard com 1.083 adultos dos EUA que tinham comprado on-line nos três meses anteriores, 40% disseram ter abandonado uma compra no checkout porque os custos extras, como frete, impostos e taxas, eram altos demais (Baymard Institute (abre em uma nova aba)).
  • O benchmark de páginas de produto da Baymard constatou que 67% dos principais sites de e-commerce não dão uma estimativa do custo total perto da área de compra, e que 44% não mostram a política de devolução nem colocam um link para ela no conteúdo principal do produto (Baymard Institute (abre em uma nova aba), atualizado em 18 de março de 2026).
  • No mesmo benchmark, 62% dos sites para celular tinham uma UX de página de produto “medíocre” ou pior.
  • A WebAIM detectou falhas de WCAG em 95,9% do milhão de páginas iniciais mais acessadas em fevereiro de 2026 (WebAIM (abre em uma nova aba)).
  • Em uma análise da Baymard de 2021 com 33 sites de e-commerce de maior faturamento, 45% tinham funcionalidades que não podiam ser operadas com teclado (Baymard Institute (abre em uma nova aba)).

Por que os compradores abandonam uma compra?

A resposta mais comum é que os compradores só estavam olhando; depois vêm os custos extras, a entrega demorada, a pouca confiança no tratamento dos dados do cartão e a obrigação de criar uma conta.

A página da Baymard sobre abandono de carrinho indica uma taxa média de abandono documentada de 70,22%, calculada a partir de 50 estudos (página atualizada pela última vez em 22 de setembro de 2025). O gráfico de motivos, identificado como dados de 2026, vem de uma pesquisa com 1.083 adultos dos EUA que tinham comprado on-line nos três meses anteriores. Os participantes podiam escolher mais de um motivo (Baymard Institute (abre em uma nova aba), em outubro de 2026):

Motivo para abandonar uma compra on-line no checkoutPercentual de participantes
Eu só estava olhando / não estava pronto para comprar42%
Custos extras altos demais (frete, impostos, taxas)40%
A entrega era demorada demais20%
Não confiei no site para informar os dados do meu cartão de crédito19%
O site queria que eu criasse uma conta18%
Processo de checkout longo ou complicado demais17%
O site apresentou erros ou travou17%
A política de devolução não era satisfatória13%
Não consegui ver nem calcular de antemão o custo total do pedido12%
O cartão de crédito foi recusado10%
Não havia formas de pagamento suficientes9%

Esses são resultados de uma pesquisa nos EUA sobre o checkout, e não medições da sua loja. Vários desses motivos começam antes, na página de produto, onde os compradores veem pela primeira vez o preço, as condições de entrega e as de devolução. Só os seus próprios dados de analytics podem mostrar quais deles importam no seu caso.

O preço completo está claro na página de produto?

O preço atual, o preço original quando houver, o que está ou não incluído e uma estimativa do frete devem ficar todos ao lado do botão de compra.

O benchmark de páginas de produto de 2026 da Baymard constatou que 67% dos sites não oferecem uma estimativa do “custo total do pedido” perto da área de compra, e que 81% não mostram o preço por unidade de medida em produtos vendidos em quantidades ou tamanhos diferentes (Baymard Institute (abre em uma nova aba)). Verifique se a página mostra:

  • O preço atual e, em itens em promoção, o preço original.
  • Um preço por unidade de medida para produtos vendidos em vários tamanhos.
  • Se impostos ou tributos de importação estão incluídos.
  • O custo do frete, ou o valor de pedido que dá direito a frete grátis.

Shopify: no tema Dawn, o bloco de preço acrescenta o aviso “Taxes included.” (impostos incluídos) e um link “Shipping calculated at checkout.” (frete calculado no checkout) quando essas configurações e uma política de frete existem (código-fonte do Dawn (abre em uma nova aba)). Isso está correto, mas não é uma estimativa; por isso, acrescente em um bloco de texto suas tarifas reais ou o valor mínimo para frete grátis.

WooCommerce: as opções “Enable the shipping calculator on the cart page” (ativar a calculadora de frete na página do carrinho) e “Hide shipping costs until an address is entered” (ocultar os custos de frete até que um endereço seja informado), em WooCommerce > Configurações > Entrega (WooCommerce > Settings > Shipping), afetam o carrinho e o checkout, e não a página de produto (código-fonte do WooCommerce (abre em uma nova aba)). Coloque as tarifas no template do produto ou na descrição curta.

Os compradores encontram as informações de frete e devolução antes de adicionar ao carrinho?

Coloque um resumo curto do prazo de entrega, do custo do frete e do prazo para devolução perto do botão de compra, com um link para a política completa.

Na pesquisa Consideration & Purchase Behavior da Baymard, com 1.032 participantes, 60% disseram procurar informações sobre a política de devolução na página de produto, mas 44% dos sites avaliados não mostram essa política nem colocam um link para ela no conteúdo principal do produto (Baymard Institute (abre em uma nova aba)). Na pesquisa de abandono de 2026 citada acima, 20% mencionaram a entrega demorada e 13% uma política de devolução insatisfatória.

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify: escreva suas políticas em Configurações > Políticas (Settings > Policies) (Central de Ajuda da Shopify (abre em uma nova aba)). No Dawn, um bloco Linha recolhível (Collapsible row) na página de produto pode mostrar um texto ou o conteúdo de uma página (código-fonte do Dawn (abre em uma nova aba)); assim, uma única página de frete e devolução pode aparecer em todos os produtos.

WooCommerce: o WooCommerce cria uma página “Refund and Returns Policy” (política de reembolso e devolução) como rascunho (código-fonte do WooCommerce (abre em uma nova aba)). Ela continua não publicada até que você a edite e publique.

As imagens do produto respondem às dúvidas dos compradores?

As imagens devem mostrar o produto de vários ângulos, em escala e em uso, porque muitos compradores avaliam o tamanho e o caimento pelas fotos, e não pelas especificações.

Os testes da Baymard constataram que 42% dos usuários tentam deduzir o tamanho de um produto pelas imagens, enquanto 37% dos sites avaliados não oferecem uma imagem “em escala” que mostre o produto ao lado de uma pessoa ou de um objeto conhecido. E 23% não oferecem uma imagem com modelo, o que importa mais em roupas, acessórios e cosméticos (Baymard Institute (abre em uma nova aba)).

Verifique também se a galeria muda para a imagem certa quando uma cor é escolhida, se o zoom funciona no celular e se cada imagem tem um texto alternativo que descreva o que aquela vista mostra, como “Camisa de linho, vista de costas”.

As avaliações são fáceis de encontrar e confiáveis?

Mostre a nota média e o número de avaliações perto do título do produto, com um link para as avaliações completas, e responda às avaliações negativas.

A Baymard constatou que 89% dos sites avaliados não respondem às avaliações negativas, e que 63% não permitem que os compradores passem das fotos de um avaliador para as do seguinte, de uma avaliação para outra (Baymard Institute (abre em uma nova aba)). Widgets de avaliações que carregam tarde também podem empurrar a página para baixo; por isso, reserve o espaço deles.

Shopify: o bloco Classificação do produto (Product rating) do Dawn mostra as estrelas de um app de avaliações, e o tema avisa que um app é necessário (código-fonte do Dawn (abre em uma nova aba)).

WooCommerce: em WooCommerce > Configurações > Produtos (WooCommerce > Settings > Products), as opções de avaliação incluem “Enable product reviews” (ativar avaliações de produtos), “Show 'verified owner' label on customer reviews” (mostrar o selo de “proprietário verificado” nas avaliações), “Reviews can only be left by 'verified owners'” (só “proprietários verificados” podem avaliar) e “Enable star rating on reviews” (ativar classificação por estrelas nas avaliações) (código-fonte do WooCommerce (abre em uma nova aba)).

O botão de adicionar ao carrinho é fácil de alcançar e tocar no celular?

No celular, os compradores devem conseguir ver o preço, escolher uma variante e tocar em adicionar ao carrinho sem precisar procurar, com controles grandes o bastante para acertar.

No benchmark de 2026 da Baymard, 52% dos sites para computador e 62% dos sites para celular tinham uma UX de página de produto “medíocre” ou pior, e 57% dos sites não usavam botões para a seleção de tamanho, deixando os tamanhos escondidos em menus suspensos (Baymard Institute (abre em uma nova aba)).

Abra uma página de produto em um celular de verdade e verifique:

  • Primeira tela. Em um layout empilhado para celular, a galeria costuma vir primeiro, então uma imagem alta pode empurrar o título, o preço e o botão para baixo da primeira tela.
  • Barras de compra fixas. Se você usa uma, ela não pode cobrir os elementos em foco. O resumo do W3C sobre o critério 2.4.11 da WCAG 2.2 (nível AA) usa como exemplo um rodapé fixo que esconde os itens em foco (W3C (abre em uma nova aba)).
  • Áreas de toque. O critério 2.5.8 da WCAG (nível AA) define um mínimo de 24 por 24 pixels CSS, com exceções (W3C (abre em uma nova aba)); as orientações de temas da Shopify recomendam pelo menos 48 por 48 pixels no celular (Shopify (abre em uma nova aba)).
  • Rolagem lateral. O critério 1.4.10 Reflow da WCAG exige que o conteúdo funcione com 320 pixels CSS de largura sem rolagem em duas direções (W3C (abre em uma nova aba)). Tabelas de medidas e tabelas comparativas largas são causas frequentes.

Os pop-ups atrapalham a compra?

Pop-ups que cobrem a página de produto assim que ela abre escondem as informações que os compradores vieram buscar; por isso, prefira banners pequenos e limite os convites para cadastro.

As orientações do Google Search Central descrevem intersticiais e caixas de diálogo intrusivos como elementos que bloqueiam a visualização do conteúdo e recomendam banners pequenos em vez de sobreposições de página inteira (Google Search Central (abre em uma nova aba)). A Shopify observa que o conteúdo de pop-ups também pode causar mudanças de layout (Central de Ajuda da Shopify (abre em uma nova aba)). Qualquer caixa de diálogo que você mantiver precisa poder ser fechada pelo teclado; o critério 2.1.2 No Keyboard Trap (sem bloqueio do teclado, nível A) da WCAG exige que o foco consiga sair de um componente usando apenas o teclado (W3C (abre em uma nova aba)).

Os compradores encontram as suas páginas de confiança e de políticas?

Coloque links para as páginas de reembolso, frete, privacidade, termos e contato no rodapé de todas as páginas.

Na pesquisa de 2026 da Baymard, 19% dos participantes disseram ter abandonado uma compra porque não confiaram no site para informar os dados do cartão. Políticas claras e dados de contato são sinais básicos de que uma loja é legítima.

Shopify: depois que você adiciona as políticas em Configurações > Políticas (Settings > Policies), a Shopify coloca automaticamente links para elas no rodapé do checkout; para exibi-las na loja, adicione-as a um menu em Conteúdo > Menus (Content > Menus) (Central de Ajuda da Shopify (abre em uma nova aba)) ou ative a configuração Links de políticas (Policy links) no rodapé do Dawn.

WooCommerce: publique o rascunho da página de reembolso e depois adicione as páginas de políticas e de contato ao rodapé.

A busca do site encontra produtos e respostas?

A busca deve trazer os produtos certos para nomes, erros de digitação e sinônimos, e também deve responder a perguntas como “devolução” ou “frete”.

O benchmark de busca de 2026 da Baymard, com mais de 170 sites e apps, classificou como “medíocres” ou piores 46% das experiências no computador, 58% no celular e 64% nos apps, e encontrou problemas com buscas que não são de produtos, como uma busca pela política de devolução que retorna produtos, em 66% dos sites (Baymard Institute (abre em uma nova aba), atualizado em 29 de abril de 2026).

Teste a sua loja com o nome de um produto campeão de vendas, uma versão com erro de digitação desse nome, uma palavra de categoria e “devolução”. Na Shopify, a busca da loja retorna produtos, posts do blog e páginas, com busca preditiva e tolerância a erros de digitação ativadas por padrão, e o app Search & Discovery acrescenta filtros e destaque de produtos (Central de Ajuda da Shopify (abre em uma nova aba)). Por isso, uma página comum que resuma frete e devolução pode aparecer nessas buscas.

É possível comprar usando apenas o teclado?

Todas as etapas, da escolha de uma variante até a chegada ao checkout, devem funcionar só com o teclado, com um indicador de foco visível.

A WCAG 2.2 exige que todas as funcionalidades funcionem pelo teclado (2.1.1, nível A), que não haja bloqueios do teclado (2.1.2, nível A), que haja um indicador de foco visível (2.4.7, nível AA) e que os itens em foco não fiquem totalmente escondidos por outro conteúdo (2.4.11, nível AA) (W3C (abre em uma nova aba)). Esse básico muitas vezes falta. A análise da Baymard de 2021 com 33 sites de maior faturamento constatou que 45% tinham funcionalidades que não podiam ser operadas pelo teclado e que 48% não mantinham o indicador de foco visível o tempo todo (Baymard Institute (abre em uma nova aba)). A varredura da WebAIM de fevereiro de 2026 encontrou uma média de 56,1 erros detectados por página inicial, e de 71,0 nos sites da categoria Shopping (WebAIM (abre em uma nova aba)).

Um teste de cinco minutos:

  1. Abra uma página de produto e pressione Tab sem tocar no mouse.
  2. Verifique se você sempre consegue ver onde está o foco.
  3. Escolha um tamanho e uma cor, e altere a quantidade.
  4. Acione o botão de adicionar ao carrinho e verifique se o foco passa para o carrinho lateral e se ele fecha pelo teclado.
  5. Chegue ao botão de finalizar compra.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Uma análise gratuita verifica muitos desses itens em cerca de um minuto. O Relatório de Conversão transforma verificações de página, como a visibilidade do preço, o botão de adicionar ao carrinho no celular, as informações de frete e devolução, os pop-ups, os links de políticas no rodapé, a busca, o caminho de compra pelo teclado e a rolagem lateral, em recomendações priorizadas. Ele se baseia em verificações das páginas, e não nos seus dados de vendas, e não garante aumento de vendas.

Perguntas frequentes

Qual é o motivo mais comum para os compradores abandonarem uma compra?

Na pesquisa de 2026 da Baymard com 1.083 adultos dos EUA, a resposta mais citada foi “só estava olhando” (42%). Entre os demais motivos, os custos extras, como frete, impostos e taxas, ficaram em primeiro lugar, com 40%, à frente da entrega demorada, com 20%.

Corrigir esses problemas vai aumentar minha taxa de conversão?

Ninguém pode prometer isso. As pesquisas descrevem barreiras comuns em grandes amostras de sites e de compradores; se removê-las muda os seus resultados depende dos seus produtos, preços e tráfego, então meça antes e depois de cada mudança.

Onde as informações de frete e devolução devem ficar na página de produto?

Perto do preço e do botão de compra, como um resumo curto com um link para a política completa. Nas pesquisas da Baymard, 60% dos participantes disseram procurar informações sobre a política de devolução na página de produto.

O botão de adicionar ao carrinho precisa ficar visível sem rolagem no celular?

Nenhuma regra exige isso, mas os compradores devem ver o preço e chegar ao botão rapidamente. Uma barra de compra fixa é uma opção, desde que não esconda os elementos em foco nem outro conteúdo.

A acessibilidade faz parte da conversão?

Sim, no sentido mais simples: um comprador que não consegue operar o seletor de variantes ou o botão de adicionar ao carrinho com teclado ou leitor de tela não consegue comprar. A WCAG 2.2 nível AA cobre esse básico.

Fontes

Todos os guias