How to build a product page that converts
A product page converts when it answers a buyer’s questions before they think to ask them. This guide covers the gallery, the buying details, the phone layout and the technical basics, in the order they matter.
By Dan BartleyUpdated 5 minute read
Key takeaways
- Most buying questions are answered by images, so plan the gallery around them.
- Order the frames the way buyers decide: hero, scale, detail, in use, motion, then the clean shot.
- Keep the price, options, delivery and returns beside the add to cart.
- Design the page on a phone first, with the add to cart always in reach.
- Make it fast and readable: AVIF or WebP images, alt text and Product structured data.
Start with the questions buyers ask
Before choosing a layout, list what a buyer needs to know before they pay. Will it suit my space, how big is it, what is it made of, how does it look in use, and what happens if it is wrong? Most of those questions are answered by images.
| The buyer asks | What answers it | Where it goes |
|---|---|---|
| Will it suit my home or my style? | A room or lifestyle scene | The first or second image |
| How big is it, really? | A frame with something of a known size beside it | In the first three images |
| What is it made of? | A close-up of the material or finish | The gallery and the details |
| How does it look in use? | A frame of it being used, or a short film | The gallery |
| What if it is not right? | Delivery and returns in one line each | Beside the add to cart |
Baymard Institute’s product page research found that 56% of shoppers go straight to the product images before they read a word of the page, and 42% try to judge how big a product is from the images alone. For most buyers, the gallery is the page.
Order the gallery the way buyers decide
Lead with the frame that sells the outcome, then answer the next doubt with each image. Scale comes next, then detail, then use, with the plain product shot last for anyone comparing options.
- The hero. The product where it belongs, lit to look its best. It is the frame in ads and on collection pages too.
- Scale. The product beside something everyone knows the size of.
- Detail. The material, stitching, weave or finish, close enough to feel.
- In use. Hands, a body or a room, showing how it is actually used.
- Motion. A short film where movement matters, such as fabric, fit or a mechanism.
- The clean shot. The product on a plain background, for comparison and marketplaces.
More on choosing it: what should the first product image be?
Put the buying details beside the add to cart
Price, options, delivery, returns and stock belong next to the add to cart button, where the decision happens. Every detail a buyer has to hunt for is a reason to leave the page.
- The price, with any sale shown honestly
- Options as clear choices, with the image changing to match
- Delivery cost and timing in one line
- Returns in one line, with a link to the full policy
- Stock levels, only when they are real
Answer doubts where they come up
Answer each question at the point a buyer wonders it: size beside the size options, care beside the material, and reviews beside the claims they support.
- Size guides next to the size selector, with the product shown at that size where you can
- Materials and care in short lines, with the long version behind a disclosure row
- Real customer reviews near the top, and photo reviews where you have them
- A short answer to each common question, in the words customers use
On reviews: do you need photo reviews and customer photos on product pages?
Design for a phone first
Buyers from social ads arrive on a phone, so design the page there first. They need a gallery they can swipe, text they can read without zooming, and an add to cart button that stays in reach of a thumb.
- A swipeable gallery that fills the width of the screen
- The product name, price and add to cart visible without scrolling
- An add to cart bar that stays on screen as the buyer scrolls
- Tap targets big enough for a thumb, and text at a readable size
Make the page fast, and readable by search engines and AI
A product page should load quickly on mobile data and keep its text in the HTML, so Google, Google Shopping and AI answers can read it. Large images are the most common reason a product page is slow.
- Serve images as AVIF or WebP, sized for the screen they appear on
- Give every image alt text that describes what it shows
- Add Product structured data: name, images, price, availability and real review ratings
- Write the description as text on the page, never inside an image
More on speed: do large image files slow a store down?
Change one thing at a time, and measure add to carts
Judge the page by its add to cart rate and its conversion rate. Change one part at a time and give each change enough visits to show a real difference, starting with the gallery, because the images are what buyers look at first.
Questions people ask about this
How many images should a product page have?
Enough to answer every question a buyer has. That usually means a hero, a scale frame, a detail, an in-use frame and a clean shot, plus a short film where movement matters. Bartley Studio plans each gallery around those questions rather than a fixed number.
What should the first product image be?
The first image should show the product where it belongs, looking its best, because buyers see the same frame on the collection page and in ads. A plain white shot works better further down, for comparison.
Read the full answerDo product videos help a product page convert?
A short product film helps when movement answers a question a photo cannot, such as how a fabric drapes, how clothing fits or how a mechanism works. Bartley Studio places the film in the gallery where that question comes up.
Should product pages show customer reviews?
Yes. Real reviews near the top of the page, and photo reviews where you have them, answer the doubts a brand cannot answer about itself. Reviews should always be the customer’s own words.
Still have a question? Ask us
