The product detail page (PDP), or the page where customers read descriptions and view details about your products, is the centerpiece of a shopper’s ecommerce experience. Not only does it house all of the product information needed for a shopper to make a decision, but it is commonly becoming the new front door to your website, with shoppers landing on a PDP from external links before they ever see the homepage. With nearly every customer deciding whether they’ll make a purchase while on the PDP, it’s vitally important that the page is optimized for the best user experience possible. Let’s take a look at some best practices that you can utilize to get the most out of your PDP.
There are different types of layouts to display your product images and descriptions. It is generally advised to showcase product description categories (i.e. features, care instructions, dimensions, etc.) in a vertical layout as opposed to showcasing these categories horizontally as customers are more accustomed to scrolling down a page to view product information.
There are several different ways you can showcase your product information on a vertically designed page. For example, a layout is known as “Vertically Collapsed Sections” utilizes collapsible sections so that customers need to click on different product description categories in order to reveal the details, making sure the user has to stop and pay attention to each category. To give additional prominence to an individual section, you might choose to have it expanded by default, leaving the rest collapsed. Using “Vertically Collapsed Sections” performs well on mobile and we advise using it on both desktop and mobile for a consistent user interface.
You can also choose to have one long page, in which the product description categories are not collapsed. In this scenario, shoppers will have to continue to scroll down the page in order to find information in the category they are looking for, which might be difficult if there is a lot of information about the product.
Incorporating a sticky Table of Contents “TOC” is a highly recommended (albeit, not often implemented) feature when there is an extensive amount of product information. A sticky “TOC” shows up below the fold of the product detail page, allowing shoppers to easily click on various categories related to the product. See the Home Depot example below:
When piecing together your PDP layout, be sure to place auxiliary sections such as “customer also bought” and “other items and packages” below the product details section. Shoppers generally associate these with the bottom of the PDP, expecting the most relevant information about the product to come first. If a user comes across these auxiliary sections before anything else, they may assume they’ve hit the end of the page and become frustrated when they think there are no product details. Showcasing recommended and similar products are a great way to cross-sell additional items and increase revenue on your site. While user reviews should also be located at the bottom to match expectations, they should also be represented in summary at the top, as it’s one of the first things customers look for.
Shoppers can’t touch and feel a product through your website, so they rely on product images to inspect, evaluate, and decide if the product matches what they’re looking for.
The “Buy” section is the area of the PDP that directly relates to shoppers adding the product they are viewing to their cart. It typically includes, “add to cart” or “save” buttons, the product price, price promotions, quantity, and product variation selectors like color.
Shipping information belongs on the PDP. Knowing the total order cost, including shipping, is a critical part of a purchase decision. In a user test run by Baymard Institute, 64% of users looked for shipping costs at the product page when trying to decide to buy and 24% abandoned orders because they “weren’t able to see the total order cost upfront before initiating checkout.”
It can be tricky to optimize a PDP for the best user experience. It’s a unique page as the layout, design, and features are all crafted to be a single template that needs to best represent both your best-selling products, as well as your least-popular, out-of-season, clearance items equally. Depending on the kind of product, some PDPs will rely more heavily on their image galleries, others on the product details. I hope these best practice suggestions can offer some guidance in how to deliver the best user experience to your customers.