Product Detail 42 block design & features
A full-width hero photo sits above a two-column product layout. The left column holds the product name, price, description and a details list, and the right column holds size options and the buy button. The color swatches live as a vertical rail on the right edge of the hero, built with shadcn/ui and native radio inputs, so arrow keys move between colorways.
Picking a color sweeps the new photo across the old one with a diagonal clip-path band that runs forward or backward depending on which way you moved along the rail. A ring glides between swatches and the colorway word in the title rolls up or down to match. Swiping the hero horizontally steps through the in-stock colors. Colors, images, sizes and copy all come from one data object, and sold out options are disabled.
On small screens the hero becomes square, the rail stays on the image edge, and the buy panel moves under the title. With reduced motion turned on, the wipe becomes a short crossfade.