Search blocks by description or jump to a page.
A bundle builder where shoppers pick add on products and watch the total update live. Use it on product pages to grow order value before checkout.
Bundle Builder opens with a prominent base product card: a large image on the left, a "Base Product" badge, the product name, description, and price on the right. Below it sits a "Customize Your Bundle" section that lists each add-on as its own card showing a small thumbnail, name, short description, individual price, and a toggle switch. A live counter above the list tracks how many add-ons are currently selected. At the bottom a sticky summary card shows the running bundle total and a single "Add Bundle to Cart" button that stays in view as the shopper scrolls.
The base product and the add-on list are both passed as props, so you can replace the demo headphones content with your own product and any number of extras. Add-on cards that are toggled on get a tinted border to signal selection. The summary card, the counter label, and the individual add-on cards are all independent, so you can adjust copy or remove items without restructuring the layout.
Reach for this block on a product detail page when you want to let shoppers build their own package before they commit to checkout. It works especially well for creative agencies or studios selling a core service or deliverable alongside optional extras such as rush turnaround, extended revisions, or a source-file package. Because every selection updates the total in real time, shoppers understand exactly what they are buying rather than discovering costs at checkout.
A natural flow around it on an Ecommerce page:
Before
After
Each part of the block maps directly to a prop or a list item, so most changes are straightforward swaps:
Tip: keep add-on prices noticeably lower than the base product price so the running total feels like a bargain rather than a surprise.