If you have any project questions, concerns, or contribution ideas, join our #pwa Slack channel. Find out how to create an account by visiting Community Resources

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:

The following table shows a visual breakdown of these components.

Components Reference image
Header Header image
Title bar Title bar image
Image carousel Image carousel image
Add to wishlist
Share
Add to wishlist image
Size selector Size selector image
Color selector Color selector image
Label selector Label selector image
Quantity selector
Quantity sync bar
Quantity selector image
Product description Product description image
Recommended carousel Recommended carousel image
Buy now / Buy with
Add to cart
Add to cart image
Footer Footer image