c37ecb8e96
Phase 1 Implementation: - Horizontal scrollable thumbnail slider with arrow navigation - Variation selector with auto-image switching - Enhanced buy section with quantity controls - Product tabs (Description, Additional Info, Reviews) - Specifications table from attributes - Responsive design with mobile optimization Features: - Image gallery: Click thumbnails to change main image - Variation selector: Auto-updates price, stock, and image - Stock status: Color-coded indicators (green/red) - Add to cart: Validates variation selection - Breadcrumb navigation - Product meta (SKU, categories) - Wishlist button (UI only) Documentation: - PRODUCT_PAGE_SOP.md: Industry best practices guide - PRODUCT_PAGE_IMPLEMENTATION.md: Implementation plan Admin: - Sortable images with visual dropzone indicators - Dashed borders show drag-and-drop capability - Ring highlight on drag-over - Opacity change when dragging Files changed: - customer-spa/src/pages/Product/index.tsx: Complete rebuild - customer-spa/src/index.css: Add scrollbar-hide utility - admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx: Enhanced dropzone
437 lines
11 KiB
Markdown
437 lines
11 KiB
Markdown
# 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 |
|
|
|