Ecommerce Hero 5 block design & features
This ecommerce hero is one full-bleed lifestyle photo with a shoppable look. Round pins sit on the hat, blouse, bag and jeans; clicking a pin opens a small product card next to it with the product detail, name, price and an Add to bag button. It is built with shadcn/ui.
A solid panel on the left carries the heading, a short description, a list of every piece in the look with its price and a Shop the full look button. Hovering or focusing a row in the list opens the matching pin on the photo, so the two always point at the same product.
The photo is sized like a cover image but keeps its own aspect ratio, so the pins stay on the right spot at every screen size. The heading, description, button, photo with its focus point, the products with their pin positions and the pin open on load are props. On mobile the panel moves to the bottom and the pins work as toggles without the floating cards.