고도몰에 설치하기
WEB 설정하기
고도몰 로그인
- 고도몰에 로그인합니다.
(경로: https://www.nhn-commerce.com/)
![](https://files.readme.io/ccea5a3-_.png)
- Shoplive Plugin 설치를 원하는 쇼핑몰을 선택합니다.
![](https://files.readme.io/5ae0e32-__.png)
기본 설정
- 기존의 스킨에 영향이 가지 않도록 스킨을 복사한 후, 작업 스킨으로 설정해서 사용합니다. 작업중인 스킨은 상점별 작업 스킨 상태에서 WORK로 표시됩니다.
(경로: 관리자 로그인 > 디자인)
![](https://files.readme.io/d31118a-__.png)
- 전체 레이아웃을 더블클릭 후 상단 레이아웃에 접속합니다.
![](https://files.readme.io/de6d45d-___.png)
<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>
![](https://files.readme.io/c3015af-____.png)
ACCESS_KEY
는 방송 상세 정보에서 복사합니다.
![](https://files.readme.io/274c215-access_key.png)
이제 Shoplive Plugin 페이지의 기본 설정이 완료되었습니다. 진행 중인 방송이 있다면 프리뷰를 확인할 수 있습니다.
![](https://files.readme.io/29db4f5-_.png)
프리뷰가 보이지 않을 경우, Shoplive Admin 방송 상세 페이지에서 API·플러그인 을 ON으로 설정합니다.
![](https://files.readme.io/73d0b1e-api_.png)
Shoplive Plugin 페이지 설정
Shoplive Plugin 설치를 원하는 경로에 페이지를 추가할 수 있습니다.
- Shoplive Plugin 페이지를 추가하기 원하는 위치의 폴더를 더블클릭하고, 새로운 페이지 추가를 클릭합니다.
![](https://files.readme.io/25ad263-__.png)
- 파일명을 입력하고 페이지를 추가합니다.
![](https://files.readme.io/1b7a597-___.png)
- 추가한 페이지를 클릭해 아래 코드를 입력하고 디자인 페이지 저장을 클릭합니다.
<div id="shoplive-overall"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall');</script>
![](https://files.readme.io/8d16e66-____.png)
- 이제 원하는 탭과 Shoplive Plugin 페이지를 연결합니다. 페이지의 화면보기을 클릭해 나타나는 페이지의 주소를 복사합니다.
![](https://files.readme.io/2461a85-_.png)
- 전체 레이아웃에서 상단 디자인을 더블클릭 후, 상단 기본파일에서 원하는 탭에 복사한 페이지의 주소를 붙여넣고 디자인 페이지 저장을 클릭합니다.
![](https://files.readme.io/67ff70a-___.png)
이제 모든 설정이 끝났습니다. Shoplive Plugin과 함께 생생한 라이브 스트리밍을 즐겨보세요.
![](https://files.readme.io/71b5bdf-__.png)
Mobile 설정하기
Mobile에서도 WEB 설정하기와 동일한 방법으로 진행합니다.
기본 설정
- 모바일샵의 디자인 스킨 리스트에 접속합니다.
![](https://files.readme.io/f9cd804-____.png)
- 기존의 스킨에 영향이 가지 않도록 스킨을 복사한 후, 작업 스킨으로 설정해서 사용합니다. 작업중인 스킨은 상점별 작업 스킨 상태에서 WORK로 표시됩니다.
![](https://files.readme.io/63ad448-___.png)
- 전체 레이아웃을 더블클릭 후 상단 레이아웃에 접속합니다.
![](https://files.readme.io/ed4f9cf-___.png)
<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>
![](https://files.readme.io/275a110-_____.png)
이제 모바일 Shoplive Plugin 페이지의 기본 설정이 완료되었습니다. 진행 중인 방송이 있다면 프리뷰를 확인할 수 있습니다.
![](https://files.readme.io/7f906ee-__.png)
Shoplive Plugin 페이지 설정
Shoplive Plugin 설치를 원하는 경로에 페이지를 추가할 수 있습니다.
- Shoplive Plugin 페이지를 만들기 원하는 위치의 폴더를 더블클릭하고, 새로운 페이지 추가를 클릭합니다.
![](https://files.readme.io/ab55385-___.png)
- 파일명을 입력하고 페이지를 추가합니다.
![](https://files.readme.io/b01dd9e-___.png)
- 추가한 페이지를 클릭해 아래 코드를 입력하고 디자인 페이지 저장을 클릭합니다.
<div id="shoplive-overall"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall');</script>
![](https://files.readme.io/c9a1d09-_____.png)
- 이제 원하는 탭과 Shoplive Plugin 페이지를 연결합니다. 페이지의 화면보기을 클릭해 나타나는 페이지의 주소를 복사합니다.
![](https://files.readme.io/e475dcb-___.png)
- 전체 레이아웃에서 상단 디자인을 더블클릭 후, 상단 기본파일에서 원하는 탭에 복사한 페이지의 주소를 붙여넣고 디자인 페이지 저장을 클릭합니다.
![](https://files.readme.io/7574a64-___.png)
이제 모든 설정이 끝났습니다. Shoplive Plugin과 함께 생생한 라이브 스트리밍을 즐겨보세요.
![](https://files.readme.io/efd5ffc-____.png)
Updated 7 months ago