What are Product Detail Pages? (PDPs)

A product detail page (PDP) is any web page on an eCommerce online shop that provides a detailed description of a specific product or category. The product details are not only important for customers to understand what they are purchasing but also for categorizing and sorting data for enhanced eCommerce features. Designing eCommerce PDPs that contain meta information is effective at helping users locate important data and improve conversions. It also lays the foundation for technical features such as filtered views or Guided Navigation (Faceted Search)

Product Detail Page Design

The filters considered in the design process are one of the most important factors for organizing eCommerce pages and are great points to ask when hiring an outside agency or consultant.

How can we optimize PDPs for Faceted Search on eCommerce?

  • Identifying high-level search intent, and organic keyword terms, and addressing each with the appropriate user experience (informational, transactional, commercial & navigational)
  • Product Inventory information, Estimates on Shipping, Delivery
  • Include Color, Size, Material & Type of Product
  • Include Price, Brand, Discount & Sale Opportunities
  • Create fewer options for forms to improve engagement rates

The product details page also offers opportunities to include personalized product recommendations. A great example of this strategy at work can be illustrated by Amazon and their “related products” suggestions that are activated after browsing different categories or items.

What are some components of the Product Detail Page (PDP)?

  • Breadcrumbs
  • Product Images
  • Add to Wishlist / Cart Option
  • The Menu Button
  • The Search Bar
  • The Cart Button
  • Unique Product Name
  • Unique Product Description
  • Price & Product Availability
  • Buy Button
  • Size/Color
  • Quantity to Purchase
  • Delivery Timeframe
  • Product Availability for Sizes/Color
  • Aggregate Ratings or Reviews
  • Shipping and Return Information
  • Customer Testimonials, Photos
  • Email Notifications when Item Returns to Stock
  • Contact Information, Live Chat Features
  • Personalized Suggestions of Items that are Frequently Purchased Together
  • Promo Window for Recently Viewed Products

Another very important design factor of an eCommerce website is taking into consideration the navigational elements on mobile devices, how they flow and what links to include. The development of topic silos, related content, and FAQ sections typically doesn’t matter here. However, if users are prone to the FAQ section on mobile devices, it might make sense to include it in the Navigation.

How do they expect things to appear on mobile devices vs. desktops? Are they optimized for accessibility, caching critical elements such as javascript and CSS to improve the browsing experience?

What are the primary web design considerations for eCommerce Navigational elements?

  • Page Space: In a mobile-first web, most eCommerce designs incorporate vertical navigations using a hamburger menu to conserve space. This also allows for customization to expand the menu, adapting it for different sections of a website. The filters for Houseware Products might be slightly different than Home & Garden.
  • Hierarchy: Someone scanning through the navigation on mobile devices will prefer a vertical menu compared to a horizontal one. Putting the most important links at the top will increase Engagement. This is because of the nature of most mobile resolutions designed with vertical browsing in mind.
  • Priority: Typically on desktop, it is better to have a horizontal menu compared to a vertical one. This is because of the nature of desktop browsing, whereas on mobile having a vertical menu conserves more space. In Western cultures where people read left to right, the eyes are primed to always look towards the “left” area of the screen. Therefore, the content and links located closest to the “left” are considered the most important.

Keeping up with the necessary keyword research required to select what menu items are most important to users can improve the performance of Product Detail Pages. When navigational eCommerce design research is done correctly it is definitely worth the investment. This also opens the doors for many opportunities within Conversion Rate Optimization (CRO).

How can we use PDPs to improve our Marketing?

  • Set Up Topic Silos, Supporting Content Architecture
  • Research Topic, Related Keywords
  • Include Subheadings, Paragraph Headings, Target Keywords
  • Include External Links, Internal Linking Opportunities
  • Include Image Content
  • QA for Quality, Expertise & Helpfulness of Content

Following a well-designed SEO checklist will create accountability and transparency between teams collaborating on the project.

What does the Shopping Cart & Checkout process look like?

  • Write a Provocative Title Tag based on Keyword Research
  • Write a Provocative Meta Description based on intent, Keyword Research
  • Create a Secondary Keyword Hierarchy for H1/2/3/4 tags
  • Add schema.org or other Technical Markups
  • Add internal links, external links to resources where needed
  • QA for Keyword Targets in Title, Description, H1/h2/h3/h4
  • QA for Meta Description Copywriting
  • QA for Title Tag, H1 Copywriting
  • QA for External Links, Internal Linking Opportunities
  • QA for Design, UX, Image Content
  • QA for Quality, Expertise & Helpfulness of Content

Have we considered eCommerce Accessibility & AODA Compliance?

Building an eCommerce website that is designed without user accessibility compliance can be an expensive mistake. This includes AODA policies if you live in Ontario. Outside of Ontario, the website should always consider auditory, vision, mobility, cognitive and neurological impairments to meet accessibility guidelines within your eCommerce web design scope.

Looking for something a bit more comprehensive? Contact our team for affordable help.