CGW-Quote-Builder/information/FOREGROUND_QUICKSTART.md

Quick Start: Adding Foreground Layers to Your Products

Overview

Your product finder now supports foreground layers - perfect for adding plants, decorative elements, or any items that should appear in front of the product.

Layer Order (back to front)

1. Base (z-index: 1) - House/background
2. Door (z-index: 2) - Door/window (changes with color)
3. Hardware (z-index: 3) - Handles/locks
4. Overlay (z-index: 4) - Glass views
5. Foreground (z-index: 5) - Plants/decorative items ⭐ NEW!

Quick Implementation Steps

Step 1: Prepare Your Foreground Image

1. Create/photograph decorative elements (plants, porch items, etc.)
2. Remove background (make transparent)
3. Save as PNG
4. Match dimensions with your base layer image

Step 2: Save File to Correct Location

app/images/products/YOUR-PRODUCT-CODE/foreground.png

Example:

app/images/products/600/
├── house-background.jpg
├── door-white.png
├── door-black.png
├── handle-silver.png
└── plants.png          ← Your new foreground layer

Step 3: Update Product JSON

Edit your product in app/data/products.json:

{
  "productCode": "600",
  "description": "Your Product Name",
  "colors": ["White", "Black", "Bronze"],
  "imageConfig": {
    "layered": true,
    "basePath": "images/products/600/",
    "layers": {
      "base": "house-background.jpg",
      "door": {
        "white": "door-white.png",
        "black": "door-black.png",
        "bronze": "door-bronze.png"
      },
      "hardware": "handle-silver.png",
      "foreground": "plants.png"     ← Add this line
    }
  }
}

Step 4: Test

1. Save changes
2. Refresh your browser
3. Navigate to the product
4. The foreground layer should now appear on top of everything

Tips for Best Results

Good Foreground Elements

✅ Potted plants at corners of frame ✅ Hanging baskets to the side ✅ Partial porch railings ✅ Seasonal decorations (wreaths, pumpkins)

Avoid

❌ Obscuring important product details ❌ Elements too large or too busy ❌ Mismatched lighting/shadows ❌ Low-quality or pixelated images

Example Products

See these files for complete examples:

• information/FOREGROUND_LAYER_EXAMPLE.md - Detailed guide
• information/products-layered-example.json - Product #600 example
• information/LAYERED_IMAGES.md - Full layered system guide

Troubleshooting

Foreground not showing?

• Check file path in JSON matches actual file location
• Ensure "layered": true is set
• Verify PNG has transparency
• Check browser console for 404 errors

Foreground blocking clicks?

• This shouldn't happen - the layer has pointer-events: none
• If it does, check CSS for .layer-foreground

Image quality issues?

• Use PNG-24 format
• Match base layer dimensions
• Optimize file size with TinyPNG or similar

File Sizes & Performance

• Target: 50-200KB for foreground PNG
• Optimize images before uploading
• Browser caches layers after first load

Need Help?

Check the detailed documentation:

• information/FOREGROUND_LAYER_EXAMPLE.md - Complete guide with tips
• information/LAYERED_IMAGES.md - Full layered system documentation