커스텀 스킨 설정

이 페이지에서는 NHN커머스 부가서비스를 통해 Kollus Live Commerce 서비스를 이용 중인 고객사의 쇼핑몰에 커스텀 스킨을 설정하는 방법에 대해 안내합니다.

커스텀 스킨 설정
Kollus Live Commerce 서비스는 NHN커머스가 제공하는 커스텀 스킨에도 적용 가능합니다. NHN커머스 관리자 페이지의 스킨 다운로드를 통해 커스텀 스킨에 Kollus Live Commerce 서비스를 연동할 수 있습니다.

커스텀 스킨 연동

NHN커머스 관리자 페이지에 접속한 후 디자인 > 디자인 스킨 리스트 메뉴의 스킨 리스트 영역에서 사용 스킨과 보유 스킨을 확인할 수 있으며, 적용할 스킨을 선택한 후 관리 항목에서 다운로드 버튼을 클릭하면 스킨 다운로드 팝업이 나타납니다. 스킨 다운로드 팝업에서 확인 버튼을 클릭하면 해당 스킨이 다운로드됩니다.

스킨 다운로드가 완료되면 웹 브라우저 화면의 상단 또는 하단의 상태바를 클릭하거나, 내 PC > 다운로드에서 다운로드한 Another 압축 파일을 확인합니다. 파일 확인 후 해당 파일의 압축을 해제합니다.

그다음 Kollus Live Commerce - 관리 시스템에 접속한 후, 계정 관리 > 고객사 정보 > 사이트 정보 영역의 스크립트 다운로드 항목에서 KLC 서비스 연동 버튼과 프론트 화면 연동 버튼을 클릭하여 klc_connect.html 파일과 livemall.html 파일을 모두 다운로드합니다.

다운로드한 두 개의 HTML 파일을 압축을 해제한 Another 폴더로 이동합니다.

Another 폴더에서 livemall.html 파일을 연결 프로그램을 통해 메모장으로 연 다음, 기존 스킨의 헤더(header) 영역 HTML 코드와 푸터(footer) 영역 HTML 코드를 확인합니다. 두 개 영역의 HTML 코드를 삭제하고 적용하고자 하는 커스텀 스킨의 헤더(header) 영역 HTML 코드와 푸터(footer) 영역 HTML 코드를 붙여 넣은 후 파일을 그대로 저장합니다.

저장한 다음, klc_connect.html 파일과 livemall.html 파일이 모두 포함된 폴더를 다시 zip 파일로 압축합니다. 그다음 다시 NHN커머스 관리자 페이지의 디자인 > 디자인 스킨 리스트 메뉴로 돌아간 후, 스킨 리스트의 사용 스킨 영역에서 스킨정보 수정 버튼을 클릭하면 스킨을 업로드할 수 있는 팝업이 나타납니다. 스킨명을 영문으로 입력한 후, 업로드의 파일찾기 버튼을 클릭하여 압축한 zip 파일을 업로드합니다. 썸네일 이미지 등록은 선택 사항이며, 이미지를 등록하고 싶다면 안내 가이드에 맞춰 제작한 후 업로드를 진행합니다.

커스텀 스킨 확인

스킨 파일을 업로드한 후, Kollus Live Commerce - 관리 시스템으로 돌아가 계정 관리 > 고객사 정보 > 사이트 정보 영역의 KLC 서비스 연동 항목에서 프론트 설치 확인 버튼을 클릭하여 스크립트 검사 결과를 확인합니다. 정상적으로 연동 스크립트가 설치된 경우, 스크립트 검사 결과 팝업에 정상 메시지가 나타납니다. 정상 메시지가 나타날 때까지 최대 5분 정도 소요될 수 있습니다. 연동 스크립트 설치 이후에도 오류 메시지가 노출되는 경우, 영업 담당자(AM)에게 문의하시면 도움을 받으실 수 있습니다.