Side By Side
Two product cards placed next to each other with a plus sign and combined price. Use it to pair complementary items and lift the average order total.
Two product cards placed next to each other with a plus sign and combined price. Use it to pair complementary items and lift the average order total.
Search blocks by description or jump to a page.
Side By Side is a two-column bundle upsell layout. The left column holds a large product card with a square image, the product name, a short description, and the base price. The right column lists the recommended add-ons, each as its own card with a checkbox, a thumbnail, a name, a description, the sale price, the original price struck through, and a badge showing the per-item saving. Below the two columns a full-width Bundle Summary card lines up every selected item with its price, shows the percentage discount applied to the subtotal, and resolves to a total with a running savings figure. The "Add Bundle to Cart" button stays disabled until at least one add-on is checked.
All copy, prices, and item counts come from props, so you can swap in your own main product and any number of add-ons. The bundle discount percentage, the add-on list, and the summary footer are all independent; you can remove add-ons, change the discount, or reorder items without affecting the rest of the layout.
Reach for this block on a product detail page for a logistics or delivery platform when you want to pair a core offering with optional extras such as insurance, expedited handling, or tracking upgrades. It works better than the Comparison variant when you have three or more distinct add-ons rather than one alternative package, because the checkbox list scales cleanly and the live summary keeps the shopper oriented as they build their order.
A natural flow around it on an Ecommerce page:
Before
After
The most direct use is pairing a physical or digital product with the accessories or service tiers your customers most often buy alongside it. A few other ways to use the frame:
Tip: keep add-ons to three or four items so the right column stays roughly the same height as the product card and the layout reads as a true pair.