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.
1) Use a Vertical Layout When Planning 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.
It is generally advised to layout product information vertically, as shoppers are accustomed to scrolling down a page to find information:
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:
On the Home Depot PDP, a sticky “TOC” shows up as the user scrolls past the product information section of the page:
2) Keep add-on information below the product details
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.
Adding in user-generated content is another great add-on to the product detail page to engage shoppers with your brand and help potential buyers visualize the product in their home:
3) Images on the PDP are key
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.
When implementing an image gallery, you should keep the following in mind:
- Have at least 3-5 product images for every product on your site.
- Thumbnails can be placed either below or to the side of the main image.
- Provide a lifestyle image to inspire users and get them excited about the potential of owning the product.
- The default image should highlight a product’s unique features.
- Use high-resolution images, as low res may leave users unable to see crucial product details when zoomed or enlarged.
- Consider using hover-based zoom as it’s easier to control than click-based.
4) Make it easy for shoppers to add products to their cart
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.
When considering the “Buy” section, you should:
- Ensure the primary “add to cart” button’s styling is unique and prominent compared to all other options.
- Allow users to purchase “out of stock” items by increasing the delivery time to reduce the chances of them going to a competitor for the same item.
- Display “prices per unit” for products sold in varying quantities to help users evaluate their purchases.
- Display product variations in swatches as opposed to dropdowns, as swatches are laid out before the user, and selections within the dropdown have a higher chance of being overlooked.
5) Be sure to incorporate critical shipping information
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.”
When providing shipping information on the PDP, you should:
- Provide an accurate lowest shipping cost on the product page.
- Avoid sneaky/underhanded displays of “free shipping” as users will feel misled if the cost of shipping is different from what they inferred.
- Place “free shipping” information in the “buy” section of the PDP.
- Use “delivery date” instead of or along with “delivery speed,” which will save users from having to estimate when they should expect their product.
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.
