Product page
Note: This design specification is still in development. If have any feedback or would like to join the PWA conversation, please join our Slack channel.
Layout
See the interactive mockup for a preview of the Product page layout.
Page states
The product page handles the following page states:
- Refresh
- Offline
- Revisit
- Cached
- Inventory sync
Components
The Product page is made up of the following components:
- Header
- Title bar
- Image carousel
- Add to wishlist
- Share
- Size selector
- Color selector
- Label selector
- Quantity selector
- Quantity sync bar
- Product description
- Recommended carousel
- Buy now / Buy with
- Add to cart
- Footer
The following table shows a visual breakdown of these components.
| Components | Reference image |
|---|---|
| Header |  |
| Title bar |  |
| Image carousel |  |
| Add to wishlist Share |
 |
| Size selector |  |
| Color selector |  |
| Label selector |  |
| Quantity selector Quantity sync bar |
 |
| Product description |  |
| Recommended carousel |  |
| Buy now / Buy with Add to cart |
 |
| Footer |  |