카페24

인쇄

카페24

인쇄

기사 요약

이 요약이 도움이 되었나요?

의견을 보내 주셔서 감사합니다.

공통

아래의 주소로 방문해 Cafe24 계정으로 로그인합니다.

https://eclogin.cafe24.com/Shop/

PC Web

기본 설정

1. 수정할 스킨 생성

실제 운영 중인 페이지에 영향이 가지 않도록 대표디자인 복사

2. 수정할 스킨 선택

복사한 디자인을 선택 > 수정 버튼 클릭

공통 레이아웃 파일 열기
- Editor 왼쪽 편집창에서 주요화면 클릭 > 메인화면 클릭 > Editor 하단에 있는 HTML 영역에서 공통 레이아웃 열기 (e.g. )

4. 샵라이브 코드 적용하기

<body> 태그 아래 라인에 다음 코드를 입력 > ACCESS_KEY 부분에 샵라이브에서 제공한 Access key 입력 후 저장

<div module="Layout_stateLogon" style="display:none;">{$id} {$name}</div>
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'ACCESS_KEY', platform: 'CAFE24' });</script>

Access Key 확인
ACCESS_KEY는 방송 상세 정보에서 복사하세요.

5. 프리뷰 확인하기

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

프리뷰가 보이지 않습니다.
프리뷰가 보이지 않을 경우, Shoplive Admin 방송 상세 페이지에서 API 플러그인 설정을 "On"으로 바꿔주세요.

Shoplive Plugin 페이지 설정

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

1. Live 폴더 추가하기

페이지 왼쪽 하단 폴더추가 버튼 클릭 > Live 폴더 추가

2. 라이브 페이지(html) 생성하기

페이지 왼쪽 하단 화면추가 버튼 클릭 > LIVE 폴더에 live.html 파일 생성 > 화면분류 선택안함(자동지정) 설정

3. shoplive-overall 추가하기

Editor 상단 영역에서 공통 레이아웃 설정을 확인 > live.html 화면의 HTML 영역에 아래 코드를 삽입 (기존 코드는 삭제)

<div id="shoplive-overall"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall');</script>

4. 진입점에 Shoplive Plugin 페이지 연결하기

연결할 메뉴 탭에 마우스 오버하여 나타나는 편집 버튼 클릭 > 편집 화면에서 <a href=”/live/live.html”> 처럼 저장 경로와 파일명 입력

Mobile

모바일에서도 PC Web 설정과 동일한 방법으로 진행합니다.