diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index 6610e31..b2d4f38 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -1061,6 +1061,31 @@ export default function DesignCanvas({
         backGuides.forEach((g) => g.show());
       }
 
+      // Capture placement preview (design on product)
+      let frontPlacementUrl: string | null = null;
+      const getPhotoInfo = (v: 'front' | 'back') => {
+        const colorPhoto = v === 'front' ? product.colorPhotos[color] : product.colorPhotosBack[color];
+        if (colorPhoto) return { url: colorPhoto, tint: false };
+        const activePhoto = v === 'front' ? product.imageUrl : product.imageUrlBack;
+        if (activePhoto && product.photoRecolorable) return { url: activePhoto, tint: true };
+        return activePhoto ? { url: activePhoto, tint: false } : null;
+      };
+      const photoInfo = getPhotoInfo('front');
+      const box = {
+        left: frontPrintArea.xPct * DISPLAY,
+        top: frontPrintArea.yPct * DISPLAY,
+        w: frontPrintArea.wPct * DISPLAY,
+        h: frontPrintArea.hPct * DISPLAY,
+      };
+      if (photoInfo) {
+        frontPlacementUrl = await composePlacementImage(
+          photoInfo.url,
+          photoInfo.tint ? { tint: true, color } : null,
+          frontStage,
+          box,
+        ).catch(() => null);
+      }
+
       // Send to API with the new preview images
       const res = await fetch(`/api/designs/${id}/send-to-customer`, {
         method: 'POST',
@@ -1068,6 +1093,7 @@ export default function DesignCanvas({
         body: JSON.stringify({
           designPreviewUrl: frontDataUrl,
           designPreviewUrlBack: backDataUrl,
+          placementPreviewUrl: frontPlacementUrl,
         }),
       });