---
name: Product Details Screen
description: Design recommendations for detail screens displaying product information with images, pricing, and specifications
---

# Product Details Screen Design Guidance

When designing a detail screen for a product:

## Image Display

1. **Large Featured Image**: If a product image is available, it must be the largest and most prominent component at the top of the screen. The image should dominate the visual hierarchy and be significantly larger than any other element, appearing before the product name or any other information. This creates an immediate visual connection with the product and helps users quickly identify what they're viewing.

2. **Image Carousel for Multiple Images**: If there are multiple product images available, use a `Carousel` component to display them. The carousel should:
   - Show the primary/featured image first
   - Allow users to swipe or navigate through additional images
   - Include navigation indicators (dots or thumbnails) to show how many images are available
   - Maintain the large, prominent size for all images in the carousel
   - Support touch gestures for easy navigation on mobile devices

3. **Image Quality and Aspect Ratio**: Product images should be displayed at high quality and maintain appropriate aspect ratios. Consider the product type when determining aspect ratios (e.g., square for most products, portrait for clothing, landscape for wide products).

## Layout Structure

4. **Product Name as Title**: The product name should be displayed as the primary title below the image(s), typically using a `ScreenTitle` component. The name should be visually secondary to the image in terms of size and prominence but clearly readable.

5. **Pricing Information**: Display pricing prominently below the product name:
   - Show current price in a large, bold font
   - Display original price (if discounted) with strikethrough styling
   - Include any discount percentages or savings information
   - Make pricing information easy to scan and understand

6. **Key Product Details**: Display essential product information below pricing:
   - Product description or summary
   - Key specifications or features
   - Availability status
   - SKU or product code (if relevant)

## Actions and Interactions

7. **Primary Action Button**: Include a prominent "Add to Cart" or "Buy Now" button that is easily accessible and clearly visible. This should be the primary call-to-action on the screen.

8. **Quantity Selector**: If applicable, include a quantity selector near the primary action button, allowing users to specify how many items they want before adding to cart.

9. **Secondary Actions**: Include secondary actions such as:
   - Add to wishlist/favorites
   - Share product
   - View in different variants (size, color, etc.)

## Additional Information

10. **Product Specifications**: Display detailed specifications in an organized, scannable format:
    - Use clear section headers
    - Group related specifications together
    - Use appropriate formatting (lists, tables, etc.) for readability

11. **Reviews and Ratings**: If available, display product reviews and ratings using the `Rating` component:
    - Show overall rating prominently using `<Rating value={rating} readOnly>` with `RatingButton` children
    - Include review count next to the rating (e.g., "4.5 (127 reviews)")
    - Use read-only mode (`readOnly={true}`) for displaying existing ratings
    - For user reviews, allow interactive ratings without `readOnly` prop

12. **Related Products**: Consider displaying related or similar products at the bottom of the screen to encourage further exploration.