Search blocks by description or jump to a page.
A clean cart layout with product images, quantity steppers, and an order summary. Suits a full cart page where shoppers review items before checkout.
Modern Cart is a full cart page laid out in two columns. The wider left column holds a heading with a live item count followed by a vertical stack of product cards. Each card shows a product image on the left, the item name, color, and size on the right, a minus/plus quantity stepper that respects the item's stock ceiling, a trash button to remove the line, and a line total that updates immediately. When an item carries an original price, a struck-through figure appears below the current price.
The narrower right column holds the order summary card. At the top a dropdown lets the buyer choose between Standard and Express shipping, each showing its name, estimated delivery window, and price. Below that is a promo code field with an Apply button. A running breakdown of subtotal, shipping, and total follows, then a small row of trust signals (free returns, secure payment, fast delivery), and finally a full-width checkout button.
Reach for this block when the cart is a dedicated page rather than a flyout or overlay. It has room to show product detail clearly and lets the buyer make decisions, such as adjusting quantities or choosing a shipping tier, before they commit. For an HR or hiring platform selling seat-based plans, assessments, or onboarding bundles, the two-column layout gives buyers space to confirm exactly what they are purchasing and at what cost before proceeding to payment.
A natural flow around it on an Ecommerce page:
Before
After
The cart ships with two demo items and two shipping options, all editable in the initial state arrays. A few other parts worth adapting:
Tip: if your platform sells digital goods or services with no physical shipping, remove the shipping method selector and pass a fixed zero shipping value so the summary still calculates correctly.