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.
Version: Phase 2
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.
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 Grid view, the options are: 24, 48, 96. Defaults to 24.
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)
| 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)
| 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.
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.
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.
Help
Standard help cartridge.