Product Detail Page (PDP) — eCommerce Accessibility

One of the most important and detailed pages in eCommerce website.

Hector Osborne Rodriguez
2 min readMay 15, 2021
Product Detail Page components by Yieldify

Any online buying online will tell you that it’s important to know everything there is to know about a product before purchasing it. And when you are running an eCommerce website, you want everything to be as easy as possible for your customers.

The page where you find the information of a product is called the Product Detail Page (PDP). But, what exactly is a product detail page, and what makes it effective? How can we break it into components?

The product detail page is a web page on an eCommerce website that provides information on a specific product. This information includes size, colour, price, shipping information, reviews, and other relevant information customers want to know before purchasing.

There are certain elements that must be designed in a product detail page to make it successful. Each one of these elements must be present on the PDP page, and the order and placement of these elements on the page can make differences in conversion.

I like the component breakdown created by Yieldify: The must haves, the good to have and the fancy stuff.

The must have

  1. Menu / Navigation
  2. Breadcrumbs
  3. Product Name
  4. Product Image / Image Viewer
  5. Product Price
  6. Variant Picker (colour / size)
  7. Add to Cart (Trigger Modal?)
  8. Product Details (Tab)
  9. Footer (Shipping & Returns)

The good to have

  1. Banner / Show incentive
  2. Wishlist
  3. Reviews
  4. Stock level indicator
  5. Dynamic social proof.
  6. Live chat
  7. Customer Review (Lists)
  8. Cross Sell / Up Sell (Carousel)
  9. Newsletter subscription

Going beyond

  1. 360 degree viewer
  2. Loyalty reward program
  3. Social Media carousel (instagram)

I'll start writing about these components and the unique requirements they have when in the eCommerce industry, although the majority of the advices can be applied to multiple websites.

If you have questions or comments, leave me a comment or message me at https://twitter.com/HecOsborneRod

If you want to know more about the motivation of this articles, don’t miss the first article of the series eCommerce Accessibility

Next Articles

Previous Articles

--

--

Hector Osborne Rodriguez

CPACC Certified Accessibility professional, front end development, a11y advocate, casual gamer, sleight of hand rookie.