What belongs above the fold on a Shopify product page?

Above the fold on a Shopify product page, a shopper should see four things before they scroll: a headline that repeats the promise of the ad they clicked, the offer, the proof and the core benefits. Everything else, from the full ingredient list to the brand story and the FAQ, can sit further down the page, where people go looking once the top has earned the scroll.

What does above the fold mean on a product page?

The fold is the bottom edge of the first screen: the part of the page a shopper sees before they scroll. On a laptop that is a wide, short window. On a phone it is a narrow column that often ends around the product title or the first benefit, depending on how tall your header and gallery are.

So design the first screen for the device your paid traffic actually uses. Open your analytics, split sessions by device for the campaigns that send people to the page, and design for whichever device carries most of them. Then check the same page on the other one.

The fold is not a wall. People do scroll, but only if the first screen gives them a reason to: this is the thing I clicked on, it is worth having, and people like me have bought it.

What are the four things that belong above the fold?

We build every product page around the same four jobs for the first screen. They are not a template, because the words change for every brand and every audience, but the jobs do not.

1. The promise from the ad

The headline, or the line under the product name, should say what the ad said, in the same words where you can. If the ad sold an outcome, the top of the page should repeat that outcome, not fall back to the product's category name. The shopper should know in a second that they are in the right place.

2. The offer

What they get, at what price, and why now. A bundle, a subscription saving, a free gift or a guarantee all count, but only if they are visible without opening a drawer or a dropdown. An offer that only appears in the cart is an offer most shoppers never see.

3. The proof

A star rating with the review count, and ideally one short line from a real customer that answers the main doubt. Proof works best right next to the claim it supports, so put the rating under the title or the gallery, not in a section six screens down.

4. The core benefits

Two to four short outcomes in the shopper's language: the problem it solves rather than the feature that solves it. Ingredients, materials and specs are reasons to believe the benefit. They come later.

Use this as a quick check on your own first screen:

• The headline repeats the promise of the ad that sent the traffic.
• The offer is visible without tapping anything.
• The price is on the first screen, or one tap away at most.
• A star rating and the review count sit near the title or the gallery.
• Two to four benefits are written as outcomes, not features.
• The quantity picker or the add to cart button starts on the first screen, or just below it.
• Nothing on the first screen is there only because the theme put it there.

How should the top of the page match the ad?

Every ad makes a promise, and the page it lands on either keeps that promise or breaks it in the first second. When the ad and the top of the page say different things, the shopper has to work out whether they are in the right place, and plenty of them do not bother.

The fix is to treat each ad angle as its own way in. Every persona arrives for a different reason and knows a different amount about you, so each one gets the page type built for that job. In practice that might mean a few versions of the same product page with different first screens, or one product page plus an advertorial or a listicle for colder traffic that needs more convincing before it sees a price.

It does not mean rebuilding the whole page for every ad. Usually only the first screen changes: the headline, the hero image, the order of the benefits and the review at the top.

This is also why we stay close to a brand's creative strategy even though we do not run paid media. Whoever runs the ads tells us which angles are getting clicks, and we make sure the page behind each one says the same thing.

What can go below the fold?

Almost everything else. Below the fold is where shoppers who are already interested go to check the details before they buy. This is how we usually split a product page:

The rule of thumb: if a shopper needs it to decide whether to keep reading, it goes up top. If they need it to decide whether to buy once they are reading, it can go lower.

What are the most common mistakes above the fold?

Most of the first screens we audit fail in one of a handful of ways:

1. A mood, not a product. A lifestyle image and a slogan, with no product, price or offer in sight.
2. Hidden proof. The rating tucked into a tab or left at the very bottom of the page.
3. Features instead of benefits. The shopper has to work out for themselves what they actually get.
4. A secret offer. The bundle or the saving only appears in the cart or in a pop up.
5. One top for every ad. Every angle lands on the same generic headline, so none of them feels answered.
6. A heavy first screen. Apps and page builder code slow down the very part of the page that has to load first.

What happened when Hound Nutrition did this?

Hound Nutrition is a Shopify brand we rebuilt a product page for. In the words of the published case study: “We rebuilt the product page from the foundation, connecting the journey between traffic source and PDP, so the offer, proof and benefits became the focus above the fold.” The published results:

Source: Hound Nutrition case study. The lines in the panels are illustrative, not plotted data.

Look at the first screen of that page and you can see the four jobs at work: the bundle offer in a bar across the very top, short trust badges beside the product image, the star rating and review count under the gallery, the product name with a one line promise, and benefits written as the problems the product solves.

The case study also notes that a deep dive into the audience found evidence to back up the design methodology. That is the step most rebuilds skip.

How do you test changes above the fold?

Change one job at a time. If you change the headline, the offer and the gallery in one go and the numbers move, you will not know which change did it.

A sensible order for a first round of tests:

1. The offer framing. How the bundle or the subscription is presented on the first screen.
2. The headline against the ad. The product's own headline against one that repeats the ad's promise.
3. Where the proof sits. The rating under the title against the rating under the gallery, with one review beside it.
4. How the benefits are written. Outcomes against features.

Judge each test on revenue per visitor as well as conversion rate. A change that turns more visitors into smaller orders can lower revenue per visitor, and a stronger bundle offer can lift it even when conversion rate barely moves.

Not every page wins on its first test, and that is fine. Ours have a 100% win rate; what varies is how long it takes. A third win outright on the first test, just over a third within 30 days, and in rare cases some take a few more weeks. What matters is what each test is built on. If it comes from data and from what you can actually see your customers doing, every result tells you what to change next.

What else do people ask?

• Should the price be visible above the fold?

  Yes, in most cases. A shopper who clicked an ad wants to know what it costs before they give the page any more attention, and a hidden price reads as a reason to worry. If you sell bundles or a subscription, show the price of the option you most want them to choose, right next to the offer.

• How many reviews should a product page show near the top?

  One rating and one review is usually enough above the fold: the star rating with the total review count, and a single short review that answers the most common doubt. Keep the full review section further down, where shoppers who want more proof go looking for it.

• Does the top of the page need to change for each ad?

  It needs to match each ad angle, which is not the same as one page per ad. Group your ads by the promise they make and give each promise a first screen that repeats it. Every persona arrives for a different reason and knows a different amount about you, so each one gets the page type built for that job.

• Should I build the first screen with a page builder?

  We would not. Page builders are quick to put up and expensive to live with: they add weight, they fight your theme, and they leave you renting the page your paid traffic lands on. We hand code product pages in custom Liquid in your theme and build around the apps you already run.