commit a0940134d464921e51e269d9f86b85d281d14d2d Author: Alessandro Benedetti Admin Date: Tue Dec 16 15:53:33 2025 +0000 initial commit diff --git a/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_AMAZON_MAINCLAIM_1x1_3474637069131_3474637109738.jpg b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_AMAZON_MAINCLAIM_1x1_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..4c02ce0 Binary files /dev/null and b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_AMAZON_MAINCLAIM_1x1_3474637069131_3474637109738.jpg differ diff --git a/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_AMAZON_PACKSHOT_1x1_3474637069131_3474637109738.jpg b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_AMAZON_PACKSHOT_1x1_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..3df33df Binary files /dev/null and b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_AMAZON_PACKSHOT_1x1_3474637069131_3474637109738.jpg differ diff --git a/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_FULLRANGE_1x1_3474637069131_3474637109738.jpg b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_FULLRANGE_1x1_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..ace3f10 Binary files /dev/null and b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_FULLRANGE_1x1_3474637069131_3474637109738.jpg differ diff --git a/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_HOWTO_1x1_3474637069131_3474637109738.jpg b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_HOWTO_1x1_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..4ab7ad5 Binary files /dev/null and b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_HOWTO_1x1_3474637069131_3474637109738.jpg differ diff --git a/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_PACKSHOT3_1x1_3474637069131_3474637109738.jpg b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_PACKSHOT3_1x1_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..c376d94 Binary files /dev/null and b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_PACKSHOT3_1x1_3474637069131_3474637109738.jpg differ diff --git a/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_RR_1x1_3474637069131_3474637109738.jpg b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_RR_1x1_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..24afb95 Binary files /dev/null and b/Asset/ATF/LP_CURL_EXPRESSION_2025_CREME-EN-MOUSSE_THUMBNAILS_SEPHORA_RR_1x1_3474637069131_3474637109738.jpg differ diff --git a/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_1_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_1_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg new file mode 100755 index 0000000..67c8d62 Binary files /dev/null and b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_1_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg differ diff --git a/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_1_MOB_600x450_3474637069131_3474637109738.jpg b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_1_MOB_600x450_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..7fd9eb3 Binary files /dev/null and b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_1_MOB_600x450_3474637069131_3474637109738.jpg differ diff --git a/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_2_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_2_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg new file mode 100755 index 0000000..946e18f Binary files /dev/null and b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_2_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg differ diff --git a/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4A_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4A_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg new file mode 100755 index 0000000..a3220c1 Binary files /dev/null and b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4A_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg differ diff --git a/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4A_MOB_600x450_3474637069131_3474637109738.jpg b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4A_MOB_600x450_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..4a7e93b Binary files /dev/null and b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4A_MOB_600x450_3474637069131_3474637109738.jpg differ diff --git a/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4B_MOB_600x450_3474637069131_3474637109738.jpg b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4B_MOB_600x450_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..189d30b Binary files /dev/null and b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4B_MOB_600x450_3474637069131_3474637109738.jpg differ diff --git a/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4C_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4C_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg new file mode 100755 index 0000000..c896959 Binary files /dev/null and b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4C_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg differ diff --git a/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4C_MOB_600x450_3474637069131_3474637109738.jpg b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4C_MOB_600x450_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..b285f4b Binary files /dev/null and b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4C_MOB_600x450_3474637069131_3474637109738.jpg differ diff --git a/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4D_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4D_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg new file mode 100755 index 0000000..f97c646 Binary files /dev/null and b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4D_DESKTOP_1464x600_ 3474637069131_3474637109738.jpg differ diff --git a/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4D_MOB_600x450_3474637069131_3474637109738.jpg b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4D_MOB_600x450_3474637069131_3474637109738.jpg new file mode 100755 index 0000000..196f6fd Binary files /dev/null and b/Asset/BTF/LP_CURL_EXPRESSION_CREME-EN-MOUSSE_2025_BTF_MODULE_4D_MOB_600x450_3474637069131_3474637109738.jpg differ diff --git a/Asset/LP_CURL EXPRESSIÓN - REMOVE HIBISCO-39877_EDITED_OLIVER_180925_V1_AMZ_copy.csv b/Asset/LP_CURL EXPRESSIÓN - REMOVE HIBISCO-39877_EDITED_OLIVER_180925_V1_AMZ_copy.csv new file mode 100755 index 0000000..e61b158 --- /dev/null +++ b/Asset/LP_CURL EXPRESSIÓN - REMOVE HIBISCO-39877_EDITED_OLIVER_180925_V1_AMZ_copy.csv @@ -0,0 +1,10 @@ +DMI_Product_type,,L'Oréal Professionnel +Amazon - Product Name (Long),,L'Oréal Professionnel Curl Expression Leave-in hidratante intensivo de longa duração SERIE EXPERT 200ml Para todos os tipos de caracóis e ondas +Amazon Benefits,,Hidrata profundamente +Amazon - Bullet Features 1,,Hidratação de longa duração +Amazon - Bullet Features 2,,O leave-in hidratante de longa duração Curl Expression para ondas e caracóis +Amazon - Bullet Features 3,,Serie Expert Curl Expression, Expressa os teus caracóis de forma pro. +Amazon - Bullet Features 4,,Quando necessário +Amazon - Bullet Features 5,,Serie Expert +amazon_product_description_short,,[CUIDE OS SEUS CARACÓIS COMO UM PRO]: O leave-in hidratante de longa duração Curl Expression protege o cabelo até 230°C/450F com uma fórmula untuosa duradoura sem adicionar peso ao cabelo, de forma profissional. [ATIVOS ALTAMENTE CONCENTRADOS]: Com glicerina à base de plantas e Ureia HCom Glicerina à base de plantas, Ureia H e semente de hibisco para uns caracóis e ondas fortes e hidratadas. [EXPERIÊNCIA ÚNICA]: Esta fórmula sem parabenos deixa os caracóis e ondas intensamente hidratados e fortalecidos. [CODESENVOLVIDO COM ESPECIALISTAS EM CARACÓIS]: Com 4 especialistas internacionais em ondas e caracóis: Titus Magida da África do Sul(@call.me.titus), Vivi Siqueira do Brazil (@vivi_siqueira), Derick Monroe dos Estados Unidos (@derickmonroe) e Elodie Euston da França (@elodieeuston). +amazon_instruction_of_use,,Com o cabelo húmido, aplicar com os dedos desde os comprimentos até às pontas. diff --git a/Asset/btf_composer.html b/Asset/btf_composer.html new file mode 100755 index 0000000..efc1f90 --- /dev/null +++ b/Asset/btf_composer.html @@ -0,0 +1,959 @@ + + + + + + Amazon BTF Composer + + + +
+
+

Amazon BTF Composer

+

Build your Below The Fold content modules

+
+ + +
+
+
📸
+
Drop Product Images Here
+
or click to browse files
+ +
+
+
📊
+
Upload CSV Data
+
or click to browse file
+ +
+
+ + +
+
+

Uploaded Images

+
No images uploaded yet
+
+
+

CSV Data Preview

+
No CSV data loaded yet
+
+
+ + +
+
+

Module Library

+ + + + + +
+ +
+

BTF Module Stack

+
+
No modules added yet. Click a module from the library to add it.
+
+
+
+ + +
+ + + + + + + + +
+ + +
+

BTF Preview

+
+
No modules added yet
+
+
+
+ + + + + diff --git a/Asset/sample_premium.csv b/Asset/sample_premium.csv new file mode 100755 index 0000000..d42d941 --- /dev/null +++ b/Asset/sample_premium.csv @@ -0,0 +1,44 @@ +DMI_Product_type,,L'Oréal Professionnel +Amazon - Product Name (Long),,L'Oréal Professionnel Curl Expression Leave-in hidratante intensivo de longa duração SERIE EXPERT 200ml Para todos os tipos de caracóis e ondas +Amazon Benefits,,Hidrata profundamente +Amazon - Bullet Features 1,,Hidratação de longa duração +Amazon - Bullet Features 2,,O leave-in hidratante de longa duração Curl Expression para ondas e caracóis +Amazon - Bullet Features 3,,Serie Expert Curl Expression, Expressa os teus caracóis de forma pro. +Amazon - Bullet Features 4,,Quando necessário +Amazon - Bullet Features 5,,Serie Expert +amazon_product_description_short,,[CUIDE OS SEUS CARACÓIS COMO UM PRO]: O leave-in hidratante de longa duração Curl Expression protege o cabelo até 230°C/450F com uma fórmula untuosa duradoura sem adicionar peso ao cabelo, de forma profissional. [ATIVOS ALTAMENTE CONCENTRADOS]: Com glicerina à base de plantas e Ureia HCom Glicerina à base de plantas, Ureia H e semente de hibisco para uns caracóis e ondas fortes e hidratadas. [EXPERIÊNCIA ÚNICA]: Esta fórmula sem parabenos deixa os caracóis e ondas intensamente hidratados e fortalecidos. [CODESENVOLVIDO COM ESPECIALISTAS EM CARACÓIS]: Com 4 especialistas internacionais em ondas e caracóis: Titus Magida da África do Sul(@call.me.titus), Vivi Siqueira do Brazil (@vivi_siqueira), Derick Monroe dos Estados Unidos (@derickmonroe) e Elodie Euston da França (@elodieeuston). +amazon_instruction_of_use,,Com o cabelo húmido, aplicar com os dedos desde os comprimentos até às pontas. +premium_brand_story_text,,L'Oréal Professionnel has been at the forefront of hair care innovation for over 100 years. Our Curl Expression line represents the culmination of decades of research into curly hair needs, developed in partnership with curl specialists worldwide. This leave-in treatment combines cutting-edge science with natural ingredients to deliver professional results at home. +premium_comparison_sku_1_name,,Curl Expression 200ml +premium_comparison_sku_2_name,,Curl Expression 100ml +premium_comparison_sku_3_name,,Curl Expression 300ml +premium_comparison_attr_1,,Size +premium_comparison_sku_1_attr_1,,200ml +premium_comparison_sku_2_attr_1,,100ml +premium_comparison_sku_3_attr_1,,300ml +premium_comparison_attr_2,,Price +premium_comparison_sku_1_attr_2,,$24.99 +premium_comparison_sku_2_attr_2,,$14.99 +premium_comparison_sku_3_attr_2,,$34.99 +premium_comparison_attr_3,,Heat Protection +premium_comparison_sku_1_attr_3,,Up to 230°C +premium_comparison_sku_2_attr_3,,Up to 230°C +premium_comparison_sku_3_attr_3,,Up to 230°C +premium_comparison_attr_4,,Hair Types +premium_comparison_sku_1_attr_4,,All curl types +premium_comparison_sku_2_attr_4,,All curl types +premium_comparison_sku_3_attr_4,,All curl types +premium_comparison_attr_5,,Key Ingredient +premium_comparison_sku_1_attr_5,,3% Plant Glycerin +premium_comparison_sku_2_attr_5,,3% Plant Glycerin +premium_comparison_sku_3_attr_5,,3% Plant Glycerin +premium_faq_question_1,,How often should I use this product? +premium_faq_answer_1,,Use as needed, typically 2-3 times per week or whenever your curls need extra hydration and definition. +premium_faq_question_2,,Can I use this on color-treated hair? +premium_faq_answer_2,,Yes, this product is safe for color-treated hair and won't strip or fade your color. +premium_faq_question_3,,What's the difference between this and regular conditioner? +premium_faq_answer_3,,This is a leave-in treatment that provides continuous hydration and heat protection, while conditioner is rinsed out and provides temporary conditioning. +premium_faq_question_4,,Is this product suitable for fine hair? +premium_faq_answer_4,,Yes, the lightweight formula won't weigh down fine hair while still providing the hydration and definition your curls need. +premium_faq_question_5,,How long does one bottle last? +premium_faq_answer_5,,A 200ml bottle typically lasts 2-3 months with regular use, depending on hair length and thickness. diff --git a/BTF_Composer.zip b/BTF_Composer.zip new file mode 100755 index 0000000..d5abae0 Binary files /dev/null and b/BTF_Composer.zip differ diff --git a/LP_CURL_EXPRESSIONS_for_app.csv b/LP_CURL_EXPRESSIONS_for_app.csv new file mode 100755 index 0000000..e61b158 --- /dev/null +++ b/LP_CURL_EXPRESSIONS_for_app.csv @@ -0,0 +1,10 @@ +DMI_Product_type,,L'Oréal Professionnel +Amazon - Product Name (Long),,L'Oréal Professionnel Curl Expression Leave-in hidratante intensivo de longa duração SERIE EXPERT 200ml Para todos os tipos de caracóis e ondas +Amazon Benefits,,Hidrata profundamente +Amazon - Bullet Features 1,,Hidratação de longa duração +Amazon - Bullet Features 2,,O leave-in hidratante de longa duração Curl Expression para ondas e caracóis +Amazon - Bullet Features 3,,Serie Expert Curl Expression, Expressa os teus caracóis de forma pro. +Amazon - Bullet Features 4,,Quando necessário +Amazon - Bullet Features 5,,Serie Expert +amazon_product_description_short,,[CUIDE OS SEUS CARACÓIS COMO UM PRO]: O leave-in hidratante de longa duração Curl Expression protege o cabelo até 230°C/450F com uma fórmula untuosa duradoura sem adicionar peso ao cabelo, de forma profissional. [ATIVOS ALTAMENTE CONCENTRADOS]: Com glicerina à base de plantas e Ureia HCom Glicerina à base de plantas, Ureia H e semente de hibisco para uns caracóis e ondas fortes e hidratadas. [EXPERIÊNCIA ÚNICA]: Esta fórmula sem parabenos deixa os caracóis e ondas intensamente hidratados e fortalecidos. [CODESENVOLVIDO COM ESPECIALISTAS EM CARACÓIS]: Com 4 especialistas internacionais em ondas e caracóis: Titus Magida da África do Sul(@call.me.titus), Vivi Siqueira do Brazil (@vivi_siqueira), Derick Monroe dos Estados Unidos (@derickmonroe) e Elodie Euston da França (@elodieeuston). +amazon_instruction_of_use,,Com o cabelo húmido, aplicar com os dedos desde os comprimentos até às pontas. diff --git a/README.md b/README.md new file mode 100755 index 0000000..e854c53 --- /dev/null +++ b/README.md @@ -0,0 +1,123 @@ +# 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 +```csv +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. diff --git a/btf_composer.html b/btf_composer.html new file mode 100755 index 0000000..4420210 --- /dev/null +++ b/btf_composer.html @@ -0,0 +1,965 @@ + + + + + + Amazon BTF Composer + + + +
+
+

Amazon BTF Composer

+

Build your Below The Fold content modules

+
+ + +
+
+
📸
+
Drop Product Images Here
+
or click to browse files
+ +
+
+
📊
+
Upload CSV Data
+
or click to browse file
+ +
+
+ + +
+
+

Uploaded Images

+
No images uploaded yet
+
+
+

CSV Data Preview

+
No CSV data loaded yet
+
+
+ + +
+
+

Module Library

+ + + + + +
+ +
+

BTF Module Stack

+
+
No modules added yet. Click a module from the library to add it.
+
+
+
+ + +
+ + + + + + + + +
+ + +
+

BTF Preview

+
+
No modules added yet
+
+
+
+ + + + + diff --git a/index.html b/index.html new file mode 100755 index 0000000..baf10f3 --- /dev/null +++ b/index.html @@ -0,0 +1,1046 @@ + + + + + + Amazon PDP Mockup Generator + + + +
+
+

Amazon PDP Mockup Generator

+

Upload your product images and CSV data to create realistic Amazon product page mockups

+
+ +
+
+
📸
+
Drop JPG Images Here
+
or click to browse files
+ +
+ +
+
📊
+
Upload CSV Data
+
or click to browse file
+ +
+
+ +
+ +
+
+

Uploaded Images

+
+
No images uploaded yet
+
+
+ +
+

CSV Data Preview

+
+
No CSV data loaded yet
+
+
+
+ +
+
+

Amazon Product Page Mockup

+
+ + + + +
+
+
+
+

Amazon.com

+
+
+
+
+ Drop your main product image here +
+
+ +
+
+
+
Brand Name
+
Product Title
+ +
+ ★★★★★ + (4.5) 1,234 ratings +
+
$29.99
+
+
Key feature 1
+
Key feature 2
+
Key feature 3
+
+
+ Product description will appear here... +
+ +
+
+
+

From the brand

+
+
A+ Content Image 1
+
A+ Content Image 2
+
A+ Content Image 3
+
+
+
+
+
+ + + + + + + + + diff --git a/index_brand.html b/index_brand.html new file mode 100755 index 0000000..aacd753 --- /dev/null +++ b/index_brand.html @@ -0,0 +1,292 @@ + + + + + + Amazon PDP Mockup Generator – Brand Layout + + + +
+
+

Amazon PDP Mockup Generator — Brand Layout

+

Variant with A+ layout selector and order badges (self-contained)

+
+ +
+
+
📸
+
Drop JPG/PNG Images Here
+
or click to browse files
+ +
+ +
+
📊
+
Upload CSV Data
+
or click to browse file
+ +
+
+ +
+ +
+
+

Uploaded Images

+
No images uploaded yet
+
+
+

CSV Data Preview

+
No CSV data loaded yet
+
+
+ +
+
+

Amazon Product Page Mockup

+
+ + + + + +
+
+ +
+

Amazon.com

+
+
+
Drop your main product image here
+
+
+
+
Brand Name
+
Product Title
+ +
+
Product description will appear here...
+ +
+
+
+
+
+
+
+
+
+ + + + + + diff --git a/index_premium.html b/index_premium.html new file mode 100755 index 0000000..d299685 --- /dev/null +++ b/index_premium.html @@ -0,0 +1,597 @@ + + + + + + Amazon PDP Premium Mockup Generator + + + +
+
+

Amazon PDP Premium Mockup Generator

+

Upload assets, edit content, and generate professional mockups

+
+ + +
+
+
📸
+
Drop Product Images Here
+
or click to browse files
+ +
+
+
📊
+
Upload CSV Data
+
or click to browse file
+ +
+
+ + +
+
+

Uploaded Images

+
No images uploaded yet
+
+
+

CSV Data Preview

+
No CSV data loaded yet
+
+
+ +
+
+

Premium Modules

+
+ + + +
+
+
+ + +
+
+ + +
+
+ +
+ + + +
+
+
+
+ + + + +
+ +
+
+ +
+ + + +
+
+
+
+ + +
+ +
+
+ +
+ + + +
+
+
+ + +
+
+ + +
+
+ +
+ + + +
+
+
+
+ + + +
+ +
+
+ +
+ + + +
+
+
+
+ + +
+ +
+
+
+ +
+
+

Amazon Product Page Mockup

+
+ + + + + + +
+
+ +
+

Amazon.com

+
+
+
Drop your main product image here
+
+
+
+
Brand Name
+
Product Title
+ +
+
Product description will appear here...
+ +
+
+
+
+
+ +
+ + + + + + + + + + + +
+
+
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/sample.csv b/sample.csv new file mode 100755 index 0000000..de446c7 --- /dev/null +++ b/sample.csv @@ -0,0 +1,12 @@ +field,content +brand_name,L'Oréal Paris +product_title,Advanced Hair Serum - Keratin Infused 100ml +bullet_1,Professional-grade formula with keratin complex for stronger hair +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 that combines the power of keratin with nourishing ingredients. This professional-grade formula penetrates deep into the hair shaft to repair damage, reduce frizz, and add natural shine. Perfect for daily use, this serum is suitable for all hair types and leaves your hair feeling silky smooth and manageable. +price,$24.99 +rating,4.5 +review_count,1234 diff --git a/sample_premium.csv b/sample_premium.csv new file mode 100755 index 0000000..d42d941 --- /dev/null +++ b/sample_premium.csv @@ -0,0 +1,44 @@ +DMI_Product_type,,L'Oréal Professionnel +Amazon - Product Name (Long),,L'Oréal Professionnel Curl Expression Leave-in hidratante intensivo de longa duração SERIE EXPERT 200ml Para todos os tipos de caracóis e ondas +Amazon Benefits,,Hidrata profundamente +Amazon - Bullet Features 1,,Hidratação de longa duração +Amazon - Bullet Features 2,,O leave-in hidratante de longa duração Curl Expression para ondas e caracóis +Amazon - Bullet Features 3,,Serie Expert Curl Expression, Expressa os teus caracóis de forma pro. +Amazon - Bullet Features 4,,Quando necessário +Amazon - Bullet Features 5,,Serie Expert +amazon_product_description_short,,[CUIDE OS SEUS CARACÓIS COMO UM PRO]: O leave-in hidratante de longa duração Curl Expression protege o cabelo até 230°C/450F com uma fórmula untuosa duradoura sem adicionar peso ao cabelo, de forma profissional. [ATIVOS ALTAMENTE CONCENTRADOS]: Com glicerina à base de plantas e Ureia HCom Glicerina à base de plantas, Ureia H e semente de hibisco para uns caracóis e ondas fortes e hidratadas. [EXPERIÊNCIA ÚNICA]: Esta fórmula sem parabenos deixa os caracóis e ondas intensamente hidratados e fortalecidos. [CODESENVOLVIDO COM ESPECIALISTAS EM CARACÓIS]: Com 4 especialistas internacionais em ondas e caracóis: Titus Magida da África do Sul(@call.me.titus), Vivi Siqueira do Brazil (@vivi_siqueira), Derick Monroe dos Estados Unidos (@derickmonroe) e Elodie Euston da França (@elodieeuston). +amazon_instruction_of_use,,Com o cabelo húmido, aplicar com os dedos desde os comprimentos até às pontas. +premium_brand_story_text,,L'Oréal Professionnel has been at the forefront of hair care innovation for over 100 years. Our Curl Expression line represents the culmination of decades of research into curly hair needs, developed in partnership with curl specialists worldwide. This leave-in treatment combines cutting-edge science with natural ingredients to deliver professional results at home. +premium_comparison_sku_1_name,,Curl Expression 200ml +premium_comparison_sku_2_name,,Curl Expression 100ml +premium_comparison_sku_3_name,,Curl Expression 300ml +premium_comparison_attr_1,,Size +premium_comparison_sku_1_attr_1,,200ml +premium_comparison_sku_2_attr_1,,100ml +premium_comparison_sku_3_attr_1,,300ml +premium_comparison_attr_2,,Price +premium_comparison_sku_1_attr_2,,$24.99 +premium_comparison_sku_2_attr_2,,$14.99 +premium_comparison_sku_3_attr_2,,$34.99 +premium_comparison_attr_3,,Heat Protection +premium_comparison_sku_1_attr_3,,Up to 230°C +premium_comparison_sku_2_attr_3,,Up to 230°C +premium_comparison_sku_3_attr_3,,Up to 230°C +premium_comparison_attr_4,,Hair Types +premium_comparison_sku_1_attr_4,,All curl types +premium_comparison_sku_2_attr_4,,All curl types +premium_comparison_sku_3_attr_4,,All curl types +premium_comparison_attr_5,,Key Ingredient +premium_comparison_sku_1_attr_5,,3% Plant Glycerin +premium_comparison_sku_2_attr_5,,3% Plant Glycerin +premium_comparison_sku_3_attr_5,,3% Plant Glycerin +premium_faq_question_1,,How often should I use this product? +premium_faq_answer_1,,Use as needed, typically 2-3 times per week or whenever your curls need extra hydration and definition. +premium_faq_question_2,,Can I use this on color-treated hair? +premium_faq_answer_2,,Yes, this product is safe for color-treated hair and won't strip or fade your color. +premium_faq_question_3,,What's the difference between this and regular conditioner? +premium_faq_answer_3,,This is a leave-in treatment that provides continuous hydration and heat protection, while conditioner is rinsed out and provides temporary conditioning. +premium_faq_question_4,,Is this product suitable for fine hair? +premium_faq_answer_4,,Yes, the lightweight formula won't weigh down fine hair while still providing the hydration and definition your curls need. +premium_faq_question_5,,How long does one bottle last? +premium_faq_answer_5,,A 200ml bottle typically lasts 2-3 months with regular use, depending on hair length and thickness.