What belongs above the fold on a product page?

Treat the fold as a first decision point

“Above the fold” is the part of a page visible before someone scrolls. It is not a fixed rectangle. A phone, tablet, laptop and large monitor show different amounts of content, and browser settings, text size and orientation change the space again. Use the idea as a prioritisation tool, not as a promise that every important detail must fit into one screen.

The first view should answer three basic questions: What is this product? Why might it suit me? What can I do next? If a shopper cannot identify the item, understand its main value or find the purchase action, additional content lower on the page will not help much.

Start with the visitor’s source and intention. Someone arriving from a specific product search may need confirmation that the page matches their expectation. Someone browsing a category may need a quick explanation of use, price and options. The top area should continue the promise that brought the person to the page.

Make product identity unmistakable

Place the product name, a useful primary image and a short explanation in the first view. The name should be specific enough to distinguish this item from similar products. If size, model, material, compatibility or quantity is essential to identity, include it in the title or nearby summary.

Use images that show the product clearly in the context that matters. A clothing shopper may need front, back and fit information. A furniture shopper may need scale and surroundings. A software buyer may need a recognisable interface or workflow rather than a decorative illustration. The image should support understanding, not only create atmosphere.

Add a concise value statement. Explain the main job the product does or the situation it supports. Avoid filling the first screen with a long introduction, but do not reduce the description to a slogan that could apply to every product in the catalogue.

Show price, value and availability early

Price is part of product identity for many shoppers. Show it clearly, including relevant price conditions, subscriptions or variations. If delivery, taxes or required extras materially affect the total, provide a visible indication rather than hiding the information until checkout.

Availability belongs near the price and action. Tell visitors whether the product is in stock, made to order, temporarily unavailable or available on a known date. If stock information is approximate, explain the uncertainty. Artificial urgency can create pressure, but it does not replace useful availability information.

Use the area near the price to clarify the strongest practical reason to choose the product. That may be capacity, fit, compatibility, delivery speed, guarantee or a specific use. Keep the claim accurate and connected to evidence lower on the page.

Put options and the next action where people expect them

When a product needs a size, colour, licence, quantity or configuration, show the choice near the purchase action. Label options clearly and indicate which selection is active. If a choice changes price, stock or delivery, reflect that immediately. Do not make shoppers select an option in a distant section and then search for the updated action.

Make the primary action clear: add to basket, buy, start a trial, book or request availability. Use language that describes the action rather than a vague button such as “continue”. Keep errors close to the option or field that needs attention, and explain what must be corrected.

Supporting actions can appear nearby without competing with the primary one. A wishlist, compare option, contact route or size guide may help, but too many equally strong buttons create hesitation. Give each action a clear role and visual priority.

Handle trust and uncertainty without crowding the view

Shoppers may need reassurance before acting. Near the purchase area, show only the trust information that answers immediate concerns, such as delivery timing, returns, payment security, warranty or customer support. Use concise labels or links to fuller details instead of pushing every policy into the first screen.

Make important uncertainty visible. If the item requires installation, has limited compatibility or cannot be returned in some conditions, do not hide that fact below promotional content. Clear limitations reduce unsuitable orders and make the purchase feel more honest.

Social proof can help when it is relevant and credible. A rating, review count or short customer comment may support the decision, but it should not displace product identity, price or the action. Do not add decorative badges that create noise without answering a shopper’s question.

Design for mobile and the page below the fold

The mobile first view is usually much shorter, so prioritisation matters more. Keep the product name, image, price, essential choice and action easy to find. Avoid a large promotional banner that pushes the purchase action far below the first explanation. Test scrolling, sticky actions, zooming and keyboard or screen-reader access.

The first view should invite exploration of the rest of the page. Below the fold, answer detailed buying questions with descriptions, specifications, delivery, returns, reviews, comparison information and related products. A strong top section does not replace the full product story; it gives the shopper a reason and a route to continue.

Review the layout with recordings, analytics, customer questions and usability tests where appropriate. Check whether visitors reach the action, select options correctly and find the information that support teams repeatedly provide. The best above-the-fold layout is the one that helps the right shopper decide what to do next.

Sources

• Product page UX research · Baymard Institute
• Web Accessibility Initiative · W3C

Frequently asked

What is the most important element above the fold?

There is no single element for every shop, but product identity, clear value, price, availability and the next action usually deserve early visibility.

Should the add-to-basket button always be visible immediately?

It should be easy to find after the product and essential options are understood. On mobile, test whether a sticky or repeated action helps without covering important content.

Do reviews belong above the fold?

Relevant ratings or review signals can help, but they should not displace product identity, price, options or the primary action.

How do I decide what to place at the top?

Use search intent, customer questions, product complexity, device data and the action the page must support. Test the resulting layout rather than relying only on design preference.