GuidesAPI Reference

Shoplive Shortform 설치하기

Suggest Edits

이 가이드는 아래 내용들을 안내합니다.



▶︎ Shoplive Shortform 설치 요약

[1단계] Javascript import , init() 코드 삽입하기

페이지의 공통 레이아웃에 아래 코드를 입력합니다.

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });</script>



[2단계] 숏폼 목록을 원하는 형태로 노출하기

숏폼 목록을 노출할 위치에 아래 코드를 입력합니다.
template 위치에는 "GRID1", "GRID2", "HORIZONTAL" 중 1개를 택하여 설치할 수 있습니다. 해당 값에 따라 레이아웃이 달라집니다.

<div id="shoplive-shortform"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform", {template: "GRID2"} );
</script>



▶︎ Shoplive Short-form 웹 페이지에 설치하기

[1단계] 공통 레이아웃(head 영역 등)에 다음 코드를 설치합니다.

3가지 코드 중 사용하려는 인증 방식에 따라 1개의 코드를 사용하세요. 캠페인 설정에서 ACCESS KEY를 찾을 수 있습니다.

1. 게스트(비로그인) 사용자로 보기

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });</script>

2. 일반 인증 사용하기 (일반 텍스트 형식의 USER_ID 및 USER_NAME)

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE', userObject: {userId: "USER_ID", userName: "USER_NAME"} });</script>

<!-- OR -->

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shorts.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserObject({userId: "USER_ID", userName: "USER_NAME"});
</script>

3. JWT 토큰 사용하기

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE', userJWT: "USER_JWT" });</script>

<!-- OR -->

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserJWT("USER_JWT");
</script>



[2단계] Shoplive Short-form이 설치될 웹페이지에 다음 코드를 설치합니다.

<div id="shoplive-shorts"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shorts", {template: "GRID2"} );
</script>



▶︎ Shoplive Short-form 목록 고급 설정하기

Short-form의 목록을 원하는 곳에 아래 3가지 형식으로 노출할 수 있습니다.

  • 콘텐츠 집중형 (GRID1)
  • 격자 (GRID2)
  • 가로 스크롤 (HORIZONTAL)

세로 스크롤 - L

콘텐츠 집중형 목록을 노출할 페이지에 아래 코드를 입력합니다.

<div id="shoplive-shortform-1"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform-1", {template: "GRID1"} );
</script>
콘텐츠 집중형 예시

세로 스크롤 - L예시


세로 스크롤 - S

격자형 목록을 노출할 페이지에 아래 코드를 입력합니다.

<div id="shoplive-shortform-2"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform-2", {template: "GRID2"} );
</script>
격자형 예시

세로 스크롤 - S 예시


가로스크롤

가로스크롤 목록을 노출할 페이지에 아래 코드를 입력합니다.

<div id="shoplive-shortform-3"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform-3", {template: "HORIZONTAL"} );
</script>
가로 스크롤 예시

가로 스크롤 예시



🚧

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

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

▶︎ 상품 관련 숏폼 연동하기

상품과 관련된 숏폼을 상품 상세 페이지에서 자동으로 보여줄 수 있습니다.

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

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

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

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

상품을 특정하여 연관 숏폼을 구성하고 싶다면, 아래 코드와 같이 상품의 정보를 설정하세요.

<script defer>
  var config = {name: "상품이름", sku: "SKU", productId: "PRODUCT_ID"};
  cloud.shoplive.showShortformPreview(config);
</script>

Updated 3 months ago