loreal_ecf/README.md

Amazon Mockup Generator Suite

A collection of web applications for generating realistic Amazon Product Detail Page (PDP) mockups and Below The Fold (BTF) content. All applications run entirely in your browser with no server setup required.

Applications Overview

This suite includes four main applications:

1. ATF_preview.html - Standard Preview Generator

The basic Amazon PDP mockup generator with standard layout. Perfect for quick previews and standard product pages.

Features:

• Drag & drop image upload (JPG format)
• CSV data integration for product copy
• Live preview updates
• Hero image selection
• Thumbnail gallery
• PNG export functionality

Best for: Standard product mockups, quick previews, general use cases

---

2. ATF_brand.html - Brand Layout Generator

A specialized version optimized for brand-focused product pages with enhanced brand visibility.

Features:

• Brand-optimized layout design
• Enhanced brand name display
• Improved visual hierarchy for brand elements
• All standard features from preview version
• Customizable A+ content sections

Best for: Brand-focused products, premium brand positioning, brand-heavy product pages

---

3. ATF_premium.html - Premium Generator with Advanced Editing

The most feature-rich version with advanced editing capabilities and enhanced customization options.

Features:

• Advanced inline editing interface
• Real-time content editing
• Enhanced layout options
• Premium design elements
• Extended customization controls
• All features from standard and brand versions

Best for: Final production mockups, detailed customization needs, premium product presentations

---

4. BTF_composer.html - Below The Fold (BTF) Content Composer

A specialized tool for creating and composing Amazon A+ content modules that appear below the fold on product pages.

Features:

• Drag-and-drop module builder
• Pre-built module templates
• Image upload and management
• Module reordering via drag handles
• Real-time preview of BTF content
• Export functionality for A+ content modules

Best for: Creating A+ content, building product detail modules, below-the-fold content design

---

Common Features Across ATF Applications

All ATF (Above The Fold) applications share these core 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. Choose Your Application

• Open the HTML file that matches your needs:
  • ATF_preview.html for standard mockups
  • ATF_brand.html for brand-focused layouts
  • ATF_premium.html for advanced editing
  • BTF_composer.html for A+ content modules

2. 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

3. Upload CSV Data (ATF Applications Only)

• 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

4. 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/
├── ATF_preview.html              # Standard preview generator
├── ATF_brand.html                 # Brand layout generator
├── ATF_premium.html               # Premium generator with advanced editing
├── BTF_composer.html               # BTF/A+ content composer
├── Sample_assets_for_testing/     # Sample assets and CSV templates
│   ├── ATF/                       # Sample Above The Fold images
│   ├── BTF/                       # Sample Below The Fold images
│   ├── sample.csv                 # Example CSV template
│   ├── sample_premium.csv         # Premium CSV template
│   └── LP_CURL_EXPRESSIONS_for_app.csv  # Additional example
├── README.md                       # This documentation

Technical Details

• Single File Applications: Each HTML file is completely self-contained
• 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)
• No Dependencies: All libraries are embedded, no npm install needed

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
• For BTF composer, use images sized appropriately for module layouts

CSV Data

• Use the provided sample CSV files in Sample_assets_for_testing/ as templates
• 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
• For BTF composer, export individual modules or the full composition

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
• Use UTF-8 encoding for special characters

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
• Ensure sufficient memory for large exports

BTF Composer Issues

• Make sure images are uploaded before adding modules
• Drag modules to reorder them
• Use the remove button to delete unwanted modules
• Export works best with at least one module added

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)

Which Application Should I Use?

Use ATF_preview.html if:

• You need a quick, standard Amazon PDP mockup
• You're creating initial concepts or drafts
• You want simplicity and speed

Use ATF_brand.html if:

• Your product is brand-focused
• Brand visibility is a priority
• You need enhanced brand presentation

Use ATF_premium.html if:

• You need advanced editing capabilities
• You're creating final production mockups
• You want maximum customization options

Use BTF_composer.html if:

• You're creating A+ content modules
• You need to build below-the-fold content
• You want to compose multi-module layouts

Support

All applications are standalone and run entirely in your browser. No installation or server setup required. Simply open the desired HTML file in your web browser to get started.

For sample assets and CSV templates, check the Sample_assets_for_testing/ folder.