Product Page

Problem summary

The user need to know details about a product in order to make a purchase decision or satisfy a need for support.

Examples

No items found.

Solution

Present a given product and group related information into chunks. Optionally provide links to other relevant products.

Product pages usually have the following four design elements:

  • Product title (product name)
  • Main picture of product
  • Price
  • “Add to cart”, “Place order” or “Buy” button

Furthermore, the following elements are used when they make sense:

  • Sales price (often in red and with original price crossed out)
  • Detail images
  • Product variants (size, color, etc.)
  • Product variant pictures (especially regarding color or different patterns)
  • Availability (amount in stock)
  • Delivery time
  • Quantity input form
  • “Add to wishlist”/“Favorite” button
  • Zoom function
  • Short description
  • Longer description
  • Product specifications/details
  • Label (“Bestseller”, “Only few left”, “Recycled materials”, etc.)
  • SKU (Stock Keeping Unit) or other form of product id.
  • Special offers (Buy this product + another for $xxx,buy 2 for less, etc.)
  • Support info – often with phone number or support email address
  • “Customize” button
  • Share on social media buttons (Facebook, Digg, StumbleUpon, etc.)

Rationale

Converting interested visitors into paying customers is your biggest aim. Design your product pages with the purpose of persuading users to buy one or more of the products you are selling.

Resources

Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection

Ecommerce
iOS
Website
Dashboard
Flowchart
VIEW BUNDLE