GuidesAPI Reference
Guides

숏폼 목록 레이아웃 변경하기

Suggest Edits

Short-form의 목록을 원하는 곳에 아래 3가지 형식으로 노출할 수 있으며 "더보기(VIEW MORE)" 버튼의 사용여부와 최대 줄수를 지정할 수 있습니다.

  • 세로 스크롤 - L
  • 세로 스크롤 - S
  • 가로 스크롤



세로 스크롤 - L

세로 스크롤 - L형 목록을 노출할 페이지에 아래 코드를 입력합니다. rows와 hasMoreButton 옵션 사용이 가능합니다.

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

세로 스크롤 - L 예시



세로 스크롤 - S

세로 스크롤 -S형 목록을 노출할 페이지에 아래 코드를 입력합니다. rows와 hasMoreButton 옵션 사용이 가능합니다.

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

세로 스크롤 - S 예시



가로 스크롤

가로스크롤 목록을 노출할 페이지에 아래 코드를 입력합니다. rows와 hasMoreButton 옵션 사용이 불가합니다.

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

가로 스크롤 예시


옵션

세로스크롤 레이아웃에는 rows와 hasMoreButton 옵션이 사용 가능합니다.

  • rows: 세로 스크롤 레이아웃에 적용되는 기본 줄수를 지정합니다.
  • hasMoreButton: 더보기 버튼의 표시여부를 표시합니다. 미 표시시 목록의 하단에 닿으면 자동으로 추가줄을 로드합니다.
파라미터기능default
rows최대줄수2 (max:4)
hasMoreButton더보기 버튼 표시여부true
<div id="shoplive-shortform-2"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform-2", {template: "GRID2" ,hasMoreButton:true, rows:4} );
</script>

🚧

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

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

Updated over 1 year ago