# 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`:

```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](FOREGROUND_LAYER_EXAMPLE.md) - Detailed guide
- [information/products-layered-example.json](products-layered-example.json) - Product #600 example
- [information/LAYERED_IMAGES.md](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