상품 추천은 현재 조회 상품, 함께 본 상품, 구매 이력 같은 신호로 다음 선택지를 제시합니다. 관련성이 높아야 탐색을 돕고 무작정 많은 상품을 늘어놓으면 선택을 어렵게 합니다.
데모는 기준 상품이 바뀔 때 연결된 추천 카드도 교체합니다. 추천 매출만 보지 말고 노출 위치, 다양성, 장기 만족도도 함께 봅니다.
언제 쓰나
상품 탐색을 돕거나 자연스러운 추가 구매 조합을 제안할 때 씁니다.
상품 추천
Product recommendations
현재 보고 있는 상품과 관련된 다음 선택지를 제안합니다.
···
<div class="recommend"><div class="focus"><small>VIEWING</small><b id="focus">DESK LAMP</b></div><div class="lines">↘<br>→</div><div class="suggest"><small>YOU MAY ALSO NEED</small><div><span id="r1">LIGHT BULB</span><span id="r2">CABLE CLIP</span></div></div></div>.recommend{display:flex;align-items:center;gap:clamp(4px,2vmin,18px);width:min(90%,520px);font:900 clamp(10px,max(1.6vmin,1vw),14px)/1.2 sans-serif}.focus{width:37%;height:clamp(110px,32vmin,210px);background:var(--accent);color:white;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,2vmin,20px);box-sizing:border-box}.focus b{font-size:clamp(14px,3.5vmin,30px)}.lines{color:var(--accent);font-size:clamp(17px,4vmin,32px);line-height:2;animation:point 2s infinite}.suggest{flex:1;display:grid;gap:clamp(7px,2vmin,18px)}.suggest small{color:var(--muted)}.suggest div{display:grid;gap:clamp(6px,1.5vmin,12px)}.suggest span{padding:clamp(7px,1.5vmin,13px);border:2px solid var(--line);background:var(--surface);transition:.3s}@keyframes point{50%{transform:translateX(6px)}}small{font-size:max(.833em,10px,1vw)}const f=document.querySelector('#focus'),a=document.querySelector('#r1'),b=document.querySelector('#r2');const sets=[['DESK LAMP','LIGHT BULB','CABLE CLIP'],['COFFEE DRIPPER','PAPER FILTER','GLASS SERVER']];let i=0;function render(){const s=sets[i];f.textContent=s[0];a.textContent=s[1];b.textContent=s[2]}setTimeout(()=>{i=1;render()},850);setInterval(()=>{i=1-i;render()},3400);