Product Details Page
Page Overview
The Product Details page shows everything you need to know about a single product — images, price, stock, variant options, and customer reviews — plus the controls to add it to your cart or wishlist.
Interface Overview
The page is split into two main areas:
- Product gallery and purchase panel — product images/thumbnails on one side, and details (name, seller/shop link, SKU, availability, brand, category, price, variant options, quantity selector, Add to Cart, and wishlist button) on the other.
- Description / Additional Info / Reviews tabs — below the main panel, showing tabbed content for the product description, additional info, and customer reviews.
UI Components
- Image gallery — a main image with a row of thumbnails below it; clicking a thumbnail updates the main image.
- Star rating & review count — shown near the product name when the product has ratings (for example, "4.5 Star Rating (12 User feedback)").
- Shop link — the seller's logo and name; clicking it opens that shop's page.
- Availability details — SKU, Availability (In Stock / Out of Stock), Brand, and Category, shown as a small info grid when available.
- Price — current price, with the original price shown with a strikethrough and a "% OFF" badge if the item is discounted.
- Variant options — if the product has variants (for example, size or color), option buttons are shown for each variant type; selecting a combination updates the price, stock, and image.
- Quantity selector — minus/plus buttons around a quantity field (quantity cannot go below 1).
- Add to Cart button — becomes Out of Stock and is disabled when the selected variant/product is unavailable, or Unavailable if a product has variants but none is selected yet.
- Wishlist button — shows Add to Wishlist (with a heart icon) or Remove from Wishlist (filled heart icon) depending on whether the item is already saved.
- "100% Guarantee Safe Checkout" panel — displays accepted payment method icons.
- Tabs — Description, Additional Info, and Reviews.
- Reviews tab — shows existing reviews (reviewer name/photo, date, star rating, review title, and text) with pagination, or a "No Reviews Available Yet" message if there are none. If you're eligible to review the product, a Write a review button appears.
- Review form (opens when you click Write a review) — a star rating picker, Your Review Title field, a feedback textarea, an "I recommend this product" checkbox, and Cancel/Create buttons.
Step-by-Step User Guide
To view product details:
- Click any product card from the homepage, Products page, category page, shop page, or search results.
- Scroll through the image gallery and read the availability, brand, and category info.
- If the product has variants (size, color, etc.), select the option you want — the price, image, and stock status will update.
To add a product to your cart:
- Choose a variant if applicable.
- Adjust the quantity using the minus/plus buttons.
- Click Add to Cart (this button is disabled and reads Out of Stock or Unavailable if the item can't currently be purchased).
To save a product to your wishlist:
- Click Add to Wishlist below the Add to Cart button.
- If you're not logged in, the login window will open — log in or sign up to continue.
- Click Remove from Wishlist on the same button to take it back off your list.
To read or write a review:
- Click the Reviews tab below the main product panel.
- Browse existing reviews, or use pagination to see more.
- If you're eligible and logged in, click Write a review.
- Rate the product (stars), enter a Your Review Title, write your feedback, optionally check "I recommend this product", then click Create. Click Cancel to close the form without submitting.
Note: If you try to write a review while logged out, you'll be prompted to log in first.
Forms / Tables / Statuses
Review form fields:
| Field | Required |
|---|---|
| Star rating | Yes |
| Your Review Title | Yes |
| Feedback text | Yes |
| I recommend this product | No (checkbox) |
Availability statuses: In Stock, Out of Stock.
Notifications
- Validation messages appear under each review form field if required information is missing (for example, "Rating is required", "Title is required").
- A "Please Login to write a review" message appears if you try to open the review form while logged out.
User Tips
Tip: Check the availability line before adding a large quantity to your cart — the Add to Cart button will automatically limit how many you can buy if stock is low.
Tip: Not every product is eligible for reviews from every customer — the Write a review button only appears if you meet the shop's review eligibility rules.
Best Practices
- Read the Description and Additional Info tabs before purchasing to confirm sizing, materials, or other specifics.
- Check recent reviews for real feedback on quality and fit before buying.
Common Mistakes
- Trying to click Add to Cart when it reads Unavailable — this means a product has variants and you haven't selected one yet.
- Assuming a product without visible reviews has none available at all — some products simply show "No Reviews Available Yet" until customers start reviewing them.
Troubleshooting
- Add to Cart is disabled: Make sure you've selected a variant (if required) and that the item is In Stock for your chosen quantity.
- Wishlist button isn't responding: You need to be logged in — the login window should appear automatically if you're not.
- Review form won't open: You must be logged in and eligible to review that specific product.
Frequently Asked Questions
Q: Can I share a product link with someone? A: You can copy the page's web address from your browser's address bar to share it.
Q: Why is the Add to Cart button showing "Out of Stock"? A: The selected variant (or the product itself) has no remaining inventory available.
Q: Do I need to be logged in to view reviews? A: No, anyone can read reviews. You only need to log in to write your own.