Search blocks by description or jump to a page.
A vertical stack of bundle items with running totals and one add to cart action. Use it on mobile product pages to offer matching extras as shoppers scroll.
Stack is a vertical bundle upsell panel. A centered heading and a discount callout sit at the top, followed by a highlighted main product card showing the item image, name, optional description, current price, and a "Selected" badge. Below it, each upsell item appears in its own card with an image, name, price, and an Add or Remove button that toggles the item in and out of the selection. A summary card at the bottom shows the running item count, the live total, a savings line when the bundle discount kicks in, a green banner confirming the discount once two or more items are selected, and a single "Add Selected to Cart" button.
All copy is passed in as props, so the heading, discount rate, main product details, and each upsell item are fully replaceable. You can pass one upsell item or several, and the summary adjusts automatically. The footer note beneath the button is also just text and can be swapped or removed.
Reach for this block when a product page needs to surface complementary extras without sending the shopper to a separate page. On a real estate marketplace the pattern translates naturally: a core listing package is always selected, and optional add-ons such as a professional photography session, a floor plan report, or a featured placement can be toggled in before checkout. The vertical stacking works well on mobile where side by side layouts compress uncomfortably, and the live total keeps the value proposition visible as selections change.
A natural flow around it on an Ecommerce page:
Before
After
The frame works for any product with one anchored item and a short list of optional add-ons. A few real estate adjacent ways to fill it:
Tip: keep the upsell list to three or four items so the summary card stays visible without scrolling on a phone screen.