Shop The Look 9 block design & features
ShopTheLook9 pairs a checklist with a full-length outfit photo in this Shadcn UI block. On the left a heading and description sit above five rows, each with a custom checkbox, the piece name, a short detail and a price. Below the list a small summary shows how many pieces are chosen, the subtotal, a discount line, a large running total and a hint about how many pieces are left to save, followed by an add to bag button. On the right a tall boardwalk photo carries a round pin on the hat, blouse, belt, jeans and boots.
Ticking a row or tapping its pin toggles the piece in both places at once. Chosen pins turn solid with a check while the others show a plus, unticked rows fade to muted text, and the total counts smoothly to its new value instead of jumping. When the last piece is added a green discount line slides open and the hint changes to say the outfit is complete. The styling is flat and neutral, with hairline dividers, small rounded checkboxes and the photo doing the visual work.
It feels practical and quietly persuasive, a fresh spin on bundle upsells that keeps the outfit photo at the centre of the decision. Complexity is moderate and mostly in the state rather than the visuals. It needs one outfit photo and a name, detail, price and pin position for each piece, and the discount rate and starting selection are props. On small screens the photo moves above the checklist.