← back to CelebritySignatures
wear: bigger/higher placement, add pocket-tee, fix preview left/right mismatch (TK-10286)
e887506f98230d42a5192ec69dbd5d526e1610ea · 2026-09-08 11:13:58 -0700 · Steve Abrams
Still fully gated off (WEAR_SALES_LIVE unset, checkout returns comingSoon).
1. Bigger + higher (Steve's call, 2026-09-08): iterated 2 more throwaway
draft products (tee + polo) against real Printify mockups to land on
x:0.7, y:0.13, scale:0.22 — the signature now sits at pocket-top height
and is legibly sized, not the smaller/lower size from the prior commit.
2. New garment: pocket-tee (Bella+Canvas 3021 Unisex Pocket Tee, blueprint
1358, provider 99 Printify Choice). Prints the signature directly ON the
physical pocket via Printify's dedicated 'pocket' placeholder (not
'front') — verified with a real throwaway draft product + mockup, deleted
+ confirmed gone via 404. White-only, S/M/L/2XL (Printify's own catalog
has no White/XL or Deep-Heather/L+ for this blueprint's pocket-DTG combo
on either available provider — a real catalog gap, not an oversight).
public/wear.html now draws an actual patch-pocket shape (fill + hem line)
for garments with a real pocket, instead of the generic dashed hint.
3. FOUND AND FIXED a real preview/product mismatch: the on-site canvas
preview placed the signature at viewer-LEFT (pocketBox x:128 of a 400-wide
canvas), but the real Printify print — verified via mockups this session —
lands at viewer-RIGHT (wearer's left chest, industry-standard placement).
Customers were previously shown a preview that didn't match what they'd
actually receive. Mirrored pocketBox for classic-tee and polo to match.
Verified: node --check clean, JSON valid, local E2E shows 3 garments
(classic-tee/polo/pocket-tee), pocket-tee has 4 mapped variants, checkout
still comingSoon:true. Playwright screenshots of the actual on-site canvas
confirm correct mirrored placement + working pocket-tee rendering + the
black-polo light-recolor fix still holds at the new position.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AmxcNKtFg77wP47uZq5Zsm
Files touched
M data/wear-templates.jsonM public/wear.html
Diff
commit e887506f98230d42a5192ec69dbd5d526e1610ea
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue Sep 8 11:13:58 2026 -0700
wear: bigger/higher placement, add pocket-tee, fix preview left/right mismatch (TK-10286)
Still fully gated off (WEAR_SALES_LIVE unset, checkout returns comingSoon).
1. Bigger + higher (Steve's call, 2026-09-08): iterated 2 more throwaway
draft products (tee + polo) against real Printify mockups to land on
x:0.7, y:0.13, scale:0.22 — the signature now sits at pocket-top height
and is legibly sized, not the smaller/lower size from the prior commit.
2. New garment: pocket-tee (Bella+Canvas 3021 Unisex Pocket Tee, blueprint
1358, provider 99 Printify Choice). Prints the signature directly ON the
physical pocket via Printify's dedicated 'pocket' placeholder (not
'front') — verified with a real throwaway draft product + mockup, deleted
+ confirmed gone via 404. White-only, S/M/L/2XL (Printify's own catalog
has no White/XL or Deep-Heather/L+ for this blueprint's pocket-DTG combo
on either available provider — a real catalog gap, not an oversight).
public/wear.html now draws an actual patch-pocket shape (fill + hem line)
for garments with a real pocket, instead of the generic dashed hint.
3. FOUND AND FIXED a real preview/product mismatch: the on-site canvas
preview placed the signature at viewer-LEFT (pocketBox x:128 of a 400-wide
canvas), but the real Printify print — verified via mockups this session —
lands at viewer-RIGHT (wearer's left chest, industry-standard placement).
Customers were previously shown a preview that didn't match what they'd
actually receive. Mirrored pocketBox for classic-tee and polo to match.
Verified: node --check clean, JSON valid, local E2E shows 3 garments
(classic-tee/polo/pocket-tee), pocket-tee has 4 mapped variants, checkout
still comingSoon:true. Playwright screenshots of the actual on-site canvas
confirm correct mirrored placement + working pocket-tee rendering + the
black-polo light-recolor fix still holds at the new position.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AmxcNKtFg77wP47uZq5Zsm
---
data/wear-templates.json | 68 +++++++++++++++++++++++++++++++++++++++++++++---
public/wear.html | 14 +++++++---
2 files changed, 76 insertions(+), 6 deletions(-)
diff --git a/data/wear-templates.json b/data/wear-templates.json
index 9cccbdd..4934d82 100644
--- a/data/wear-templates.json
+++ b/data/wear-templates.json
@@ -1,5 +1,5 @@
{
- "_note": "Garment TEMPLATES for the /wear left-chest signature apparel feature. Each garment is pure geometry: an SVG viewBox + body path (drawn on canvas via new Path2D), optional accent paths (collar/placket), a set of LIGHT colorways (dark garments deferred — a black signature renders via canvas 'multiply', which needs a light ground), and the pocketBox: the normalized left-chest placement rectangle (viewer-left upper chest = the POD 'left chest' placement Steve asked for). The same pocketBox + path re-render at print resolution when live POD wiring is added.",
+ "_note": "Garment TEMPLATES for the /wear left-chest signature apparel feature. Each garment is pure geometry: an SVG viewBox + body path (drawn on canvas via new Path2D), optional accent paths (collar/placket/pocket), a set of LIGHT colorways (dark garments deferred — a black signature renders via canvas 'multiply', which needs a light ground; the polo's black exception got a separate renderer fix, see public/wear.html), and the pocketBox: the left-chest placement rectangle. CORRECTED 2026-09-08 — pocketBox is viewer-RIGHT (wearer's LEFT chest, the industry-standard 'left chest' placement), matching the real Printify print position verified that day; it was previously viewer-left, which did not match what actually printed.",
"placement": "left_chest",
"printAreaInches": {
"w": 4,
@@ -26,7 +26,7 @@
"bodyPath": "M150 62 L120 72 L58 112 L40 178 L112 168 L112 430 L288 430 L288 168 L360 178 L342 112 L280 72 L250 62 Q200 104 150 62 Z",
"accents": [],
"pocketBox": {
- "x": 128,
+ "x": 176,
"y": 150,
"w": 96,
"h": 78
@@ -109,7 +109,7 @@
}
],
"pocketBox": {
- "x": 128,
+ "x": 180,
"y": 158,
"w": 92,
"h": 74
@@ -149,6 +149,68 @@
"sizeUpchargeUsd": {
"2XL": 4
}
+ },
+ {
+ "id": "pocket-tee",
+ "label": "Pocket Tee",
+ "priceUsd": 36,
+ "sizes": [
+ "S",
+ "M",
+ "L",
+ "2XL"
+ ],
+ "_note_sizes": "No XL — Printify's own catalog has no White/XL variant for this blueprint's pocket-DTG placeholder (checked both providers, same gap). Real catalog limit, not an oversight.",
+ "viewBox": [
+ 0,
+ 0,
+ 400,
+ 480
+ ],
+ "bodyPath": "M150 62 L120 72 L58 112 L40 178 L112 168 L112 430 L288 430 L288 168 L360 178 L342 112 L280 72 L250 62 Q200 104 150 62 Z",
+ "accents": [],
+ "pocketAccent": {
+ "d": "M176 150 L272 150 L272 214 Q272 222 264 222 L184 222 Q176 222 176 214 Z",
+ "fillShade": -0.05
+ },
+ "pocketHem": {
+ "d": "M176 160 L272 160 L272 163 L176 163 Z",
+ "fillShade": -0.12
+ },
+ "pocketBox": {
+ "x": 184,
+ "y": 168,
+ "w": 80,
+ "h": 46
+ },
+ "colors": [
+ {
+ "id": "white",
+ "label": "White",
+ "hex": "#f6f4ef",
+ "ink": "#1a1a1a"
+ }
+ ],
+ "_note_colors": "White-only (Steve asked for a pocket-tee variant, 2026-09-08) — Deep Heather only has S/M in Printify's catalog for this blueprint's pocket placeholder, too gappy to offer alongside white's own S/M/L/2XL gap (no XL). Signature prints directly ON the pocket (Printify's dedicated 'pocket' placeholder), not just near it.",
+ "printful": {
+ "_note": "Not mapped — Printful path not built for this garment yet. Printify only, same as the rest of /wear until Steve provides a PRINTFUL_API_KEY.",
+ "suggestedProduct": "Bella+Canvas 3021 Unisex Pocket Tee",
+ "productId": null,
+ "placementType": "front",
+ "variants": {}
+ },
+ "printify": {
+ "_note": "Bella+Canvas 3021 Unisex Pocket Tee, print provider 99 (Printify Choice), DTG. Mapped + VERIFIED 2026-09-08 via a real throwaway draft product (created, mockup fetched and inspected, deleted, delete confirmed via 404) — prints directly on the pocket using Printify's dedicated 'pocket' print placeholder (not 'front'), x:0.5/y:0.5/scale:0.85 fills the pocket nicely without overflowing it.",
+ "blueprintId": 1358,
+ "printProviderId": 99,
+ "printPosition": { "placeholder": "pocket", "scale": 0.85, "x": 0.5, "y": 0.5 },
+ "variants": {
+ "white/S": 102538, "white/M": 102539, "white/L": 102540, "white/2XL": 102542
+ }
+ },
+ "sizeUpchargeUsd": {
+ "2XL": 4
+ }
}
]
}
diff --git a/public/wear.html b/public/wear.html
index 64fd3c0..e69b55b 100644
--- a/public/wear.html
+++ b/public/wear.html
@@ -222,10 +222,18 @@ function draw(){
ctx.lineWidth=1.2; ctx.strokeStyle=shade(col.hex,-0.16); ctx.stroke(body);
// accents (collar/placket)
(g.accents||[]).forEach(a=>{ const p=new Path2D(a.d); ctx.fillStyle=shade(col.hex, a.fillShade||-0.06); ctx.fill(p); });
- // subtle pocket hint
const pb = g.pocketBox;
- ctx.strokeStyle=shade(col.hex,-0.10); ctx.setLineDash([4,4]); ctx.lineWidth=1;
- ctx.strokeRect(pb.x,pb.y,pb.w,pb.h); ctx.setLineDash([]);
+ if (g.pocketAccent){
+ // a real sewn-on patch pocket (pocket-tee): filled shape + a hem line, the
+ // signature prints ON it (matches Printify's dedicated 'pocket' placement).
+ ctx.fillStyle=shade(col.hex, g.pocketAccent.fillShade||-0.05); ctx.fill(new Path2D(g.pocketAccent.d));
+ ctx.strokeStyle=shade(col.hex,-0.18); ctx.lineWidth=1; ctx.stroke(new Path2D(g.pocketAccent.d));
+ if (g.pocketHem) { ctx.fillStyle=shade(col.hex, g.pocketHem.fillShade||-0.12); ctx.fill(new Path2D(g.pocketHem.d)); }
+ } else {
+ // no real pocket on this garment — just a subtle placement hint
+ ctx.strokeStyle=shade(col.hex,-0.10); ctx.setLineDash([4,4]); ctx.lineWidth=1;
+ ctx.strokeRect(pb.x,pb.y,pb.w,pb.h); ctx.setLineDash([]);
+ }
// signature into the pocket box, contain-fit. Light cloth: 'multiply' so the
// dark ink shows through. Dark cloth: multiply would render invisible (it can
// only darken), so recolor the signature to a light ink and composite normally.
← dcec53c auto-data-snapshot: 2026-09-08T10:58:37 (1 data files) — dat
·
back to CelebritySignatures
·
wear: dial print size back down to standard small left-chest 06e1b9d →