Design · FeaturesProduct detail page · Detail page
Product detail page
A product detail page brings together one product's photos, price, options, shipping and exchange info so customers can make up their minds to buy.
It's the moment in a store when staff pick up a product and explain it point by point. Online, this page does the talking for them.
A little more detail
The page should answer the questions customers ask before buying (size, materials, delivery time, whether exchanges are possible) before they have to ask.
Detail pages made from one long image are common, but search engines and AI have a hard time reading text inside images. It's best to also write the key information as real text.
For online sales, Korean rules set out the information you must disclose for each product category (the product information disclosure notice) and the exchange and refund information you must provide.
In what order should information go on a product detail page?
Put the information customers use to decide whether to buy at the top, and the information they use to double-check further down. Customers look at the photos, price and options, and only if they're interested do they scroll down to check details like shipping and exchanges.
The usability research firm Nielsen Norman Group also stresses that customers should be able to find key information like price, options and shipping quickly on a product page. When information is scattered all over the page, customers leave a question or simply leave.
On phones, this order matters even more. Screens are narrow, so if the price, options and buy button aren't visible right below the photo, customers who like the product waste time hunting for where to buy it.
Swipe the table sideways to see more
| Position | What to include | Why |
|---|---|---|
| Very top | Main photo, product name, price, options, buy button | What customers need to decide whether to buy |
| Just below | One-line summary, three key benefits | Quickly tells them why this product |
| Middle | Detail shots, in-use photos, size and material description | Fills in what they can't see in person |
| Lower | Reviews, FAQ | Other customers' experiences ease hesitation |
| Very bottom | Product information disclosure, shipping, exchange and refund information | Covers everything you're required to disclose |
What do I need to include in the product information disclosure?
The product information disclosure follows the Korea Fair Trade Commission's Notice on the Provision of Information on Goods in Electronic Commerce, which sets required items for each product category. For example, clothing must list material, color, size, manufacturer and washing instructions, and processed foods must list ingredients, volume and use-by date.
First check which product category your products fall into, then put that category's items in a table. You can find the exact items in the original notice on the Korea Law Information Center.
You also need seller information and a notice on order withdrawal (canceling a purchase). Korea's E-Commerce Act requires sellers to display information such as business name, representative and business registration number, and as a baseline lets customers withdraw an order within 7 days of receiving the product. There are exceptions, though, so check the original text or ask an expert.
How should I shoot and choose product detail page photos?
Your photos should show what customers would check if they were holding the product in your store. That's why several photos that each do a different job are more useful than one pretty main photo.
Photos edited so the color looks different from reality are one of the most common reasons for exchanges and returns. Shoot in natural light, and for products where color matters, add a note like "Colors may look slightly different depending on your screen."
More photos are better, but they mustn't make the page heavy. Resize detail photos to fit the screen and lazy-load the ones lower down, and even lots of photos won't slow the first screen.
If shooting them yourself is hard, have a professional do at least the main photo; detail and in-use shots taken on a phone are fine. What matters is that each photo has a clear job.
- Main photo: the whole product visible at a glance on a bright background
- Detail shots: close-ups of material, finish, stitching or glaze
- Size comparison shot: alongside something that shows scale, like a hand, cup or ruler
- In-use shots: the product actually being used or worn
- What's included: what comes in the box
What are the steps to create a product detail page?
Start by collecting customer questions rather than starting with design. Once the answers are worked out, the photos and copy just have to show those answers.
If you don't know how to write the copy, you can simply turn customer questions into headings and the answers into body text. Writing "Yes, we'll gift wrap it and include a message card" under the question "Do you offer gift wrapping?" makes for an easy-to-read detail page.
Uploading photos and text separately also makes it easy to update when prices or options change later. With a single long image, changing even one letter means remaking the image.
- 01Collect about 10 questions customers often ask in store or by message.
- 02Check the required items for your product category in the product information disclosure notice.
- 03Write out answers to the questions and the required items first.
- 04Make a list of photos that show those answers, and shoot them.
- 05Lay out the photos and text in the order shown in the table above.
- 06Check that the price, options and buy button are visible on a phone without scrolling.
- 07After launch, keep adding the questions that come in to the FAQ section.
How do I help search engines and AI read my product information?
Write the key information as text, then spell it out once more with structured data. Structured data is a setting that records information like product name, price, stock and review rating on the page in a format search engines can easily read.
Google Search Central says that adding product structured data can let information like price, availability and ratings appear in search results. But Google decides whether to show it, so adding it doesn't guarantee it will appear, and the structured data must match the information actually visible on the page.
Detail pages made only of one long image are at a disadvantage here. Search engines and AI struggle to read text inside images accurately, so it's best to also keep the same information as text.
AI search also builds its answers from the text on the page when it introduces products, so writing information like material, size and how to use it in sentences makes it more likely your product will be described accurately.
What are some examples by industry, and common mistakes?
A small business has fewer products but can tell each product's story in depth. Adding industry-specific information one piece at a time, like the examples below, gives you a strength the big online malls don't have.
A common mistake is leaving shipping costs and exchange rules only in small print at the very bottom of the page. Customers who see the shipping cost for the first time right before paying often give up, so put the shipping cost near the price.
Avoid hiding option prices too. If only the base price is shown large and the total goes up with every option chosen, customers easily feel let down, so it's best to show each option's price from the start.
Ask your agency whether you can enter the disclosure items, options and shipping costs yourself on the product registration screen, and whether you can upload text and photos separately instead of one long image.
- Workshop pottery: a note that each piece is handmade so shape and color vary slightly, and whether it's dishwasher- and microwave-safe.
- Cafe drip bag set: roast date, bean origin, gift wrapping and message card options.
- Hair salon home-care products: order of use, recommendations by hair type, volume and how long it lasts.
- Online clothing: measured size chart, model's height and size worn, washing instructions.
For example
- Craft studio ring: below the photos, write out how to measure your size, the material, how long it takes to make and whether engraving is available.
- Cafe coffee beans: show origin, roast date, tasting notes and grind options in a table.
Just check these
- Price, options, delivery time and exchange rules are written as text
- The photos show the same colors as the real product
- The questions customers ask most are answered on the page
Does my business need it?
You need one if you sell or showcase products on your website.
At ISSYMO
Product sales and online payments come standard with the Online Shop · Commerce type of the Custom-Feature Website. For other types or the Landing Website, the "Product sales" option adds product listings and detail pages, plus cart and ordering. If writing the copy feels like a burden, there's also a "Copywriting" option.
See optionsFAQ
Sources
- Korea Law Information Center · Notice on the Provision of Information on Goods in Electronic Commerce
- Korea Law Information Center · Korea's E-Commerce Act (Act on the Consumer Protection in Electronic Commerce)
- Google Search Central · Introduction to Product structured data
- Nielsen Norman Group · UX guidelines for ecommerce product pages
Last updated