How to design an effective product detail page

A product detail page (PDP) is an ecommerce web page that presents everything an online shopper needs to know about a product — and it’s a key component of better conversion. Having comprehensive and user-friendly product pages can influence buying decisions no matter where your target customer is in their buying journey. In fact, according to Google Consumer Insights, over 55% of shoppers used their mobile devices to shop around for deals while they were in a shop.

Many ecommerce brands struggle to transform large volumes of product data into user-friendly and compelling ecommerce experiences, but it’s possible with a few strategic moves.

Best practices for optimising your product detail pages include:

• Use high-quality feature images
• Write a compelling product description
• Create a descriptive product title
• Use clear and prominent calls to action
• Convince the customer through social proof
• Provide accessible customer service
• Display clear return and delivering policies
• Check page loading speeds
• Provide product recommendations
• Allow for easy comparison and customisation
• Highlight discounts and promotions

Why is a product detail page so important?

Online shoppers learn about a product based on the information you provide on the PDP, making it a logical location for the majority of your sales. Since customers can’t physically interact with products online, it’s up to the product detail page to make the experience more tangible with specifics.

• Product details and images have a huge impact on buying decisions for 85% of shoppers surveyed by Google.
• Good PDPs are the primary driver of audience trust in an ecommerce environment, according to Salsify.
• Consumers are more likely to research (42%) and purchase products (35%) on a retail site than on other digital channels, according to another Salsify report.

The quality of a PDP determines whether a visitor turns into a satisfied customer or abandons their basket. Creating informative and pleasant customer experiences on your product pages is the key to increasing sales and lowering bounce rates.

Product detail page best practices

There’s no one-size-fits-all checklist for designing a perfect PDP because every niche and every audience is different. There are some proven best practices that can get you started, but always remember to split test page features like CTAs, placement and copy to find what connects best with your audience.

Use high-quality feature images

The popularity of ecommerce is growing quickly, but one shortcoming it will always have is that buyers can’t touch, hold or try on a product before purchasing. Professional product photography can help bridge the divide so customers feel comfortable buying.

Here are a few strategies to apply to product imagery.

• Photograph products from all angles. Customers should be able to see every aspect they would want to evaluate in real life. For example, if you’re selling a bag with inner compartments, include pictures of the inside.
• Photograph every colour and material. If the product comes in multiple colours or materials, take the same series of photographs in each colour. Make sure that when customers select a colour on the PDP, the images update to reflect their selection.
• Include product videos. If product images help consumers appreciate the quality of your product, product videos help them to feel more familiar with it. This added level of accessibility can have a huge impact on conversion. According to Wyzowl’s Video Marketing Statistics, 88% of consumers said they decided to purchase a product after watching a video.
• Use simple backgrounds. Photograph the product alone against a plain background to eliminate distractions and make the colours pop.
• Help buyers visualise the product in their space. In addition to isolated product images, help users see the product in action. Include photos or videos of the product being used or use an augmented reality tool to help customers visualise the item in their own space.
• Let users zoom in. Give buyers the ability to zoom in and out of your high-resolution images so they can see details like texture, stitching or wood grains.

Lovesac takes product photography a step further on its PDPs. The virtual showroom on product pages helps close the gap between online and in-store shopping experiences.

This interactive visual feature lets customers see how a product will look in their spaces by allowing them to customise the flooring and wall material. Prospects feel more confident and purchasing decisions are easier.

Write a compelling product description

The product description should succinctly describe the features and benefits of the product. Every line must serve the dual purpose of informing customers while helping them to understand how the product improves their lives.

A few ways to do this include:

• Make product descriptions comprehensive but scannable.
• Use bullet points and white space to improve readability.
• Incorporate relevant keywords to enhance SEO.
• Ensure tone and phrasing are brand-consistent and speak directly to your target audience.

Ideally, the product description answers all the common questions about your product before customers even have to ask.

Remember to focus on what’s most important to your audience. For example, Missguided’s product descriptions focus on sustainability instead of product features. The Global Sustainability Study 2021 found that sustainability is an important purchase criterion for 60% of consumers. Missguided’s product descriptions focus on mitigating waste and upcycling consumer materials because the brand knows its audience.

Create a descriptive product title

Product titles are one of the first features a customer sees on the page. The title might even be what motivates someone to click from another web page. Product titles should tell buyers exactly what your product is and make them want to learn more about it.

Product titles are usually the largest or first text on the page. As such, they should be descriptive but concise. Be clear, lead with the product’s benefits whenever possible and keep it simple. While you want prospects to be curious about your product, you never want to confuse them.

An example of a great product title comes from J Crew. Short but descriptive title copy piques the viewer’s interest with “Broken-in organic cotton oxford shirt.” It sounds comfortable and classy before the user even sees it.

Use clear and prominent calls to action

The call to action (CTA) is the most important element of any ecommerce page and must be easy to find. Effective CTAs minimise friction in the buying experience and prioritise clarity above all else.

An effective CTA includes:

• Bold, contrasting colours that stand out on the page.
• Clear copy that describes what happens when the button is clicked (like “Add to basket”).
• Strategic positioning “above the fold” so it’s impossible to miss.

A more advanced strategy is to make CTAs “sticky,” so they stay on screen even while visitors scroll down the page.

A great example of a sticky CTA can be found on Bite PDPs. The page moves product options and the “Add to basket” button to a bar at the bottom of the screen that follows the viewer as they travel down the page.

Because CTAs are so crucial to conversion, it’s a good idea to split test these strategies. Even if your CTA appears to work well, it doesn’t hurt to regularly test variables like copy and colour for a few weeks to see if click through rates (CTRs) improve.

Convince the consumer through social proof

Even if you’re confident in the quality of your product, buyers may not trust your own endorsement. People know that a product detail page is a sales tool.

However, 79% per cent of consumers told BrightLocal that they trust online reviews as much as a personal recommendation. You can put the power of social proof to work on your PDPs in a number of ways, including:

• Star rating. A simple star rating can be incredibly powerful at compelling a sale. Place them right below the product title or near the CTA to make sure consumers can’t overlook the popularity of your product.
• Testimonial and product reviews. Make sure it’s easy for past customers to leave reviews of your product. Make product reviews easy to find by keeping them close to the CTA, above the fold or by adding an anchor link to star ratings beneath the product title so buyers can jump to the reviews.
• Social media content. Shoppers and influencers frequently share product reviews and features on TikTok, Facebook, Instagram and Pinterest. Provide a hashtag or ask fans to tag your social accounts and then pull those posts into a live feed on the PDP.
• Expert approval. Expert endorsements can overcome many objections from potential buyers. It’s important to ensure your experts are certified. Always recommend that they provide a fair and unbiased review.
• 

Glossier makes great use of social proof on its PDPs with a “review highlights” section that lets customers do the selling instead of using tons of product copy. The cruelty-free cosmetic brand also displays the number of reviews instead of a star rating beneath the product title because the large number demonstrates the popularity of the product.

Provide accessible customer service

Even if you make every effort to provide information and details on the page, some customers will still have questions. If buyers can’t get their questions answered instantly, they’ll likely move on to a competitor.

Here are a few ways to help visitors get the answers or help they to need.

• Chatbots. Providing a chatbot is a great way to help lower bounce rates by making it quick and easy for customers to get in touch with you. Since they can be pre-loaded with several automated response chains, customers can potentially have their concerns resolved by the bot or get transferred to a live person for additional support. There are many plugins and tools that can put an AI-powered chatbot on just about any ecommerce product page.
• Help Desk forms. Contact forms are for those who need more space to articulate their questions or concerns. This can be a great help to smaller support teams, as it gives them a larger response window. It also offers the ability to potentially resolve the customer’s issue before contacting them again, which can make the customer experience more pleasant. Just like with chatbots, ecommerce sites can choose from many user-friendly help desk and support ticket software.
• FAQs. If you notice a recurring series of questions about a product, you can create an FAQs section that offers even faster access to answers. FAQs are most often at the bottom of the product detail page and can be continuously expanded as needed.

A great example of this best practice is the Coast New Zealand chatbot, which can detect the user's IP address and send messages based on their location. They also show visitors which customer service representatives are currently available to take questions, adding a human element that helps alleviate the frustration that sometimes comes with automated response systems.

Display clear return and delivering policies

Great return policies and free (or reasonable) delivering fees can help conversion rates because they minimise the risk to buyers and encourage them to complete a purchase.

A straightforward return policy demonstrates your confidence in the quality of your product. It also assures the customer that if the product isn’t right for them they can easily return it.

Clear delivery rates reduce friction in the ecommerce experience and provide clear expectations, so delivering details should be easy to find on your product detail page. A Barilliance report revealed that the number one reason for basket abandonment is unexpected delivery or tax prices.

Most successful PDPs clearly display:

• Delivering costs
• Warranties
• Return policies

The most effective placement for delivering and warranty information is near the CTA. You can also show more delivering and return policy details in an FAQs section at the bottom of the page or in a pop-up feature near the CTA.

Casper’s delivering information is well positioned because it’s easy to find and features a generous return policy to put potential customers at ease. Customers can hover over a question mark icon to learn more about delivering times and non-contiguous states. They get all the information they need without any of the visual clutter.

Check page loading speed

No matter how well organised your product detail page is, long load times can send visitors bouncing before they even have a chance to see it. According to an Akamai report , 40% of users will leave a website if it takes over three seconds to load.

Faster page speeds can also help your web pages perform better in search rankings, so page speed is critical. Here are a few simple steps to get you started.

• Use Google’s free PageSpeed tool. The first step is figuring out exactly what is slowing down your PDP. Google’s PageSpeed Insights tool is free and can give you specific tips on where to focus your optimisation strategies.
• Optimise images and videos. Oversized images are one of the most common causes of slow page speeds. Make sure image and video content is optimised to the appropriate resolution, size and format. This can be done manually or with plugins or image optimisation tools.
• Implement browser cache. Our browsers store a ton of data to facilitate loading webpages for returning visitors. However, these cache shops can actually slow your page down. Use a plugin or cache tool to set expiry dates for the browser cache so that your ecommerce site isn’t bogged down with excess data.
• Avoid redirects. Wherever possible, eliminate unnecessary instances of page redirection to avoid slow load times. Every time your page redirects to another page, buyers wait longer for the HTTP request-response cycle to finish, which fuels frustration and bounce rates.

Improving load speeds isn’t just for desktops. A Google Consumer Insights report showed that 59% of consumers said being able to make purchases on a mobile device affected their buying decisions. Optimising page speed makes your PDPs more mobile-friendly.

Provide product recommendations

Additional product recommendations offer a curated customer experience that can compel buyers to make additional purchases. Personalised product recommendations can appeal to the customer’s unique buying trends and display products they may not have otherwise found.

Recommendations can be anywhere on the product detail page depending on whether your goal is to encourage add-ons or upsells. A common location is the sidebar or the bottom of the page.

Here are some of the most effective strategies for recommending products.

• Similar products. Offering a more upscale version of the featured product is an effective upsell strategy. Just make sure that the upsell offer is relevant to the current product, limited to one or two additional choices and no more than 20% more expensive than the current product.
• Related products. Offering related products is one way to cross-sell. Just like upselling, make sure your offers are relevant to the product the buyer is considering. You can do this with AI-powered tools or by tagging products that provide complementary solutions.
• Customers also viewed. This is another cross-selling strategy that relies on social proof. When customers see what others with similar tastes are buying, it helps them stay immersed in current trends and feel more confident.

Poly & Bark turns product recommendation into an art form with the unique add-on experience on some PDPs. As visitors scroll down a product page, a widget offers other furniture and decor pieces to “complete the look.” Prospects can change colour themes or swap individual pieces and add the entire set to their basket with just one click.

Allow for easy comparison and customisation

If your ecommerce site sells similar products, eliminate friction in the buying experience by providing easy customisation features and side-by-side comparisons on each PDP.

• Customisation. Allow customers to quickly and easily personalise their colour, sizing and material preferences and make sure the product images update to reflect their choices.
• Comparison. If you offer a line of similar products, customers will want a simple way to figure out which one is best for them. One of the most effective ways to do this is to use a table that compares features and costs for similar products.
• 

GoPro uses a common but highly effective comparison format to help customers quickly and easily recognise the differences in similar products. The section says everything the customer needs to know by using a table layout, checkmarks, negative space and no clutter.

Highlight discounts and promotions

Letting consumers know they’re getting a great deal is an effective conversion strategy since most people like to shop around for the best price. Here are some great ways to make sure customers know you’re running a sale or promotion on your product detail page.

• Use a banner. This is a great idea if you’re offering a discount code, free delivery or a promotion that is not specific to a particular product. Put it at the top of each page where it’s impossible to overlook.
• Include the original price with the discount price. A sales price is even more effective when positioned next to the original price. Displaying this difference establishes the value of the product and the importance of buying it sooner rather than later.
• Use colour. When including the pre-sale price of an item, use a bold colour to draw attention to the price difference.
• Include a timer. If your sale is only available for a limited time, let customers know by including a timer either at the top of the product page or beside the CTA. This creates a sense of urgency to invest in the offer before it’s gone.
• 

Bookshop.org highlights discounts on product detail pages by striking out the original price and highlighting it in red. This draws the buyer’s eye to the change so they know they’re getting a deal. Further down the page, where product details are listed, the page design repeats this strategy.

Product detail page examples

It can be tough blending all of these best practices into a succinct product detail page. Audit any list of best practices, start with the strategies that will work best for your audience and split test them on a regular basis. Check out three product detail page examples that work really well to help get your inspiration flowing.

Nike

Nike optimises their product detail pages by streamlining the section above the fold. The highlighted product image is actually a video that automatically plays, showing the product in action.

Product titles and descriptions are benefit-driven and concise, while customisation options, CTAs and delivering info are easy to find without cluttering the page. Scrolling down displays personalised recommendations directly beneath the fold and a banner at the top of the page informs site visitors about current promotions.

Love Hair

As a hair care brand that values clean ingredients, Love Hair’s product detail pages use high-quality product images and videos that connect with consumers. The PDPs include sticky CTAs that make it easy for shoppers to choose a quantity and add to basket no matter where they are on the page.

Just like with Bite, this shows the customer that they are the priority. Coupled with easily accessible information, buying decisions are much easier and more engaging.

Bang & Olufsen

What sets Bang & Olufsen’s PDP apart is its product title and description section. Product titles concisely highlight the over-ear feature, while the narrative description copy ignites the imagination, highlights simple product features and communicates value to the user.

The PDP uses check marks to denote features like free delivery and gift wrapping services. And a secondary CTA lets customers find the nearest B&O retailer for those who prefer to shop in store.

Get started designing great product detail pages

Product detail pages can have a huge impact on conversion rates because they’re your best chance to persuade consumers to make a purchase. They must look amazing, provide comprehensive information and answer questions before the customer even thinks to ask.

The first step to designing effective product detail pages is using a personalised ecommerce solution that supports your unique goals. Once you have that in place, focus on thorough A/B and multivariate testing to optimise your pages for peak performance.

When you’re ready to make your B2B and B2C ecommerce more efficient and effective, Adobe Commerce provides infinite scalability that lets you manage all your channels, brands and sites from one user-friendly platform. Learn more by taking a free product tour or check out the overview video.