Cart abandonment

장바구니 이탈

Trace the gap between added-to-cart and purchased items by cause.

···
html
<div class="cart"><div class="heads"><span>CART</span><span>SHIPPING</span><span>LOGIN</span><span>PAID</span></div><div class="rail"><div class="dot" style="--top:8%;--end:35%;--delay:0s"></div><div class="dot" style="--top:20%;--end:44%;--delay:.13s"></div><div class="dot" style="--top:32%;--end:53%;--delay:.26s"></div><div class="dot" style="--top:44%;--end:62%;--delay:.39s"></div><div class="dot" style="--top:56%;--end:71%;--delay:.52s"></div><div class="dot" style="--top:68%;--end:80%;--delay:.65s"></div></div><div class="notes"><span>FEE</span><span>ACCOUNT</span><span>ERROR</span></div></div>
css
.cart{width:min(88%,620px);font:800 clamp(10px,max(1.6vmin,1vw),13px)/1 sans-serif}.heads,.notes{display:flex;justify-content:space-between;color:var(--muted)}.rail{height:clamp(75px,18vmin,140px);position:relative;border-bottom:3px solid var(--fg);margin:10px 0}.dot{position:absolute;left:0;top:var(--top);width:clamp(10px,2.5vmin,20px);aspect-ratio:1;background:var(--accent);border-radius:50%;animation:move 4s ease-in-out var(--delay) infinite}.notes{color:var(--accent);padding-left:22%;padding-right:12%}@keyframes move{0%,8%{left:0;opacity:1}55%{opacity:1}75%,90%{left:var(--end);opacity:1}100%{left:0;opacity:0}}

Cart abandonment means an item was added but an order was not completed within a defined visit or window. An add-to-cart event is not a guaranteed purchase intent.

The demo lets item dots leave at shipping, login, and payment steps. Inspect stage losses and repeated patterns before choosing a remedy.

Before sending reminders, fix in-product causes such as stock, delivery terms, or payment errors. Report abandonment with its time window and user definition.

When to use

Use it to find stage obstacles when cart activity is high but orders are low.

Open as page ↗