# Product Page Design SOP - Industry Best Practices

**Document Version:** 1.0  
**Last Updated:** November 26, 2025  
**Purpose:** Guide for building industry-standard product pages in Customer SPA

---

## 📋 Executive Summary

This SOP consolidates research-backed best practices for e-commerce product pages based on Baymard Institute's 2025 UX research and industry standards. Since Customer SPA is not fully customizable by end-users, we must implement the best practices as defaults.

---

## 🎯 Core Principles

1. **Avoid Horizontal Tabs** - 27% of users overlook horizontal tabs entirely
2. **Vertical Collapsed Sections** - Only 8% overlook content (vs 27% for tabs)
3. **Images Are Critical** - After images, reviews are the most important content
4. **Trust & Social Proof** - Essential for conversion
5. **Mobile-First** - But optimize desktop experience separately

---

## 📐 Layout Structure (Priority Order)

### 1. **Hero Section** (Above the Fold)
```
┌─────────────────────────────────────────┐
│  Breadcrumb                             │
├──────────────┬──────────────────────────┤
│              │  Product Title           │
│   Product    │  Price (with sale)       │
│   Images     │  Rating & Reviews Count  │
│   Gallery    │  Stock Status            │
│              │  Short Description       │
│              │  Variations Selector     │
│              │  Quantity                │
│              │  Add to Cart Button      │
│              │  Wishlist/Save           │
│              │  Trust Badges            │
└──────────────┴──────────────────────────┘
```

### 2. **Product Information** (Below the Fold - Vertical Sections)
- ✅ Full Description (expandable)
- ✅ Specifications/Attributes (scannable table)
- ✅ Shipping & Returns Info
- ✅ Size Guide (if applicable)
- ✅ Reviews Section
- ✅ Related Products
- ✅ Recently Viewed

---

## 🖼️ Image Gallery Requirements

### Must-Have Features:
1. **Main Image Display**
   - Large, zoomable image
   - High resolution (min 1200px width)
   - Aspect ratio: 1:1 or 4:3

2. **Thumbnail Slider**
   - Horizontal scrollable
   - 4-6 visible thumbnails
   - Active thumbnail highlighted
   - Arrow navigation for >4 images
   - Touch/swipe enabled on mobile

3. **Image Types Required:**
   - ✅ Product on white background (default)
   - ✅ "In Scale" images (with reference object/person)
   - ✅ "Human Model" images (for wearables)
   - ✅ Lifestyle/context images
   - ✅ Detail shots (close-ups)
   - ✅ 360° view (optional but recommended)

4. **Variation Images:**
   - Each variation should have its own image
   - Auto-switch main image when variation selected
   - Variation image highlighted in thumbnail slider

### Image Gallery Interaction:
```javascript
// User Flow:
1. Click thumbnail → Change main image
2. Select variation → Auto-switch to variation image
3. Click main image → Open lightbox/zoom
4. Swipe thumbnails → Scroll horizontally
5. Hover thumbnail → Preview in main (desktop)
```

---

## 🛒 Buy Section Elements

### Required Elements (in order):
1. **Product Title** - H1, clear, descriptive
2. **Price Display:**
   - Regular price (strikethrough if on sale)
   - Sale price (highlighted in red/primary)
   - Savings amount/percentage
   - Unit price (for bulk items)

3. **Rating & Reviews:**
   - Star rating (visual)
   - Number of reviews (clickable → scroll to reviews)
   - "Write a Review" link

4. **Stock Status:**
   - ✅ In Stock (green)
   - ⚠️ Low Stock (orange, show quantity)
   - ❌ Out of Stock (red, "Notify Me" option)

5. **Variation Selector:**
   - Dropdown for each attribute
   - Visual swatches for colors
   - Size chart link (for apparel)
   - Clear labels
   - Disabled options grayed out

6. **Quantity Selector:**
   - Plus/minus buttons
   - Number input
   - Min/max validation
   - Bulk pricing info (if applicable)

7. **Action Buttons:**
   - **Primary:** Add to Cart (large, prominent)
   - **Secondary:** Buy Now (optional)
   - **Tertiary:** Add to Wishlist/Save for Later

8. **Trust Elements:**
   - Security badges (SSL, payment methods)
   - Free shipping threshold
   - Return policy summary
   - Warranty info

---

## 📝 Product Information Sections

### 1. Description Section
```
Format: Vertical collapsed/expandable
- Short description (2-3 sentences) always visible
- Full description expandable
- Rich text formatting
- Bullet points for features
- Video embed support
```

### 2. Specifications/Attributes
```
Format: Scannable table
- Two-column layout (Label | Value)
- Grouped by category
- Tooltips for technical terms
- Expandable for long lists
- Copy-to-clipboard for specs
```

### 3. Shipping & Returns
```
Always visible near buy section:
- Estimated delivery date
- Shipping cost calculator
- Return policy link
- Free shipping threshold
- International shipping info
```

### 4. Size Guide (Apparel/Footwear)
```
- Modal/drawer popup
- Size chart table
- Measurement instructions
- Fit guide (slim, regular, loose)
- Model measurements
```

---

## ⭐ Reviews Section

### Must-Have Features:
1. **Review Summary:**
   - Overall rating (large)
   - Rating distribution (5-star breakdown)
   - Total review count
   - Verified purchase badge

2. **Review Filters:**
   - Sort by: Most Recent, Highest Rating, Lowest Rating, Most Helpful
   - Filter by: Rating (1-5 stars), Verified Purchase, With Photos

3. **Individual Review Display:**
   - Reviewer name (or anonymous)
   - Rating (stars)
   - Date
   - Verified purchase badge
   - Review text
   - Helpful votes (thumbs up/down)
   - Seller response (if any)
   - Review images (clickable gallery)

4. **Review Submission:**
   - Star rating (required)
   - Title (optional)
   - Review text (required, min 50 chars)
   - Photo upload (optional)
   - Recommend product (yes/no)
   - Fit guide (for apparel)

5. **Review Images Gallery:**
   - Navigate all customer photos
   - Filter reviews by "with photos"
   - Lightbox view

---

## 🎁 Promotions & Offers

### Display Locations:
1. **Product Badge** (on image)
   - "Sale" / "New" / "Limited"
   - Percentage off
   - Free shipping

2. **Price Section:**
   - Coupon code field
   - Auto-apply available coupons
   - Bulk discount tiers
   - Member pricing

3. **Sticky Banner** (optional):
   - Site-wide promotions
   - Flash sales countdown
   - Free shipping threshold

### Coupon Integration:
```
- Auto-detect applicable coupons
- One-click apply
- Show savings in cart preview
- Stackable coupons indicator
```

---

## 🔒 Trust & Social Proof Elements

### 1. Trust Badges (Near Add to Cart):
- Payment security (SSL, PCI)
- Payment methods accepted
- Money-back guarantee
- Secure checkout badge

### 2. Social Proof:
- "X people viewing this now"
- "X sold in last 24 hours"
- "X people added to cart today"
- Customer photos/UGC
- Influencer endorsements

### 3. Credibility Indicators:
- Brand certifications
- Awards & recognition
- Press mentions
- Expert reviews

---

## 📱 Mobile Optimization

### Mobile-Specific Considerations:
1. **Image Gallery:**
   - Swipeable main image
   - Thumbnail strip below (horizontal scroll)
   - Pinch to zoom

2. **Sticky Add to Cart:**
   - Fixed bottom bar
   - Price + Add to Cart always visible
   - Collapse on scroll down, expand on scroll up

3. **Collapsed Sections:**
   - All info sections collapsed by default
   - Tap to expand
   - Smooth animations

4. **Touch Targets:**
   - Min 44x44px for buttons
   - Adequate spacing between elements
   - Large, thumb-friendly controls

---

## 🎨 Visual Design Guidelines

### Typography:
- **Product Title:** 28-32px, bold
- **Price:** 24-28px, bold
- **Body Text:** 14-16px
- **Labels:** 12-14px, medium weight

### Colors:
- **Primary CTA:** High contrast, brand color
- **Sale Price:** Red (#DC2626) or brand accent
- **Success:** Green (#10B981)
- **Warning:** Orange (#F59E0B)
- **Error:** Red (#EF4444)

### Spacing:
- Section padding: 24-32px
- Element spacing: 12-16px
- Button padding: 12px 24px

---

## 🔄 Interaction Patterns

### 1. Variation Selection:
```javascript
// When user selects variation:
1. Update price
2. Update stock status
3. Switch main image
4. Update SKU
5. Highlight variation image in gallery
6. Enable/disable Add to Cart
```

### 2. Add to Cart:
```javascript
// On Add to Cart click:
1. Validate selection (all variations selected)
2. Show loading state
3. Add to cart (API call)
4. Show success toast with cart preview
5. Update cart count in header
6. Offer "View Cart" or "Continue Shopping"
```

### 3. Image Gallery:
```javascript
// Image interactions:
1. Click thumbnail → Change main image
2. Click main image → Open lightbox
3. Swipe main image → Next/prev image
4. Hover thumbnail → Preview (desktop)
```

---

## 📊 Performance Metrics

### Key Metrics to Track:
- Time to First Contentful Paint (< 1.5s)
- Largest Contentful Paint (< 2.5s)
- Image load time (< 1s)
- Add to Cart conversion rate
- Bounce rate
- Time on page
- Scroll depth

---

## ✅ Implementation Checklist

### Phase 1: Core Features (MVP)
- [ ] Responsive image gallery with thumbnails
- [ ] Horizontal scrollable thumbnail slider
- [ ] Variation selector with image switching
- [ ] Price display with sale pricing
- [ ] Stock status indicator
- [ ] Quantity selector
- [ ] Add to Cart button
- [ ] Product description (expandable)
- [ ] Specifications table
- [ ] Breadcrumb navigation

### Phase 2: Enhanced Features
- [ ] Reviews section with filtering
- [ ] Review submission form
- [ ] Related products carousel
- [ ] Wishlist/Save for later
- [ ] Share buttons
- [ ] Shipping calculator
- [ ] Size guide modal
- [ ] Image zoom/lightbox

### Phase 3: Advanced Features
- [ ] 360° product view
- [ ] Video integration
- [ ] Live chat integration
- [ ] Recently viewed products
- [ ] Personalized recommendations
- [ ] Social proof notifications
- [ ] Coupon auto-apply
- [ ] Bulk pricing display

---

## 🚫 What to Avoid

1. ❌ Horizontal tabs for content
2. ❌ Hiding critical info below the fold
3. ❌ Auto-playing videos
4. ❌ Intrusive popups
5. ❌ Tiny product images
6. ❌ Unclear variation selectors
7. ❌ Hidden shipping costs
8. ❌ Complicated checkout process
9. ❌ Fake urgency/scarcity
10. ❌ Too many CTAs (decision paralysis)

---

## 📚 References

- Baymard Institute - Product Page UX 2025
- Nielsen Norman Group - E-commerce UX
- Shopify - Product Page Best Practices
- ConvertCart - Social Proof Guidelines
- Google - Mobile Page Speed Guidelines

---

## 🔄 Version History

| Version | Date | Changes |
|---------|------|---------|
| 1.0 | 2025-11-26 | Initial SOP creation based on industry research |

