The short version
Put an ordinary product word and the key size in the title, open on a photo of the selected version, show the price for that version, label every option in words, make the button say what happens, add one line for the condition that could change the decision, keep pop-ups off the first screen, and move the maker story below the basics.
What buyers should see first on a product page is simpler than most themes make it look. They need to know what they're looking at, whether it's worth a closer look, and what to do if it is.
Here's a made-up brand to follow through this guide. Cleggan Bags makes waxed-canvas pannier bags for bicycles in a small workshop in Connemara. Its best seller is called "The Wanderer".
On a phone, the top of its product page showed:
- A full-width photo of a bike leaning on a stone wall at sunset
- The title: "The Wanderer"
- A line of text: "Born on the wild roads of the west"
- The price: €95
You had to scroll past two more photos to find out it's a single rear pannier, 20 litres, that it fits most rear racks, and that it's sold as one bag, not a pair.
Personality matters, and it's part of why people buy from small brands. It just works better once the visitor knows what the item is.
The first screen is a decision, not a display
Think of the top of the page as a question the visitor answers almost instantly: "Is this worth my next ten seconds?"
To answer yes, they need a handful of facts:
- What the product is, in ordinary words
- Which version they're looking at
- What it costs
- What they can do next
- The one condition that could rule it out
A visitor who understands the offer will happily scroll into your story. A visitor who can't tell what the offer is has no reason to hunt for it.
So before touching your theme, write two lists on paper: facts a new visitor must see without scrolling, and facts that can sit below.
There's no fixed screen height, so design for order instead
Phones vary. Browser bars, cookie notices, sticky headers and photo crops all take space. There's no single "fold" to design for.
Focus on the order of information instead. If the important facts come first, they'll show on most phones. If they come after a large hero photo and a tagline, they'll be hidden on many.
Put the ordinary product word in the title, next to the name you love
Keep your product names. "The Wanderer" has character, and returning customers know it.
But on its own, it could be a jacket, a tent, a boot or a bike. A stranger needs the ordinary word beside it:
"The Wanderer rear pannier bag, 20 litres"
Now the brand name and the description do different jobs. One gives personality. The other gives understanding.
Add the size, quantity or format when it changes the decision. For Cleggan, "single bag" matters, because many people buy panniers in pairs and assume the price covers two:
"The Wanderer rear pannier bag, 20 litres (single bag)"
The two-second glance test
Show the top of the page to someone for two seconds, then take the screen away. Ask: "What was that?"
Cleggan's friend, shown the old page, said: "A bike... holiday?" Shown the new title, she said: "A bike bag, 20 litres." That's the test passed.
If people answer with a mood, a place or a collection name, the ordinary word is missing or too far down.
The opening photo has one job: confirm what the words just said
Choose an opening photo that shows the selected product clearly. A bike on a wall at sunset is a lovely image. But the bag is a small dark shape in a large scene.
Cleggan moved the sunset photo further down the gallery and opened with the pannier on its own, side-on, showing its shape, its hooks and its roll-top closure. The second photo shows it fitted on a bike.
Check the photo changes when the option does
The Wanderer comes in olive, black and ochre. Some themes keep showing the default photo even after a visitor picks a different colour.
So test it:
- On a fresh visit
- After a refresh
- After changing colour
If someone picks ochre and still sees olive, they may buy the wrong colour or assume the photo is wrong. Treat the photo as part of the option picker, not decoration.
Watch how the crop behaves on narrow screens
A wide photo can become a tall crop that cuts off the hooks or the strap. A dark bag can vanish against a dark background.
Check the opening photo on the smallest phone you can find, and make sure the product is still clearly visible.
Show the price for the selected version, right beside the name
The price should sit close to the product name and options, and match the selected version.
For Cleggan, that means saying what the price covers: "€95 per bag". Without "per bag", some visitors assume it's a pair, get to the cart, see €95 for one, and feel misled even though nothing was hidden.
If the price changes with an option, the number must update when the option does. If delivery or tax varies by destination, give a short note and a link, rather than leaving it as a surprise at checkout.
Label every option in words, not just colour dots or codes
Use labels people understand: "Olive", "Black", "Ochre". Not internal codes, and not unlabelled swatches.
Text labels help people with colour-vision differences, small screens and odd lighting. Even when the difference seems obvious to you, add the word.
If there's more than one choice, order them the way a buyer decides. For panniers, that's usually "single or pair" first, then colour.
Say what's sold out instead of making it disappear
If ochre is sold out, show it as sold out with a restock note, rather than removing it. A vanishing option leaves people wondering whether they missed something, or whether the photo they saw elsewhere is wrong.
Put the one condition that could rule the product out on the first screen
Most products have one fact that decides whether they're even possible for someone. For a pannier, it's fit: does it attach to my bike?
So Cleggan added one line under the price:
"Fits most rear racks with rails 8 to 16 mm thick. Check your rack before ordering."
That line saves returns. Someone with an incompatible rack leaves early, and someone with a compatible one reads on with confidence.
For other products the condition is different: an allergen for food, a fitting type for a lightbulb, a size range for clothes, a made-to-order wait for personalised items. Whatever yours is, it belongs near the top, not three scrolls down.
Move the maker story below the buying basics, where it works harder
Cleggan's story is good. The bags are waxed by hand, the canvas is cut in a converted boathouse, and every bag is tested on the coast road before it's sold.
That story helps people care. It just helps more once they know what the product is and whether it fits their bike.
So one short line stays near the top, because it explains something useful: "Hand-waxed canvas, so the finish creases and darkens with use."
The rest moves below the buying controls. By the time a visitor reaches it, they know what the bag is and whether it suits them. The story then lands as a reason to choose Cleggan, not as an obstacle between them and the price.
What the first screen looks like for three different kinds of product
The basics stay the same. The extra fact that earns its place at the top changes with the product.
A pannier bag: the rack fit. "Fits rails 8 to 16 mm thick."
A personalised wooden sign: the making time and what you need to provide. "Made to order in 7 working days. Add your text at checkout."
A herbal tea blend: the main ingredients and any allergen information. "Peppermint, fennel and nettle. Packed in a kitchen that also handles nuts."
In each case, the extra fact is the one most likely to cause a wrong purchase. That's your guide for your own products.
Don't make the first screen do the persuading
There's a temptation to cram reviews, badges, quotes and discount banners into the top of the page.
The first screen's job is understanding, not convincing. Someone who understands the offer and likes it will scroll. Someone bombarded before they understand often won't.
Let reviews, story and extra photos sit lower, where people who are already interested go looking for reassurance. They'll mean more there, because people chose to look.
Run three quick checks on the first screen
These take about five minutes and catch most problems.
The fresh-visit check. Open the page from a link in an email or a search result, not from your shop's admin area. Does it open on the right colour and option?
The zoom check. Turn your phone's text size up a step or two, or zoom the page. Does the title wrap so far that the price drops out of view? Do the colour labels still fit?
The images-off check. If your browser lets you, load the page without images. Can you still tell what the product is from the words alone?
Make one change at a time and check again. A clean first screen isn't the emptiest one. It's the one where the important things are easy to see.
Check the first screen for every option, not just the default one
Most people check the top of the page with the default option selected, because that's what loads first.
Then a buyer picks the ochre pannier in the pair option, and the first screen tells a different story: the photo stays olive, the price still says "per bag", and the sold-out note for ochre doesn't appear until they scroll.
So go through each option in turn and look only at the first screen. For each one, check the photo, the title, the price and any condition. If any of them don't change when they should, fix that before polishing anything else.
What the first screen should leave out
It's as useful to decide what doesn't belong at the top as what does. On Cleggan's page, these all moved lower down:
- The sunset photo and the brand tagline
- Star ratings and review quotes
- A "you might also like" row
- Social media icons
- A long paragraph about the workshop
None of them is bad. They just don't help a stranger decide whether this bag is what they're looking for. Lower on the page, for someone who's already interested, they do much more.
Check the top of the page agrees with the rest of the page and the cart
After any edit, compare the first screen with the details further down and with the cart.
The same product word, the same option label, the same price basis and the same delivery note should appear throughout. If the top says "single bag" and the cart line says "pannier set", fix whichever is wrong.
A clear first screen also helps people who arrive from search
When someone clicks through from a search result, they arrive with a specific phrase in mind: "rear pannier bag 20 litre", "waterproof bike bag".
If the first thing they see confirms that phrase, they stay. If they land on a sunset and a poetic name, they often go straight back to the results to try the next shop.
So the ordinary product words that help a stranger understand your page are also the words that reassure a searcher they've landed in the right place. You don't need to stuff keywords into the title. Just describe the product plainly, the way a buyer would search for it.
Your next step this week
Open your best-selling product page on your phone. Cover the logo with your thumb.
Answer five questions without scrolling: what is it, which version, what does it cost, what do I do next, and is there anything that could rule it out for me?
If any answer is missing, fix that one thing first. Usually it's the ordinary product word in the title, or the price sitting next to the wrong option.
Then show the page to someone for two seconds and ask what it was. If they get it right, your first screen is doing its job.
Keep going
Product Pages / Practical guide
Product Page Checklist: 12 Checks to Run Before Your Page Goes Live, Starting With the Fact That Rules Buyers Out
Most product page checklists count the parts of a page. These twelve checks test whether a buyer can understand, choose and order without guessing, using one made-up dog harness to show every check finding a real problem.
Product Pages / Practical guide
Shipping Information on Product Pages: Show Preparation Time, Delivery Time and Cost Beside the Buy Button, Not at Checkout
Delivery isn't a policy buried in your footer. It's part of what you're selling. Show how long you take to prepare an order, how long the courier takes and how the charge works right beside the buy button, and keep products that ship differently from sharing one misleading line.
