Above the Fold

O que é Above the Fold?

Above the fold (acima da dobra) é a parte de uma página visível na janela do navegador antes do usuário rolar a página para baixo. O termo vem dos jornais impressos, onde a metade superior da primeira página ficava visível nas bancas. Na web não existe uma “dobra” fixa: o limite depende do tamanho da tela, dispositivo e janela do navegador do visitante, então o que é visível no desktop pode exigir rolagem no celular.

Por que o Above the Fold é importante?

É aqui que você tem alguns segundos para mostrar o que vende e qual é o próximo passo. Estudos de rastreamento ocular do Nielsen Norman Group mostram que os usuários passam a grande maioria da sua atenção acima da dobra, embora também rolem a página. Uma proposta de valor clara e um CTA visível acima da dobra são, portanto, uma alavanca clássica para a taxa de conversão em uma loja virtual.

Casos de uso comuns

• Hero da página inicial. Mostre a sua principal mensagem, oferta ou categoria sem necessidade de rolagem tanto no celular quanto no desktop.
• Página de produto. Certifique-se de que o preço, “Adicionar ao carrinho” e a imagem do produto sejam visíveis imediatamente.
• Páginas de campanha. Coloque a oferta e o CTA acima da dobra para que o tráfego de anúncios não precise procurar pela ação.
• Core Web Vitals. O maior elemento acima da dobra é frequentemente o elemento LCP, então uma imagem de hero pesada pode desacelerar o seu LCP.

A perspectiva do Shopify

No Shopify, a área acima da dobra é controlada pelas seções e blocos do tema no editor de temas. Um erro comum é o lazy-loading (carregamento lento) da imagem do hero: quando ela é a candidata ao LCP, isso atrasa o carregamento e prejudica as Core Web Vitals. Em vez disso, defina loading="eager" (ou fetchpriority="high") na imagem do hero e mantenha a seção superior leve. Sempre teste em um celular real — não apenas no desktop — já que a dobra fica muito mais alta em telas pequenas.