▶︎ 상품 페이지 내 PIP 설정

상품과 숏폼을 연동하여 상품 상세 페이지에서 PIP 형태의 영상 배너로 숏폼을 보여줄 수 있습니다.

상품 페이지 내 PIP 설정하기

자동으로 연동되는 연관 숏폼 구성하기

숏폼을 보여줄 페이지에 아래 코드를 입력하세요.

(e.g. 상품 상세페이지의 공통 레이아웃)

<script defer>
  cloud.shoplive.showShortformPreview();
</script>

위 함수가 호출되는 URL을 분석하여 연관된 숏폼을 PIP 형태의 영상 배너로 보여줍니다.
(URL에서 상품을 유추할 수 없는 환경이라면 영상 배너가 표시되지 않습니다.)

상품 URL과 실제 랜딩되는 페이지의 주소가 다른 경우, 연관 숏폼이 표시되지 않을 수 있습니다.
연관 숏폼 표시에 문제가 있다면 샵라이브 담당자에게 문의하세요.

e.g.

일반 주소 - https://shoplive.cloud/product/{PRODUCT_ID}/detail

모바일 주소 - https://m.shoplive.cloud/product/{PRODUCT_ID}/m/detail

상품을 특정하여 연관 숏폼 구성하기

<script defer>
  cloud.shoplive.showShortformPreview({
    sku: "SKU"
  });
</script>

특정 태그를 포함한 연관 숏폼 구성하기

PIP 형태의 영상 배너에 특정 태그가 포함된 숏폼만을 보여줄 수 있습니다.

<script defer>
  cloud.shoplive.showShortformPreview({
    tags: ["YOUR_TAG1", "YOUR_TAG2"]
  });
</script>

여러 개의 태그로 연관 숏폼을 구성할 때, tagSearchOperator="AND" 옵션을 추가하여 해당 태그를 모두 포함하는 조건(AND조건)으로 구성할 수 있습니다.

<script defer>
  cloud.shoplive.showShortformPreview({
    tags: ["YOUR_TAG1", "YOUR_TAG2"],
    tagSearchOperator: "AND"
  });
</script>

특정 브랜드의 연관 숏폼 구성하기

PIP 형태의 영상 배너에 특정 브랜드가 포함된 숏폼만을 보여줄 수 있습니다.

<script defer>
  cloud.shoplive.showShortformPreview({
    brands: ["BRAND_IDENTIFIER1", "BRAND_IDENTIFIER2"]
  });
</script>

🚧

Shoplive의 인터페이스를 임의로 수정하지 마세요.

Shoplive에서 제공하는 인터페이스를 임의로 수정할 경우 예기치 않은 오류가 발생할 수 있습니다.