틱톡샵 상품 연결 숏폼과 상점

D-목업-틱톡샵-숏폼과상점

언제 쓰는가

콘텐츠 커머스 제안에서 숏폼 하단 상품 카드와 프로필 상점 탭을 나란히 보여줄 때. 화면 2개 고정, 상품 4개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 상품 카드는 문구 위 흰 상자 1개. 상점 격자 4칸.

참고

틱톡샵 상품 카드·쇼퍼블 영상 구조 해설(racklify.com 백과 TikTok Shop product card, videowise.com/live-commerce/what-are-shoppable-videos-on-tiktok), 틱톡 광고 도움말. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mtksh">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">상품 연결 숏폼</p><div class="ph mock n dkm"><div class="bg">9:16 세로 영상</div><div class="ov"><div class="sb"><span>9:41</span><i></i></div><div class="tp"><span>팔로잉</span><span>상점</span><span class="on">추천</span></div></div>
<div class="side"><span class="av" style="width:26px;height:26px;border:1.5px solid #fff"></span><span><i class="ic o"></i>2.1만</span><span><i class="ic o"></i>384</span><span><i class="ic"></i>공유</span></div>
<div class="bt"><div class="anc"><span class="ci"></span><div class="col f1" style="gap:1px"><p class="t10 bd">접이식 리포머 미니</p><p class="t9" style="color:#666">상점 · 판매 3,120</p></div><span class="t10 bd">›</span></div><p class="t12 bd">@supgilfit</p><p class="t10" style="margin-right:38px">원룸에서 펼치고 접는 데 10초</p></div>
<div class="nav"><span style="color:#fff;font-weight:700">홈</span><span>상점</span><span>만들기</span><span>메시지</span><span>프로필</span></div></div></div>
      <div class="fc"><p class="fl">프로필 상점 탭</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="fx" style="padding:4px 10px 8px"><span class="av" style="width:34px;height:34px"></span><div class="col f1"><p class="t12 bd">숲길핏 공식</p><p class="t9 mu">팔로워 4.8만 · 판매 1.2만</p></div></div>
<div class="tb"><span>동영상</span><span class="on">상점</span><span>라이브</span></div>
<div class="sgd"><div class="col" style="gap:3px"><div class="g" style="">상품</div><p class="t10" style="line-height:1.3">접이식 리포머 미니</p><span class="pr" style="width:46px"></span><p class="t9 mu">판매 3,120</p></div><div class="col" style="gap:3px"><div class="g" style="">상품</div><p class="t10" style="line-height:1.3">논슬립 요가 매트</p><span class="pr" style="width:38px"></span><p class="t9 mu">판매 1,804</p></div><div class="col" style="gap:3px"><div class="g" style="">상품</div><p class="t10">저항 밴드 3종</p></div><div class="col" style="gap:3px"><div class="g" style="">상품</div><p class="t10">폼롤러</p></div></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">틱톡샵 · 쇼퍼블 숏폼 · 상점</p>
    <h3>상품 카드가 붙은 숏폼과 상점 탭</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>추천 피드 숏폼 하단 상품 카드, 라이브 상품 카드, 프로필 상점 탭</dd></div>
      <div><dt>과금 방식</dt><dd>플랫폼 수수료, 제휴 크리에이터 수수료, 행사 부담분 3갈래. 요율은 지역 판매자 센터에서 확인</dd></div>
      <div><dt>소재 규격</dt><dd>상품별 9:16 숏폼. 상품 분류와 사업자 업종 일치, 라이브용 재고 분리</dd></div>
      <div><dt>운영 포인트</dt><dd>숏폼은 라이브의 예고편, 라이브는 숏폼 시청자의 도착점. 입점 심사 1~3영업일, 재고 연동 주기 점검</dd></div>
    </dl>
  </div>
</div>

스타일

.dk-mtksh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
.dk-mtksh .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-mtksh .fr{display:flex;gap:18px;align-items:flex-start}
.dk-mtksh .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-mtksh .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-mtksh .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-mtksh .rt .dk-lb{margin:0 0 4px}
.dk-mtksh .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-mtksh .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-mtksh .rt dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--line)}
.dk-mtksh .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-mtksh .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-mtksh .rt.tight dl div{padding:10px 0;grid-template-columns:76px minmax(0,1fr);gap:var(--s3)}
.dk-mtksh .rt.tight dd{font-size:var(--f-sm)}
.dk-mtksh .ph{width:300px;height:372px;border:5px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;text-align:left;position:relative}
.dk-mtksh .ph.n{width:232px}
.dk-mtksh .ph.s{width:190px}
.dk-mtksh .ph.xs{width:150px;height:316px;border-width:4px;border-radius:18px;font-size:10px}
.dk-mtksh .ph.dkm{background:#242424;color:#fff}
.dk-mtksh .ph>*{flex:none}
.dk-mtksh p{margin:0}
.dk-mtksh .ph b,.dk-mtksh .pc b,.dk-mtksh .tv b{color:inherit;font-weight:700}
.dk-mtksh .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-mtksh .xs .sb{padding:5px 12px 2px;font-size:9px}
.dk-mtksh .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-mtksh .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px;text-align:center}
.dk-mtksh .gd{background:#3a3a3a;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:9px;text-align:center}
.dk-mtksh .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-mtksh .pr{display:block;height:9px;border-radius:3px;background:#c9c4bf}
.dk-mtksh .fx{display:flex;align-items:center;gap:6px}
.dk-mtksh .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-mtksh .sp{justify-content:space-between}
.dk-mtksh .f1{flex:1;min-width:0}
.dk-mtksh .t8{font-size:8px}
.dk-mtksh .t9{font-size:9px}
.dk-mtksh .t10{font-size:10px}
.dk-mtksh .t12{font-size:12px}
.dk-mtksh .t13{font-size:13px}
.dk-mtksh .bd{font-weight:700}
.dk-mtksh .mu{color:#8b8f94}
.dk-mtksh .hr{height:6px;background:#f0f1f3}
.dk-mtksh .pd{padding:8px 12px}
.dk-mtksh .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-mtksh .ic.o{border-radius:50%}
.dk-mtksh .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}
.dk-mtksh .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none;white-space:nowrap}
.dk-mtksh .rel{position:relative}
.dk-mtksh .pin{position:absolute;z-index:6;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;line-height:1;letter-spacing:0}
.dk-mtksh .nw{white-space:nowrap}

.dk-mtksh .bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#777;font-size:10px;background:linear-gradient(#2e2e2e,#161616)}
.dk-mtksh .ov{position:relative;z-index:2}
.dk-mtksh .tp{display:flex;justify-content:center;gap:14px;padding:4px 0;font-size:12px;color:rgba(255,255,255,.6)}
.dk-mtksh .tp .on{color:#fff;font-weight:700}
.dk-mtksh .side{position:absolute;right:8px;bottom:128px;display:flex;flex-direction:column;gap:11px;align-items:center;z-index:2;font-size:9px}
.dk-mtksh .side span{display:flex;flex-direction:column;align-items:center;gap:2px}
.dk-mtksh .bt{position:absolute;left:10px;right:10px;bottom:38px;z-index:2;display:flex;flex-direction:column;gap:5px}
.dk-mtksh .anc{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:#111;border-radius:5px;padding:5px 7px;margin-right:38px}
.dk-mtksh .ci{width:16px;height:16px;border-radius:4px;background:#fe2c55;flex:none}
.dk-mtksh .nav{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-around;padding:8px 0;font-size:9px;background:#000;color:#aaa}
.dk-mtksh .tb{display:flex;border-bottom:1px solid #ececec;font-size:10px;color:#868b94}
.dk-mtksh .tb span{flex:1;text-align:center;padding:5px 0}
.dk-mtksh .tb .on{color:#111;font-weight:700;border-bottom:2px solid #111}
.dk-mtksh .sgd{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px}
.dk-mtksh .sgd .g{height:72px}
.dk-mtksh .ct{background:#fe2c55;color:#fff;border-radius:4px;padding:4px 0;text-align:center;font-size:10px;font-weight:700;flex:1}