Skip to main content

🚀 Quick Start Guide - Product Images

1️⃣ Setup (5 minutes)​

Get Vercel Blob Token​

  1. Go to Vercel Dashboard
  2. Select your project
  3. Click Storage → Blob
  4. Click Create Store (if you don't have one)
  5. Copy the BLOB_READ_WRITE_TOKEN

Add to Environment​

# Add to your .env file
BLOB_READ_WRITE_TOKEN=vercel_blob_xxx...

Deploy Changes (if already deployed)​

# Rebuild to apply new configuration
npm run build

# Or push to trigger Vercel deployment
git add .
git commit -m "Add product image management"
git push origin main

2️⃣ Usage (2 minutes)​

Add Images to Products​

  1. Go to Admin → /admin/inventory

  2. For New Products:

    • Click "Add Product"
    • Fill in name, price, quantity
    • Click "Add Product"
    • Click "Edit" on the newly created product
    • Now you can upload images

  3. For Existing Products:

    • Click "Edit" on any product
    • Scroll to "Product Images" section
    • Click "Upload Image"
    • Select image file (JPEG, PNG, WebP, or GIF)
    • Wait for upload to complete
    • Edit alt text for accessibility
    • Upload more images as needed
    • Click "Set Primary" to change main display image

  4. View in Shop → /shop

    • Images automatically appear on product cards
    • Optimized for all devices
    • Fast loading with Next.js optimization

3️⃣ Best Practices​

Image Requirements​

  • Format: JPEG or WebP for photos, PNG for graphics
  • Size: Max 5MB per file
  • Dimensions: 1600-2000px on longest side recommended
  • Quality: Upload high-quality, Next.js will optimize
  1. ✅ Prepare images before uploading (crop, enhance)
  2. ✅ Upload master/hero image first (auto-set as primary)
  3. ✅ Add descriptive alt text for each image
  4. ✅ Add multiple angles/views for better presentation
  5. ✅ Set best photo as primary for shop display

Alt Text Tips​

  • Describe what's in the image
  • Keep it concise (150 chars or less)
  • Don't start with "Image of..." or "Picture of..."
  • Example: "Red cricket bat with leather grip and willow wood"

🎯 That's It!​

Your product images are now:

  • ✅ Stored securely in Vercel Blob
  • ✅ Optimized automatically by Next.js
  • ✅ Delivered fast from edge network
  • ✅ Responsive for all devices
  • ✅ Accessible with alt text

🆘 Troubleshooting​

"Upload failed"​

  • Check file size (< 5MB)
  • Verify file type (JPEG, PNG, WebP, GIF)
  • Ensure BLOB_READ_WRITE_TOKEN is set

"Images not showing"​

  • Hard refresh browser (Cmd+Shift+R or Ctrl+Shift+R)
  • Check browser console for errors
  • Verify token is set correctly

"Upload button disabled"​

  • Make sure you're editing an existing product
  • Can't upload to new products before saving

📖 More Info​

  • Detailed setup: IMAGE_SETUP.md
  • Implementation details: IMPLEMENTATION_SUMMARY.md
  • Need help? Check console for error messages

Happy uploading! 📸✨