A fashion storefront shipped Shop the Look on Centra PDPs. Editors author Look documents in Sanity: lifestyle image, LookPins with x/y hotspots, Centra product links on each pin. Soft rule in the CMS: one Look per display-item URI so merchandising does not stack competing outfits on the same SKU page.
Storefront load is boring on purpose. GROQ lookByDisplayUri fetches the Look for the current PDP URI. mapLookDocumentToView turns Sanity shapes into view models. Each pin hydrates with live product and quick-add data from Centra. The server function can sit behind 'use cache: remote' with a five-minute cache life so editorial churn does not hammer Sanity on every PDP view.
UI stacks as SectionShopTheLook plus ShopTheLookProvider. State tracks lookIndex, activePinKey, sizeByPinKey, and sizeErrorByPinKey. Switching looks reseeds size selections and clears pin focus and errors so stale chip state from Look A does not leak into Look B.
The trap is coordinate space. Editors mark hotspots on the full uploaded image. The storefront renders that media in a 3:4 frame with object-cover. CSS crops what does not fit. Raw x/y from Sanity describe the uncropped bitmap. Drop them straight onto the crop and the dots float beside the blazer hem.
resolveCoverPinPosition remaps pin x/y when image aspect differs from 3/4. Wide frames lose left and right; tall frames lose top and bottom. One function at the boundary beats per-pin CSS hacks.
One-size SKUs need the same care. seedOneSizeSelections auto-picks the only available variant so Add all is not blocked by a fake size picker. If that lone variant is unavailable, it stays unseeded. Do not pretend the shopper picked a size that cannot ship.
Stylist chrome dropped a signature webfont. StylistSignature is a fixed SVG path atom now. The CMS no longer wires stylistName into font loading, which saves a render-blocking face for a decorative flourish.
CMS hotspots vs object-cover crop
Editors mark pins on the full lifestyle frame. The PDP shows a 3:4 cover crop. Toggle aspect ratio and remapping to see dots drift or land on the garment.
Red dots use Sanity x/y directly on the crop. Primary dots run through resolveCoverPinPosition once when image aspect differs from 3/4.
Toggle wide vs tall source aspect. Raw CMS pins miss the garment on the crop. Remapped pins land where the editor intended.
Hotspots live in image space. object-fit: cover lives in layout space. Remap once, then hydrate Centra products on honest coordinates.
Happy coding! Sander