Marketing Atlas
한국어
₩ Pricing & promotion

Bundle pricing

번들 가격

Combine related products into a single offer with a different total value.

···
html
<div class="bundle"><div class="items"><button data-price="24" class="on">A <small>$24</small></button><span>+</span><button data-price="18" class="on">B <small>$18</small></button><span>+</span><button data-price="12" class="on">C <small>$12</small></button></div><div class="totals"><div>SEPARATE <s id="sum">$54</s></div><div class="deal">BUNDLE <strong id="deal">$42</strong></div></div><div class="hint">TAP ITEMS TO COMPARE</div></div>
css
.bundle{width:min(94%,570px);font:800 clamp(10px,max(1.8vmin,1vw),15px)/1.2 sans-serif}.items{display:flex;justify-content:center;align-items:center;gap:clamp(4px,1vw,14px)}.items button{width:clamp(52px,15vmin,120px);height:clamp(52px,15vmin,120px);border:2px solid var(--line);background:var(--surface);color:var(--fg);font:900 clamp(18px,4vmin,38px)/1 sans-serif;cursor:pointer;transition:.25s}.items button.on{border-color:var(--accent);box-shadow:5px 5px 0 var(--accent)}.items button:not(.on){opacity:.4}.items small{display:block;margin-top:5px;font-size:clamp(10px,max(1.7vmin,1vw),14px)}.totals{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(15px,4vmin,30px);gap:10px}.totals>div{background:var(--surface);padding:clamp(8px,2vmin,16px);border:1px solid var(--line);flex:1}.totals s,.totals strong{display:block;margin-top:4px;font-size:clamp(17px,4vmin,34px)}.deal{color:var(--accent)}.hint{text-align:center;color:var(--muted);margin-top:10px;font-size:clamp(10px,max(1.5vmin,1vw),12px);letter-spacing:.1em}@media(min-width:700px){body>:first-child{transform:scale(1.25);transform-origin:center}}
js
const buttons=[...document.querySelectorAll('[data-price]')];const sum=document.querySelector('#sum');const deal=document.querySelector('#deal');function update(){const total=buttons.filter(b=>b.classList.contains('on')).reduce((n,b)=>n+Number(b.dataset.price),0);sum.textContent='$'+total;deal.textContent='$'+Math.max(0,total-(buttons.every(b=>b.classList.contains('on'))?12:0))}buttons.forEach(b=>b.addEventListener('click',()=>{b.classList.toggle('on');update()}));setTimeout(()=>{buttons[2].classList.remove('on');update()},700);setTimeout(()=>{buttons[2].classList.add('on');update()},1500);
···

Value-based pricing가치 기반 가격

Set price around the outcome customers value, rather than cost alone.

···

Cost-plus pricing원가 가산 가격

Add a target markup to unit cost to calculate a selling price.

···

Price elasticity가격 탄력성

Measure how strongly demand responds when price changes.

···

Willingness to pay지불 의향

Explore the distribution of customers’ maximum acceptable prices.

Bundle pricing sells two or more products as one offer. Customers can solve a related set of needs at once, while sellers can explain the value of using the items together.

Tap items in the demo to compare the sum of individual prices with the bundle offer. Any claimed savings should use actual standalone selling prices.

Adding unwanted items merely to make a deal look large can make choosing harder. Show the job the bundle solves and exactly what is included.

When to use

Use it for products that naturally work together, and check that customers can still choose freely.

Open as page ↗