Page Overview
Vision
The product listing page is designed to quickly point users (via search or navigation) to meaningful products.
Key Features
Strategy
...
Page History
Version: Phase 1
Phase 1 was designed with the T1/T2 user in mind. As such, it provides the ability to view products available from the DC and has basic product information. A couple upgrades over FOL were product documents and a quick-view feature.
...
| Expand | ||
|---|---|---|
| ||
     |
Version: Phase 2
| Expand | ||
|---|---|---|
| ||
|
...
| Expand | ||
|---|---|---|
| ||
|
...
Page Contents
Top Section
Breadcrumb
Search range box
The search range selection impacts what products are displayed to the user. Default is Nearby Stores. Family-level products appear with All Products and Nearby Stores selected. SKU-level products are displayed with In My Store selected. A location dropdown appears with In My Store selected, allowing the user to choose product availability from within the list of locations they have access to.
| Expand | ||
|---|---|---|
| ||
|
Comparison box
Search result
Pagination
Product List
Sort
Sorts the list of queried products. Available sorts: Best Selling,
Items per page
Determines how many products are displayed per page.
...
In List view, they are: 20, 40, 80. Defaults to 20.
View selector
Determines product list item layout. Defaults to grid.
Grid Item (Desktop, Tablet)
| Expand | ||
|---|---|---|
| ||
|
| Name | Description | Type | Conditions | Added | Value | Example | |
|---|---|---|---|---|---|---|---|
| Compare button | When enabled, will add the product to the Comparison box. | checkbox | Phase 1 | Compare |
| ||
| Product photo | Photo of the product. Displays 'No Image Available' when an image is not present. | image | Phase 1 |
|
| ||
| Product title | text | Phase 1 |
| ||||
| Alt-code | text | Phase 1 |
| ||||
| Pro Plus indicator | A Pro Plus branded icon that displays a points multiplier for that product. | icon | Visible at SKU-level (In My Store) | Phase 2 | 2X Points 3X Points 4X Points |
| |
| Product icons | A list of icons for the product | list, icons | Phase 1 |
| |||
| Price | A price including a third-decimal place | text | 'Starting at' visible on family-level items | Phase 1 | $XXX.XXX |
| |
| Options indicator | text | Visible at family-level | Phase 2 | More Options Available |
| ||
| Availability | text, button | Visible at SKU-level (In My Store) | Phase 2 | XX in store Check other stores |
| ||
| Quick View | button | Phase 1 | Quick View |
|
List Item (Desktop, Tablet)
| Expand | ||
|---|---|---|
| ||
|
| Name | Description | Type | Conditions | Added | Value | Example | |
|---|---|---|---|---|---|---|---|
| Product photo | Photo of the product. Displays 'No Image Available' when an image is not present. | image | Phase 1 |  |  | ||
| Product title | text | Phase 1 |
| ||||
| Alt-code | text | Phase 1 |
| ||||
| Pro Plus indicator | A Pro Plus branded icon that displays a points multiplier for that product. | icon | Visible at SKU-level (In My Store) | Phase 2 | 2X Points 3X Points 4X Points |  | |
| Product icons | A list of icons for the product | list, icons | Phase 1 |
| |||
| Compare | When enabled, will add the product to the Comparison box. | checkbox | Phase 1 |  | |||
| Product documents | list | Appear only in List-view items. | Phase 1 |
| |||
| Price | A price including a third-decimal place | text | 'Starting at' visible on family-level items | Phase 1 | $XXX.XXX |
| |
| Options indicator | text | Visible at family-level | Phase 2 | More Options Available |  | ||
| Availability | text, button | Visible at SKU-level (In My Store) | Phase 2 | XX in store Check other stores |  | ||
| Quick View button | button | Phase 1 | Quick View |  |
Sidebar
Selections box
Shows the list of currently active refinements.
| Expand | ||
|---|---|---|
| ||
|
Category box
A list of sub-categories. Clicking these will result in the user being navigated to that specific result, as well as the category being added to the Selections box.
| Expand | ||
|---|---|---|
| ||
|
Refiner box
A list of refinements. Come in multiple varieties: checkbox, radio, swatch. Clicking these will result in the refinement being added to the Selections box, and the page refreshing.
| Expand | ||
|---|---|---|
| ||
|
Help
| Expand | ||
|---|---|---|
| ||
|
Standard help cartridge.