How to design an effective product detail page

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:

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.

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.

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.

Lovesace product detail page

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:

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.

JCrew product detail page

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:

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

Bite product detail 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:

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.

Natural Textiles product detail page

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:

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.

Element product detail page

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.

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.

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.

Poly & Bark product detail page

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.

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.

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.

Nike product detail page

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.

Love Hair product detail 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.

Bang & Olufsen product detail page

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.