Shopping Cart 27 block design & features
A page shopping cart made with shadcn/ui that splits the bag from a shelf of saved items. A heading and item count sit above a bordered list of bag items, each with a portrait product photo, name, colour and size, price, and Save for later and Remove links. Below the list, a Saved for later row shows square photo cards with name, price and a Move to bag button, while an order summary column on the right lists subtotal, shipping, estimated tax and total above a checkout button.
Saving an item takes it out of the bag and places it first on the shelf, and moving it back returns it to its original position in the list, with the summary recalculating each time. Removing an item leaves a quiet one-line notice in its place with an Undo link instead of deleting it outright. Rows and cards fade in as they move, the palette is neutral with hairline dividers and rounded photos, and the motion is switched off when reduced motion is preferred.
The block feels calm and retail-ready, close to the bag pages of larger fashion stores, and the visible shelf of saved products is a less common touch for a cart. It is moderately complex and image-driven, needing a product photo for every bag and saved item. On small screens the summary drops below the bag and the shelf shows two cards per row.