라이브 쇼핑은 실시간 영상 안에서 상품을 소개하고 질문에 답하며 구매 링크를 제공하는 판매 방식입니다. 고객이 사용 장면과 답변을 같은 시간에 확인할 수 있습니다.
데모에서는 방송 진행에 따라 질문, 답변, 상품 핀이 순서대로 바뀝니다. 실시간의 긴박감만 강조하기보다 재고와 가격, 배송 조건을 정확히 보여줘야 합니다.
언제 쓰나
설명이 필요하고 실시간 질문이 구매 판단에 도움이 되는 상품에 적합합니다.
라이브 쇼핑
Live shopping
실시간 시연과 질문 답변을 구매 가능한 상품 정보와 연결합니다.
···
<div class="live"><div class="stage"><small>● LIVE / STUDIO</small><div class="product"><div class="vase"></div></div><div class="pin">PINNED / CERAMIC VASE</div></div><div class="chat"><small>VIEWER Q&A</small><div class="bubble" id="question">Is it dishwasher safe?</div><div class="answer" id="answer">Checking with the maker…</div><div class="dots"><i></i><i></i><i></i></div></div></div>.live{display:flex;width:min(90%,520px);height:clamp(130px,42vmin,270px);border:2px solid var(--fg);font:800 clamp(10px,max(1.5vmin,1vw),13px)/1.25 sans-serif}.stage{position:relative;flex:1;background:linear-gradient(145deg,var(--accent-3),var(--surface));padding:clamp(7px,1.5vmin,14px)}.stage small{color:var(--accent)}.product{position:absolute;inset:25% 18% 16%;display:grid;place-items:center}.vase{width:45%;height:90%;border-radius:15% 15% 40% 40%;background:linear-gradient(90deg,var(--accent),var(--accent-3),var(--accent));animation:turn 4s ease-in-out infinite}.pin{position:absolute;left:5%;bottom:6%;background:var(--fg);color:var(--bg);padding:clamp(4px,1vmin,8px);font-size:clamp(10px,max(1.2vmin,1vw),12px)}.chat{width:42%;padding:clamp(7px,1.5vmin,14px);display:flex;flex-direction:column;gap:clamp(7px,1.5vmin,15px);background:var(--surface)}.chat small{color:var(--muted)}.bubble,.answer{padding:clamp(5px,1.2vmin,10px);border:1px solid var(--line)}.answer{background:var(--accent);color:white;transition:opacity .3s}.dots{display:flex;gap:4px;margin-top:auto}.dots i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:blink 1s infinite}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}@keyframes turn{50%{transform:rotateY(55deg)}}@keyframes blink{50%{opacity:.2}}small{font-size:max(.833em,10px,1vw)}const q=document.querySelector('#question'),a=document.querySelector('#answer');const pairs=[['Is it dishwasher safe?','Yes, on the gentle cycle.'],['How tall is it?','24 cm from base to rim.']];let index=0;function show(){const pair=pairs[index++%pairs.length];q.textContent=pair[0];a.textContent=pair[1]}setTimeout(show,500);setInterval(show,3600);