GuidesAPI Reference
Guides

고도몰에 설치하기

Suggest Edits

WEB 설정하기

고도몰 로그인

  1. 고도몰에 로그인합니다.
    (경로: https://www.nhn-commerce.com/)



  1. Shoplive Plugin 설치를 원하는 쇼핑몰을 선택합니다.



기본 설정

  1. 기존의 스킨에 영향이 가지 않도록 스킨을 복사한 후, 작업 스킨으로 설정해서 사용합니다. 작업중인 스킨은 상점별 작업 스킨 상태에서 WORK로 표시됩니다.
    (경로: 관리자 로그인 > 디자인)



  1. 전체 레이아웃을 더블클릭 후 상단 레이아웃에 접속합니다.



  1. <body>태그를 찾고, <body> 태그 밑에 아래 코드를 입력합니다. 아래 코드 마지막 라인에 있는 ACCESS_KEY 부분에 Shoplive에서 제공한 Access key를 입력하고 디자인 페이지 저장을 클릭합니다.
<div id="cloud-shoplive-user-id" style="display: none;">{=gSess.memId}</div>
<div id="cloud-shoplive-user-name" style="display: none;">{=gSess.memNm}</div>
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'ACCESS_KEY', platform: 'GODOMALL' });</script>



ACCESS_KEY는 방송 상세 정보에서 복사합니다.




이제 Shoplive Plugin 페이지의 기본 설정이 완료되었습니다. 진행 중인 방송이 있다면 프리뷰를 확인할 수 있습니다.



프리뷰가 보이지 않을 경우, Shoplive Admin 방송 상세 페이지에서 API·플러그인 을 ON으로 설정합니다.



Shoplive Plugin 페이지 설정

Shoplive Plugin 설치를 원하는 경로에 페이지를 추가할 수 있습니다.

  1. Shoplive Plugin 페이지를 추가하기 원하는 위치의 폴더를 더블클릭하고, 새로운 페이지 추가를 클릭합니다.



  1. 파일명을 입력하고 페이지를 추가합니다.



  1. 추가한 페이지를 클릭해 아래 코드를 입력하고 디자인 페이지 저장을 클릭합니다.
<div id="shoplive-overall"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall');</script>



  1. 이제 원하는 탭과 Shoplive Plugin 페이지를 연결합니다. 페이지의 화면보기을 클릭해 나타나는 페이지의 주소를 복사합니다.



  1. 전체 레이아웃에서 상단 디자인을 더블클릭 후, 상단 기본파일에서 원하는 탭에 복사한 페이지의 주소를 붙여넣고 디자인 페이지 저장을 클릭합니다.



이제 모든 설정이 끝났습니다. Shoplive Plugin과 함께 생생한 라이브 스트리밍을 즐겨보세요.



Mobile 설정하기

Mobile에서도 WEB 설정하기와 동일한 방법으로 진행합니다.

기본 설정

  1. 모바일샵의 디자인 스킨 리스트에 접속합니다.



  1. 기존의 스킨에 영향이 가지 않도록 스킨을 복사한 후, 작업 스킨으로 설정해서 사용합니다. 작업중인 스킨은 상점별 작업 스킨 상태에서 WORK로 표시됩니다.



  1. 전체 레이아웃을 더블클릭 후 상단 레이아웃에 접속합니다.



  1. <body>태그를 찾고, <body> 태그 밑에 아래 코드를 입력합니다. 아래 코드 마지막 라인에 있는 ACCESS_KEY 부분에 Shoplive에서 제공한 Access key를 입력하고 디자인 페이지 저장을 클릭합니다.
<div id="cloud-shoplive-user-id" style="display: none;">{=gSess.memId}</div>
<div id="cloud-shoplive-user-name" style="display: none;">{=gSess.memNm}</div>
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'ACCESS_KEY', platform: 'GODOMALL' });</script>



이제 모바일 Shoplive Plugin 페이지의 기본 설정이 완료되었습니다. 진행 중인 방송이 있다면 프리뷰를 확인할 수 있습니다.



Shoplive Plugin 페이지 설정

Shoplive Plugin 설치를 원하는 경로에 페이지를 추가할 수 있습니다.

  1. Shoplive Plugin 페이지를 만들기 원하는 위치의 폴더를 더블클릭하고, 새로운 페이지 추가를 클릭합니다.



  1. 파일명을 입력하고 페이지를 추가합니다.



  1. 추가한 페이지를 클릭해 아래 코드를 입력하고 디자인 페이지 저장을 클릭합니다.
<div id="shoplive-overall"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall');</script>



  1. 이제 원하는 탭과 Shoplive Plugin 페이지를 연결합니다. 페이지의 화면보기을 클릭해 나타나는 페이지의 주소를 복사합니다.



  1. 전체 레이아웃에서 상단 디자인을 더블클릭 후, 상단 기본파일에서 원하는 탭에 복사한 페이지의 주소를 붙여넣고 디자인 페이지 저장을 클릭합니다.




이제 모든 설정이 끝났습니다. Shoplive Plugin과 함께 생생한 라이브 스트리밍을 즐겨보세요.

Updated about 1 year ago