Buy online, pick up in store

온라인 주문 매장 픽업

Order online, check nearby stock, and collect the item at a store.

···
html
<div class="pickup"><div class="item"><span class="box"></span><div><b>DESK ORGANIZER</b><small>ONLINE ORDER</small></div></div><div class="store"><span>STORE A / 2 KM</span><b id="stock">IN STOCK · 3</b></div><div class="store"><span>STORE B / 6 KM</span><b>IN STOCK · 8</b></div><div class="button" id="option">PICK UP AT STORE A →</div></div>
css
.pickup{width:min(88%,430px);font:800 clamp(10px,max(1.5vmin,1vw),13px)/1.2 sans-serif;background:var(--surface);border:2px solid var(--fg);padding:clamp(8px,2vmin,18px)}.item{display:flex;align-items:center;gap:clamp(8px,2vmin,18px);padding-bottom:clamp(6px,1vmin,12px)}.item .box{width:clamp(35px,9vmin,70px);aspect-ratio:1;background:linear-gradient(135deg,var(--accent-3),var(--accent))}.item div{display:grid;gap:5px}.item small{color:var(--muted)}.store{display:flex;justify-content:space-between;gap:6px;padding:clamp(7px,1.3vmin,12px) 0;border-top:1px solid var(--line)}.store b{color:var(--accent);text-align:right}.button{background:var(--fg);color:var(--bg);padding:clamp(7px,1.5vmin,12px);text-align:center;transition:.3s}.pickup.empty .store:first-of-type b{color:var(--muted)}small{font-size:max(.833em,10px,1vw)}
js
const stock=document.querySelector('#stock'),option=document.querySelector('#option');let available=true;function render(){stock.textContent=available?'IN STOCK · 3':'OUT OF STOCK';option.textContent=available?'PICK UP AT STORE A →':'CHOOSE STORE B →'}setTimeout(()=>{available=false;render()},900);setInterval(()=>{available=!available;render()},3500);

Buy online, pick up in store completes payment online and fulfillment at a physical location. Shoppers can choose a collection point instead of waiting for shipping.

The demo changes store stock and the pickup action together. If inventory is stale, customers may make a wasted trip; distinguish a reservation from a confirmed pickup notice.

When to use

Use it when store inventory and online orders can support a reliable collection option.

Open as page ↗