Product Detail Page (Phase 1/Phase 2)
- Jesilyn Barnes (Deactivated)
- Karen Jennings
- Anonymous
The PDP page is where customers read details about a product for sale on Ferguson.com.
The purpose of the page is to provide customers with the information they need to make a decision to purchase the product.
Modules
| Module Name | Description |
|---|---|
| Header | This page uses the default global header. See documentation on it here. |
| Product Information | Title, image, price, options, availability, etc. |
| Product Details | Description, specification, and documents |
| Ratings & Reviews | Coming soon. |
| Related Products | See documentation on it here. |
| Help | See documentation on it here. |
| Footer | This page uses the default global footer. See documentation on it here. |
Creative
Below are a list of comps and screenshots. Click on individual images to view larger versions.
Elements
Navigation
| ID | Element | Type | Conditions | Added | Value/Example |
|---|---|---|---|---|---|
BreadcrumbNavigational element, displays the full taxonomical path from the parent category to it'a lowest level subcategory. | text, hyperlink | Phase 1 | HOME > CATEGORY > SUB-CATEGORY > PRODUCT TITLE |
Product Overview
| ID | Element | Type | Conditions | Added | Value/Example |
|---|---|---|---|---|---|
| Brand logo | image | Phase 1 | |||
| Product image | image, video | Phase 1 | |||
| Product thumbnails | image | Phase 1 | |||
Product titleA long-form name of the product. | text | Phase 1 | BRAND_NAME + COLLECTION_NAME + WEB_DISPLAY_NAME | ||
| Product price | text | Phase 1 | |||
Alt-codeA ferguson version of the vendor product code | text | Phase 1 | ALT_CODE | ||
Fast-codeFast-code or Customer-code | text | T3/4. Appears by default when a user has a fast-code for this product | Phase 2 | ALT_CODE / FAST_CODE
| |
MPIDA unique product identifier designation (generated by Product Services?) | text | T3/4. Appears if it exists in STEP. | 06/22/17, FCE-1382 | Item #: MPID_CODE
| |
| Product icons | icon | Phase 1 |
Product Availability
| ID | Element | Type | Conditions | Added | Value/Example |
|---|---|---|---|---|---|
Product Status MessageDisplays a message that the product is currently/no longer available. When the product has a replacement, the message hyperlinks to the replacement product's PDP page. Value: PRODUCT_STATUS_MESSAGE | text, hyperlink | Appears when a product is no longer available. | Phase 1 |  | |
| Pickup availability | text | ||||
| Shipping availability | text |
Interactions
| ID | Element | Type | Conditions | Added | Value/Example |
|---|---|---|---|---|---|
Add to CartAdds the product to cart. Value: Add to Cart onClick: Adds product to cart, then displays a confirmation message. | button | Inactive until user completes required fields | Phase 1 | "Add to Cart" | |
Add to ListAdds the product to a list. Value: Add to My Lists onClick: Opens Add to My Lists modal | button | Inactive until user completes required fields | Phase 1 | "Add to My Lists" | |
| Refiners | radio | Phase 1 | |||
| Quantity | input | Phase 1 | |||
Prints the screen Value: printer icon onClick: Launches the browser's print function | button | Phase 1 | |||
| Price view | button | T3/4. |
Product Details
| ID | Element | Type | Conditions | Added | Value/Example |
|---|---|---|---|---|---|
| Product description | rich text | Phase 1 | |||
| Specifications | tabular data | Phase 1 | |||
| Product documents | file array | Phase 1 |
Unsorted
| ID | Element | Type | Conditions | Added | |
|---|---|---|---|---|---|
| 15 | Price per | text | |||
| 16 | Price note | text |
Resources
Research
Desktop
- NNGroup: Product Detail Pages report
- Baymard: Product Page Suggestions
- Shopify: Optimize Your Product Detail Page
- Baymard: Product page examples
- 99MediaLab: 49 Elements Your PDP Must Have