소셜 커머스는 소셜 콘텐츠와 상품 탐색, 구매 경로가 이어지는 판매 경험입니다. 콘텐츠가 관심을 만들고 상품 정보가 선택을 돕습니다.
데모에서 콘텐츠 카드가 상품 상세와 주문 확인으로 전환됩니다. 경로가 짧아도 가격, 배송, 반품 조건은 충분히 읽을 수 있어야 합니다.
언제 쓰나
콘텐츠 안에서 구매 의도가 생기는 상품의 진입 단계를 줄일 때 씁니다.
소셜 커머스
Social commerce
피드에서 발견한 상품을 같은 탐색 맥락 안에서 비교하고 구매합니다.
···
<div class="journey"><div class="top"><span>DISCOVER</span><span>DETAIL</span><span>ORDER</span></div><div class="screen"><div class="poster"></div><b id="title">A DAY WITH THE TOTE</b><small id="sub">WATCH THE STORY</small><div class="action" id="action">VIEW PRODUCT →</div></div></div>.journey{width:clamp(130px,40vmin,275px);font:800 clamp(10px,max(1.5vmin,1vw),13px)/1.2 sans-serif}.top{display:flex;justify-content:space-between;margin-bottom:5px;color:var(--muted);font-size:clamp(10px,max(1.1vmin,1vw),12px)}.screen{height:clamp(135px,43vmin,280px);border:2px solid var(--fg);background:var(--surface);padding:clamp(7px,1.5vmin,14px);display:flex;flex-direction:column;gap:clamp(4px,1vmin,8px)}.poster{flex:1;background:linear-gradient(145deg,var(--accent),var(--accent-3));clip-path:polygon(0 0,100% 0,100% 80%,65% 80%,65% 100%,0 100%);transition:background .3s}.screen small{color:var(--muted)}.action{padding:clamp(5px,1vmin,8px);background:var(--fg);color:var(--bg);text-align:center}.journey[data-stage="2"] .poster{background:linear-gradient(145deg,var(--accent-3),var(--line))}.journey[data-stage="3"] .poster{background:var(--accent-3)}@media (min-width:600px){.journey{width:275px;font-size:14px}.top{font-size:max(10px,1vw,10px)}.screen{height:280px}}small{font-size:max(.833em,10px,1vw)}const root=document.querySelector('.journey'),title=document.querySelector('#title'),sub=document.querySelector('#sub'),action=document.querySelector('#action');const states=[['A DAY WITH THE TOTE','WATCH THE STORY','VIEW PRODUCT →'],['CANVAS TOTE / $28','COTTON · IN STOCK','REVIEW ORDER →'],['ORDER CONFIRMED','DELIVERY DETAILS SENT','START AGAIN']];let step=0;function render(){const state=states[step];root.dataset.stage=String(step+1);title.textContent=state[0];sub.textContent=state[1];action.textContent=state[2]}function next(){step=(step+1)%states.length;render()}action.addEventListener('click',next);setInterval(next,2200);render();