Above the Fold

¿Qué es Above the Fold?

Above the fold (por encima del pliegue) es la parte de una página web que resulta visible en la ventana del navegador antes de que el usuario haga scroll (desplace la página hacia abajo). El término proviene de los periódicos impresos, donde la mitad superior de la primera página quedaba visible en el quiosco. En la web no existe un “pliegue” fijo: el límite depende del tamaño de pantalla, el dispositivo y la ventana del navegador del visitante, por lo que lo que es visible en el escritorio puede requerir scroll en un dispositivo móvil.

¿Por qué es importante el Above the Fold?

Aquí es donde dispones de pocos segundos para mostrar qué vendes y cuál es el siguiente paso. Los estudios de seguimiento ocular (eye-tracking) de Nielsen Norman Group demuestran que los usuarios dedican la gran mayoría de su atención a la zona por encima del pliegue, a pesar de que sí hacen scroll. Por lo tanto, una propuesta de valor clara y una CTA (llamada a la acción) visible por encima del pliegue constituye una palanca clásica para mejorar la tasa de conversión en una tienda online.

Casos de uso comunes

• Hero de la página de inicio. Muestra tu mensaje principal, oferta o categoría sin necesidad de hacer scroll, tanto en dispositivos móviles como en ordenadores de escritorio.
• Página de producto. Asegúrate de que el precio, el botón “Añadir al carrito” y la imagen del producto sean visibles de inmediato.
• Páginas de campaña. Coloca la oferta y la CTA por encima del pliegue para que el tráfico de los anuncios no tenga que buscar dónde realizar la acción.
• Core Web Vitals. El elemento más grande por encima del pliegue suele ser el elemento LCP, por lo que una imagen hero pesada puede ralentizar tu LCP.

Perspectiva de Shopify

En Shopify, el área por encima del pliegue se controla mediante las secciones y bloques del tema en el editor de temas. Un error común es aplicar lazy-loading (carga diferida) a la imagen hero: cuando esta es la candidata al LCP, esto retrasa la carga y perjudica las Core Web Vitals. En su lugar, configura loading="eager" (o fetchpriority="high") en la imagen hero y mantén la sección superior ligera. Realiza pruebas siempre en un teléfono real —no solo en la pantalla de ordenador—, ya que el pliegue queda mucho más arriba en pantallas pequeñas.