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

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>

세로 스크롤 - S

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

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

가로 스크롤

가로스크롤 목록을 노출할 페이지에 아래 코드를 입력합니다. 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에서 제공하는 인터페이스를 임의로 수정할 경우 예기치 않은 오류가 발생할 수 있습니다.