크리에이터 상품 태그

Creator shopping tags

콘텐츠 속 제품을 태그해 시청자가 상세 정보로 이어가게 합니다.

···
html
<div class="s-demo"><div class="ct"><div class="ct-screen"><div class="ct-product"></div><button class="ct-tag" type="button">VIEW PRODUCT +</button></div><div class="ct-card"><small>PRODUCT DETAIL</small><b>FOLDABLE LAMP</b><span>SEE FEATURES →</span></div></div></div>
css
.s-demo{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(8px,3vmin,20px);font:700 clamp(10px,max(2.8vmin,1vw),16px)/1.25 sans-serif;color:var(--fg)}.s-demo *{box-sizing:border-box}@media(min-width:600px){.s-demo>div{transform:scale(1.4)}}.ct{display:flex;align-items:center;gap:clamp(8px,3vmin,24px)}.ct-screen{position:relative;width:clamp(94px,27vmin,170px);height:clamp(125px,38vmin,235px);background:linear-gradient(130deg,var(--accent-2),var(--accent));border:3px solid var(--fg);overflow:hidden}.ct-product{position:absolute;left:38%;top:20%;width:23%;height:45%;border:clamp(4px,1vmin,8px) solid var(--fg);border-radius:25px 25px 5px 5px;transform:rotate(13deg)}.ct-tag{position:absolute;bottom:8px;left:5px;right:5px;background:var(--fg);color:var(--bg);border:0;padding:clamp(4px,1vmin,8px);font:900 clamp(10px,max(1.7vmin,1vw),12px) sans-serif;cursor:pointer;animation:cttag 5s infinite}.ct-card{display:grid;gap:clamp(3px,1vmin,8px);width:clamp(85px,24vmin,170px);background:var(--surface);border:2px solid var(--accent);padding:clamp(6px,2vmin,14px);box-shadow:4px 4px 0 var(--line);animation:ctcard 5s infinite}.ct-card small{color:var(--muted);font-size:clamp(10px,max(1.5vmin,1vw),12px)}.ct-card b{font-size:clamp(10px,max(2.3vmin,1vw),18px)}.ct-card span{color:var(--accent);font-size:clamp(10px,max(1.6vmin,1vw),12px)}@keyframes cttag{0%,25%{transform:scale(1)}40%,65%{transform:scale(1.06)}100%{transform:scale(1)}}@keyframes ctcard{0%,25%{opacity:.15;transform:translateX(-10px)}45%,90%{opacity:1;transform:none}100%{opacity:.15}}
js
document.querySelector('.ct-tag').addEventListener('click',()=>{const card=document.querySelector('.ct-card');card.animate([{transform:'translateX(-10px)',opacity:.2},{transform:'translateX(0)',opacity:1}],{duration:350,fill:'forwards'})});

자격을 갖춘 크리에이터는 영상이나 라이브에 상품 태그를 붙일 수 있습니다. YouTube는 2026년 쇼핑 제휴 기능의 참여 자격을 확대하며 Shorts와 긴 영상, 라이브 태그를 설명했습니다.

데모에서 영상의 상품 태그를 누르면 제품 카드가 열립니다. 제품을 보여주는 장면과 태그 위치가 자연스럽게 맞아야 합니다.

태그만 붙이면 구매가 일어난다고 가정하지 마세요. 제품 설명의 정확성과 협찬·제휴 표시를 함께 확인합니다.

언제 쓰나

크리에이터의 시연 영상에서 상품 정보를 바로 확인하게 할 때 씁니다.

페이지로 열기 ↗