feat: Implement complete product page with industry best practices
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
This commit is contained in:
Dwindi Ramadhana
436
PRODUCT_PAGE_SOP.md
Normal file
436
PRODUCT_PAGE_SOP.md
Normal file
@@ -0,0 +1,436 @@
|
||||
# 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 |
|
||||
|
||||
Reference in New Issue
Block a user