Product Details Page (PDP) – What it is and how to improve the design

What is a Product Details Page (PDP)?

A Product Details Page, also referred to as a PDP, is the page that provides in-depth details about a specific product.

Typically these pages include:

• Breadcrumb: This shows the shopper the path they’ve taken to arrive at the product page or what category/sub-categories the product appears against. E.g. Home > Womens > Dresses > Maxi Dresses.

• Product Title: This should be the H1 of a page and should help the shopper know immediately what they’re viewing.

• Description: Often eCommerce sites have both a short and long product description. Typically the short description sits alongside the image/video gallery whilst the long description sits further down the page. The description should accurately describe the product, its features, its benefits whilst also providing useful links to further content. Along with the Product Title, this is a vital part of SEO (search engine optimization) so ensuring relevant keywords and internal links are included will be key to ranking success.

• Product images and videos: Product images and videos should be incorporated into the gallery, providing the user with different angles of the products and close-ups of specific details. Some retailers and brands also use the gallery as an opportunity to incorporate a customer review. Make sure to add alt text to your images as this will also help with SEO.

• Attributes: Adding Global Attributes such as size, color etc to your products helps the shopper choose the right variations for them in addition to supporting product filtering on the Product Listings Pages. The attribute data is also used by Search Engines to provide additional information to searchers.

• Price, Promotion and Availability: Price is of course a key component on the PDP and any offers tend to sit directly alongside this, encouraging shoppers to purchase. Availability is often included in-line to avoid shopper frustration further into the Buying Journey

• Call-to-Action (CTA): Typically CTAs will include ‘buy now’, ‘save for later’, ‘add to wishlist’ but as we’ll see in the examples below, can also include ‘buy sample’, ‘order a brochure’, ‘visit the store’ and ‘click and collect’.

• Social Proof: Introducing social proof into the PDP has been statistically and scientifically proven to deliver higher Conversion Rates and a higher Average Order Value (AOV). Social Proof can come in many forms including scarcity messages, urgency messages and trending messages to name a few.

• Cross-Selling and Up-Selling: This can come in many forms including: bundles, ‘also bought with’, ‘customers also bought and ‘frequently bought together’. These strategies can not only help to reduce shoppers leaving your site but can also substantially increase your Average Order Value metric.

• Policies: Returns policies and privacy policies are commonly included on the PDP.

• Shipping information: 48% shoppers cite extra costs as being a key reason for online cart abandonment rates according to research by the Baymard Institute.

A Product Details Page should tell the shopper everything they need to know in order to make an informed purchasing decision.

Why is a Product Details Page so important?

The Product Detail Page is a vital part of any eCommerce strategy as it is the page that leads directly to a sale. Knowing what information a shopper wants and presenting it in an intuitive manner is the key to the success of a PDP. The Product Detail Page design is often undergoing continual A/B testing as part of a wider Conversion Rate Optimization strategy.

Balancing the amount of product information that’s included with how it is structured is the key to delivering an optimal shopper experience.

Product Details Page Design Examples

We have compiled 5 Product Page Design examples, the strategies they’ve adopted and why these work:

Very key highlights:

1. Reviews sit above price: This immediately provides shoppers with aggregated shopper feedback at a glance

2. Flexible payment options and Shipping details come before size selection: Very has recognised the importance of these two factors in the decision making process for their audience and pulled them higher up the information hierarchy on the page

3. Sizing Guide: By providing an easy to access sizing guide, this simultaneously helps shoppers make informed purchasing decisions whilst also reducing returns (one of the major challenges for eCommerce brands)

4. Social Proof Messages: This is another vital form of social proof that helps shoppers make informed purchasing decisions based on the real-time behaviors of others. In this example, Very is using ‘popularity’ and ‘trending’ messages

5. Save for later: Whilst ‘save for later’ could be an indicator that a shopper will be comparing products from other brands, it is also a behavior common with shoppers who want to complete the purchase on a different device or at a different time (e.g. payday, when home from work)

6. Detailed Product Description: A detailed product description not only helps the shopper find the information they need but it also helps search engines understand more about the product in order to rank it on Search Engine Results Pages (SERPs)

7. Up-Sell and Cross-Sell: Very uses a range of ‘people also like’ and ‘people also bought’ galleries to help users find alternative or additional products to purchase

8. Detailed product reviews broken down by Quality, Value & Fit: Retailers and brands are increasingly asking their customers for feedback against a set list of criteria (e.g. fit, quality). This not only helps other shoppers make informed purchases but these also serve the Brand by providing detailed customer feedback for future product development

ao.com key highlights:

1. Coupon: A targeted offer is included in prime position above the product itself in order to reduce the risk of consumer comparison shopping on competitor sites

2. Availability integrated in line with product price:  By sharing this information in a prominent position, it saves disappointment and frustration further into the Buying Journey

3. Product Data Sheets and energy ratings included immediately underneath price: With increased consumer focus on their environmental impact and energy consumption, having this information higher up the information hierarchy is key

4. Delivery estimate provided: Clearly setting customer expectations by providing an estimated delivery date improves the overall Customer Experience

5. Finance Options: As with Very, AO.com provides alternative payment options, therefore increasing their potential audience base

6. Videos integrated into product descriptions: Instead of solely relying on videos in the gallery, they have integrated these into the product description which not only helps to improve the Customer Experience but also helps with SEO (Search Engine Optimization)

7. Social Proof: In addition to reviews, AO.com also integrate social proof messaging into their image gallery, highlighting real-time viewer figures

Wickes key highlights:

1. Offer Prominence: The offer is repeated for maximum impact and the use of red helps drives urgency.

2. Advice and Inspiration link: Providing additional advice and inspiration will help the shopper make a more informed decision but what is particularly interesting here is that instead of opening this in the same window, they’ve opened it in a new tab so that they allow the shopper to easily complete the purchase once they’ve browsed the ideas section of the site.

3. Alternative Call To Actions: Wickes not only provide the shopper with a delivery or ‘click and collect’ option, but also provide them the option of ordering a sample, perfectly mirroring the behavior of shoppers in their physical stores.

4. Frequently Bought Together: A great example of cross-selling in action is used directly underneath the main product.

5. Social Proof: As seen with AO.com, Wickes also integrate social proof messaging with real-time viewer figures.

Tui key highlights:

1. Coupon: As seen with ao.com, TUI has added a fixed coupon offer at the top of the page

2. Social Proof: Two types of social proof messages are integrated into the PDP with both statistics of how many have viewed the item and how many have booked. Tripadvisor reviews sit directly alongside this making it easy for shoppers to evaluate the location against key decision making criteria

3. Things you’ll love: TUI has picked out key features of the destination, helping shoppers quickly scan the page

Victorian Plumbing key highlights:

1. Offer Countdown: The offer countdown in combination with the red color helps drive urgency.

2. Delivery specificity: A countdown for a delivery on a specific day similarly drives a sense of urgency.

3. View in room: A great use of Augmented Reality to help shoppers visualize how the product will look in their room.

4. Lead Generation: Just below the cross-sell blocks are alternative options for the shopper including the option to ‘order a free catalogue’ and ‘visit the showroom’. This recognizes that for higher value items, shoppers may not be comfortable buying online without further touchpoints. The former also offers a lead generating opportunity for Victorian Plumbing, allowing for future follow up (by email or phone).

5. Social Proof: Victorian Plumbing use granular real-time viewing figures, amongst other social proof messages, aligned to their brand colours and accompanied with relevant icons.