Product pages that explain the thing, then step aside

Ecommerce product page design has one job before any other: make a decision possible. The first screen shows the object, the price, and the one reason this thing exists. After that, the page steps aside. Materials, care, sizing, and the longer story stay available for the person who already wants them.

A product page that opens with a brand essay is asking someone to hire you as a writer before you have shown them the thing they came to buy. Show the thing. Then talk.

Object, price, and one reason

Put the photograph of the object first. Not a lifestyle crop where it is ambiguous what is for sale. Not a collage. The object, large enough to judge, with a way to see a second angle nearby. People are deciding whether this is the item they had in mind. Help that decision before you help any other.

Put the price in the same view as that photograph. If there are honest variants, show the price of the one currently pictured, and change it when the picture changes. A "from" price is acceptable when the range is real and the jump is not a trick. Hiding the number until a later step treats the shopper like an audience instead of a buyer.

The one reason is a sentence, maybe two. It should say what the object is for, in language a stranger can repeat later. "A wool coat cut for rain and cold commutes" is a reason. "Inspired by the poetry of everyday ritual" is a mood. Mood can live further down. It does not get the first sentence if it pushes the reason below the fold.

Nielsen Norman Group's 2011 article on how long people stay on web pages is the constraint behind this order. Users often leave within 10–20 seconds, and they have time to read only about a quarter of the text. If the price sits under three paragraphs, many visitors will never see the number they needed in order to stay. Lead with the facts that make staying worthwhile. A material, a fit, or a limit you accepted belongs in that short reason when you have one. "Lined, with pockets deep enough for a phone" can be checked against the picture.

Then step aside

Once the decision is possible, the rest of the page is reference, not a second pitch. Use a short set of sections the shopper can scan:

• Details: material, dimensions, what is included.
• Fit or use: who it suits, and who should choose something else.
• Care and shipping: the practical sentences that prevent a return.
• A longer story, clearly labeled, for the person who wants it.

Order them by the questions you already hear in email. If everyone asks about sizing, sizing comes before the origin story. If almost nobody asks about the origin, the origin can be short. The inbox is a better information architect than a brand workshop that wants every page to "tell the journey."

Do not repeat the first reason in new adjectives all the way down. Repetition feels like pressure. The shopper who is convinced wants specifications. The shopper who is not convinced will not be saved by a fourth paragraph of the same claim.

Keep the add-to-cart action present while they read the details, on screens where that is possible without covering the content. On a phone, the action can sit at the end of the first screen and return after they pass the details, rather than covering the photograph the whole time. The picture is doing the selling. A bar that hides it is working against the page.

If you show another product, make it a true neighbor: the hat that goes with the coat, the refill for the bottle. One neighbor is enough.

The photograph has to arrive, and the price has to stay still

The first image is often the largest thing on the page, which makes it the thing the shopper is waiting on. Google's Core Web Vitals targets matter here in a direct way. Largest contentful paint should be within 2.5 seconds. Interaction to next paint should be within 200 milliseconds, so the control that chooses a size or adds the item responds. Cumulative layout shift should stay under 0.1, so the price and the button do not jump when the image or a banner arrives.

Give the image its width and height in the page so the layout is reserved. A price that loads first and then leaps downward feels like a trick even when it is only late CSS. Shift is a trust problem on a page where trust is the sale.

Compress for the size you actually display. A 4000-pixel file in a 800-pixel column makes the object late without making it clearer. Offer the closer view as a second image the person asks for, not as the cost of seeing anything at all.

Alt text should say what the photograph shows: the object, the angle, the color. It should not be a sentence of keywords. The caption, if you use one, can carry a fact that is hard to see, such as scale. A coin in the frame is honest. A claim of "perfect for everyone" in the caption is the essay trying to climb back into the picture.

Variants without a second essay

If the object comes in colors or sizes, the control should change the object on screen. Selecting "green" shows the green piece and the green price. Selecting a size that is gone says so next to the size, and offers the nearest honest alternative, such as a waitlist or another color that is in stock. It should not dump the shopper on an error page and call that inventory management.

Show the choice that changes what they will receive. Hide the matrix of every warehouse combination. A table of SKUs is an internal tool. The page is a counter. People should be able to point at what they want.

When a variant is a different product in all but name, give it its own page. A completely different silhouette stuffed into a dropdown is how shoppers buy the wrong thing and support pays for the mistake. The test is simple. If the reason-sentence has to change when they toggle the option, it is probably a different page.

Keep the shipping and return facts next to the decision, in one or two lines, with the full policy linked. Surprises after the click belong to checkout research. On this page, the duty is narrower: do not imply a promise the policy will break. If alterations take two weeks, the product page says so before the cart does.

A page a stranger can finish

Read the first screen with the navigation covered. You should be able to say what the object is, what it costs, and why this version exists. If you cannot, move those three up and move your favorite paragraph down. The paragraph is not lost. It is waiting for the reader who asked for it.

Then try the page on a phone, with a thumb, in a hurry. The picture, the price, and the main action should be reachable without a precision tap on a text link buried in prose. The details should open without a puzzle. If a section is collapsed, the label should name the content. "More" is not a label. "Dimensions and materials" is a label.

Ask someone outside the shop to buy a specific variant, then say what they think they bought. If they describe a different color, a subscription they did not notice, or a price they did not see, the page is still talking in the wrong places. Fix the order.

Hanabi's public shop work, including the ecommerce restructure, migration, and redesign of Down the Cove, lives with Hanabi's selected work. The useful thing to look for is whether the object leads. The story can be excellent and still belong one section lower.

How those photographs behave once several products share a grid is the neighboring problem. Photography, crop, and the product grid is the next piece if the single page is clear and the collection still looks unfinished.