Amazon PDP Mockup Generator

A simple web application that generates realistic Amazon Product Detail Page (PDP) mockups by combining uploaded product images with CSV-based copy content.

Features

• Drag & Drop Interface: Upload multiple JPG images by dragging and dropping
• CSV Data Integration: Upload CSV files to populate product copy automatically
• Live Preview: See your Amazon mockup update in real-time as you add content
• Image Management: Click to select hero image, thumbnails auto-populate
• Export Functionality: Download your mockup as a high-quality PNG
• Responsive Design: Works on desktop, tablet, and mobile devices

How to Use

1. Upload Images

• Drag and drop JPG files onto the "Drop JPG Images Here" area
• Or click the area to browse and select files
• Click any uploaded image to set it as the hero image
• Other images will appear as thumbnails and A+ content

2. Upload CSV Data

• Drag and drop a CSV file onto the "Upload CSV Data" area
• Or click the area to browse and select a CSV file
• The CSV should contain product information in the format shown below

3. Preview & Export

• Your Amazon mockup will update automatically as you add content
• Click "Export as PNG" to download your final mockup

CSV Format

Your CSV file should have two columns: field and content. Here are the supported fields:

Required Fields

• brand_name - The brand name (e.g., "L'Oréal Paris")
• product_title - The main product title
• description - Product description text

Optional Fields

• bullet_1 through bullet_5 - Key product features (up to 5 bullets)
• price - Product price (e.g., "$24.99")
• rating - Star rating (e.g., "4.5")
• review_count - Number of reviews (e.g., "1234")

Example CSV Format

field,content
brand_name,L'Oréal Paris
product_title,Advanced Hair Serum - Keratin Infused 100ml
bullet_1,Professional-grade formula with keratin complex
bullet_2,Suitable for all hair types and textures
bullet_3,Reduces frizz and adds natural shine
bullet_4,Dermatologically tested and approved
bullet_5,Cruelty-free and vegan friendly
description,Transform your hair care routine with our advanced serum...
price,$24.99
rating,4.5
review_count,1234

File Structure

amazon-mockup-generator/
├── index.html          # Main application (all-in-one)
├── sample.csv          # Example CSV template
└── README.md           # This documentation

Technical Details

• Single File Application: Everything is contained in index.html
• No Server Required: Open directly in any modern web browser
• Export Technology: Uses html2canvas library for PNG export
• Browser Compatibility: Works in Chrome, Firefox, Safari, Edge (modern versions)

Tips for Best Results

Images

• Use high-quality JPG images (minimum 800x800px recommended)
• First image uploaded will be set as hero image by default
• Click any image to change the hero image
• Images work best with white or transparent backgrounds

CSV Data

• Use the provided sample.csv as a template
• Keep bullet points concise (under 100 characters each)
• Product title should be descriptive but not too long
• Description can be longer and more detailed

Export

• Export works best when you have both images and CSV data loaded
• The exported PNG will be high-resolution (2x scale)
• Large mockups may take a few seconds to export

Troubleshooting

Images Not Loading

• Ensure files are JPG format (not PNG or other formats)
• Check file size (very large files may take time to process)
• Try refreshing the page and uploading again

CSV Not Working

• Verify your CSV has the correct format (field,content columns)
• Check that field names match exactly (case-sensitive)
• Ensure no special characters in field names

Export Issues

• Make sure you have content loaded (images or CSV data)
• Try refreshing the page if export fails
• Check browser console for any error messages

Browser Requirements

• Modern web browser (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+)
• JavaScript enabled
• File API support (for drag & drop)
• Canvas API support (for export)

Support

This is a standalone application that runs entirely in your browser. No installation or server setup required. Simply open index.html in your web browser to get started.