product detail page design example ux

16 Product Detail Page Design Best Practices (with Examples)

Are your visitors getting stuck when they get to your products? Utilize these 16 actionable tactics to build product detail pages that convert.

An ecommerce product detail page design can often make or break a sale.

Remember the last time you were shopping online? Did the product have a video? Did you look at the reviews? Or did you end up leaving for some reason? What made you leave?

Every point along the customer’s journey from research to purchase is important. There is one place, though, where the customer is called upon to make a choice of exceptional consequence.

That special spot is your product detail page. It’s there that the potential customer will determine whether to purchase your product or keep looking.

That means your product detail page design must do three things well:

  • It must give detailed, benefit-focused information about the product in question,
  • It must offer an easy and obvious way for buyers to take the next step towards ownership
  • It should provide a way for shoppers to be presented with alternative suggestions.

Numerous components enable the product detail page to do its job. Some of these elements are primarily the concern of creatives, others will need help from IT, and some of the content will come from management. Our aim here is to provide a checklist you can use in either the creation of a new product detail page or as an inspection sheet to make sure your current product detail pages are complete.

We mention SEO factors here, but there are numerous search engine tactics we don’t address. SEO can help attract potential customers to your website. Conversion rate optimization (CRO) is concerned with turning those visits into sales.

Let’s look at how the product detail page can help you better serve those potential customers by providing the information they need to make an informed decision. We chose to break the product detail page elements into three core-categories: creative, technical, managerial.

  1. Creative Concerns
  2. Technical Concerns
  3. Managerial Decisions

Elements of a Product Detail Page – Creative Concerns

1. Product Name

When it comes to product naming conventions, the more descriptive, the better. That’s because each word is a potential keyword for organic search. Google favors product pages that have descriptive titles because it allows users to find exactly what they’re looking for. Long names also implicitly indicate more value and stand a better chance of attracting the visitor’s attention. 

J Crew uses highly detailed naming conventions (see example below) for their product detail pages to highlight the style and features of the product. 

J Crew uses detailed naming conventions on their product detail pages

2. Product Description

Great copywriting begins with an understanding of the audience – their needs, their desires, their problems, and the words they use to describe them.

The copy should be presented in a scannable, jargon-free format, with benefits highlighted to spell out exactly what the product will do for the potential customer. Utilize white space to help keep your product page layout clean and easily readable.

The product description should provide critical product information, it should short-circuit objections, and provide answers to the visitor’s most pressing questions.

Glossier writes great product descriptions, using common language and provides a detailed explanation of the product without sounding too wordy. Another thing to note is their use of symbols to convey product features (see example below). 

Futuredew product detail page with icons

3. Call-to-Action

Once you’ve provided key benefits, squarely faced objections, and provided answers to the prospect’s questions, you’ve earned the right to present the call to action. This can be as simple as an “Add to Cart” button.

Once the prospect is convinced that your product is the perfect solution, all you need to do is provide a path to purchase.

Make the call to action (CTA) prominent, clear, and easy to perform. The checkout process should be seamless and smooth, with minimum friction.

4. Product Images

This is where your writers and designers join forces. High-quality images or illustrations lend credence to the copywriter’s product description.

Show people wearing and using your products to give the prospect a glimpse of ownership.

Your headlines and product images should work together to establish the product’s value and illustrate why the prospect would be wise to select it.

Inkbox has a clever way of showing off their products by featuring photos posted to social media by their previous customers (see example below). This a creative way to show off your products and helps promote your products by encouraging new customers to also share their purchases on social media.

Inkbox shows social images from customers on their website

5. Product Videos

The practice of including video elements in the digital assets strategy has risen so dramatically that many ecommerce sites now consider videos essential. Some say videos can push conversions by 85% or more.

Does your product draw objections for being difficult to use? Video can disprove that preconception by demonstrating that the owner only needs to follow a few simple directions.

Do customers want to know more about the difference between certain features? Video can describe those differences quickly and accurately.

Graphic elements should join forces with the copy to perform the basic tasks: Highlight benefits, deflate objections, and answer the most frequently asked questions.

Enjoying this article?

Subscribe to our newsletter to get more just like it, sent straight to your inbox every week.

Elements of a Product Detail Page – Technical Concerns

6. Social Proof

People trust their peers more than they trust advertisers and marketers.

An often heard statistic is that user generated product reviews carry twelve times the punch of the manufacturer’s claims. Remember, though, to make sure the social proof supports your message and speaks to your audience.

Types of social proof include expert or celebrity recommendations, user reviews, testimonials, and social media buzz. Your customers want to know they’re making the right choice. Almost every online store has some form of social proof. Why? Because it helps provide a higher level of assurance.

It will be up to technicians to embed social proof, but the creatives should be involved in the selection of messages to be shown and in the decision about where to place social proof on the page.

Kopari Cosmetics has a great approach to highlighting the excellent reviews their customers have left (see example below). They show you the average rating of the product, and how many reviews were posted. 

Kopari cosmetics highlights reviews on their website

7. Product Recommendations and Comparisons 

It may be that the product being viewed is not the best selection for the prospect. By providing related products and giving the visitor the option of comparing product features/benefits, you can often maintain the attention of a prospect who may otherwise have gone elsewhere.

This is an area where savvy ecommerce teams can also leverage historical data to provide personalized recommendations.

GoPro uses a comparison chart (see chart below) to highlight the product variants of each camera. The product detail page can be a great place to include complimentary items from your product catalog as well.

Go Pro creates a comparison of different cameras on their product detail page

8. Add To Wish List 

The visitor may not be ready to buy now. This function provides the ability to add the product to a wishlist or “save it” for later consideration. Consumers tend to use their digital cart as a method of holding items for later purchase, so giving them the option to save an item to a personal wish list is a great way to reduce cart abandonment and improve retargeting efforts.

Wish lists can be especially helpful for prospects purchasing via mobile. Their selections are saved and ready to place in the shopping cart. 

Wish list data can also be used in your analytics work for things like surveying product demand, linking product affinity to buyer types, or providing personalized offers via email or onsite recommendations. 

Williams Sonoma provides a simple way for customers to add items to their wish list, with a small icon that immediately saves it for later viewing, even if you haven’t created an account with them.

Williams Sonoma product detail page allows customers to add an item to their wishlist

9. Customer Service

When you’re shopping in a local department store, it’s frustrating to need help and not be able to find a store employee to help.

The same thing happens online. Customer service should not be intrusive, but it should be readily available.

Options include phone-in support, email support, and live chat support. Each comes with its own technical challenges. All options should be prominent on the page.

Customer service can save a sale, retain a customer, and reassure prospects that you’re looking out for them. 

Chatbots (see examples below) are becoming a great way for companies to provide their customers with quality service without having to pay for a large team of representatives. 

Customer service chatbots

10. Image Alternatives

The primary product image is normally a hero shot, but other views can be helpful. Thumbnail images that can be enlarged give the prospect a store’s-eye view of the product.

Every bit of help you can add here increases the potential for a sale. Shots that show ingredients or components, color choice swatches, and other information help answer the customer’s questions and remove doubt.

Some ecommerce sites invite customers to share their own photographs. These aren’t normally professional quality, but shoppers tend to see them as trustworthy recommendations and social proof of desirability.

11. Product Associations

The strategic plan may call for cross-sell and upsell efforts.

Marketing will decide which items to propose. Developers will determine how to make it happen.

With the line between sales, marketing, and IT departments becoming increasingly narrow, it’s essential that those teams figure out how to work together efficiently for the good of the company.

12. Other Icons and Functions

The path from first meeting to first sale passes through, and is affected by, many seemingly small functions and features. None are insignificant, though. Little things can fuel a big order.

Auxiliary concerns include the following:

  • Add to cart confirmation – assures the customer the order was placed
  • Size charts and product choice selections – these should be accurate and simple
  • Currency and language conversions – depends on where you sell and to whom
  • Order by phone option – this can capture orders that would otherwise fail
  • Social sharing icons – can be detrimental and distract the prospect
  • Stock status – lets the customer know the item is in stock (or not)
  • Breadcrumb navigation – helps the customer shop by providing a trail
  • Store locator – some prospects will start online, but want to finish offline

Elements of a Product Detail Page – Managerial Decisions

Some of the information on the product detail page must be developed by management, then passed on to the creative team for styling considerations, and finally to the IT team for implementation.

Consider the following:

13. Return Policy

The better you back your products, the more of them you’re likely to sell. 

Companies that sell quality goods stand little to lose by offering liberal returns. If your return policy is strong, brag about it. This is one more place to bolster the prospect’s assurance that the absolute right choice is to buy from you. 

Casper is known for their generous return policy. Every customer gets a 100 night trial of their mattress, and if for some reason they’re unsatisfied, they will pick the mattress up for you free of charge. It’s a pretty strong guarantee, and the fact that they’ll come to your home to pick up the product is even more of a value add for the customer.

Mattress trial from Casper

14. Guarantees and Warranties 

Similar to return policy, if you back your products with a strong guarantee, then bring it up and brag about it. Don’t hide it in fine print at the bottom of the page. 

Online shoppers like to feel that buying from you is as safe and convenient as driving to the nearest retail outlet and getting what they need there. 

In a way, ecommerce has the advantage. Consumers will know they don’t have to stand in line and face an angry returns clerk to send something back to you. 

15. Shipping Details 

The best shipping for ecommerce is always “free and fast.” 

Of course, you must balance delivered price against your cost, so free shipping isn’t always feasible. Whatever you decide here, be upfront with it. Surprising customers with a low display price, then making it up with an oversized shipping and handling fee is a great way to lose business and get poor reviews. 

The main thing is that you are reasonable and provide options. Online shoppers also like to know the expected date of delivery. 

A huge plus is the ability to receive tracking notifications via text or email. That can reassure the shopper the order is underway. 

16. The Price

Pricing is an integral part of marketing. Ecommerce gives you the ability to easily adjust prices, then observe the real-time effect on consumer behavior and the impact on sales.

You can run promotions, offer discounts, use e-coupons, and pull all the tricks from your marketing bag.

Product detail page for Nikon camera

Experiment with different ways of highlighting discounts on your product detail pages. B&H Photo has a great approach to highlighting sales by displaying how much you save on the product, as well as emphasizing the limited supply that’s being sold at the reduced price.

Best Practices for the Ecommerce Product Detail Page

How elaborate should your product detail pages be? They should provide sufficient information: not too much and not too little. Some PDP functions are essential. Others are optional and may even hinder the sale, depending on your niche, your capabilities, and your policies. 

That’s where A/B testing comes into the picture. You don’t really know what’s best for your website and your prospects until testing provides field-generated data. We normally don’t recommend using social share icons on the PDP, for instance. Testing, though, may prove otherwise for you and your particular audience.

Theory provides the starting point. Testing proves or disproves the theory.

If you incorporate all these elements, it’s going to be tough to leave room for white space. That’s where the creative use of interactive tabs and drop-downs is invaluable.

Give your visitors adequate information. Highlight the product’s benefits, anticipate objections, and provide answers to frequently asked questions. Lead the prospect along the sales path.

If it turns out that another product is more suitable, walk prospects to it and emphasize/compare the benefits of that product.

Treat your prospects the way you want to be treated when you shop, and they will reward you for your efforts.

If you’re struggling with high cart abandonment or a low conversion rate, it may be time for you to consider investing in a conversion optimization program. If you want to learn more about what conversion optimization could mean for your site, sign-up for a free landing page assessment where we’ll take a close look at your site and determine areas that could benefit from improvement.

Want a free landing page teardown?

We’ll provide a data-driven critique of the usability and effectiveness of your site free of charge.

About the Author

Jon MacDonald

Jon MacDonald is founder and President of The Good, a conversion rate optimization firm that has achieved results for some of the largest online brands including Adobe, Nike, Xerox, Verizon, Intel and more. Jon regularly contributes content on conversion optimization to publications like Entrepreneur and Inc. He knows how to get visitors to take action.