← 메인 페이지로

<aside> 🟢 호스팅사 : 메이크샵

</aside>

설치 가이드 순서

A. 디자인스킨 편집 페이지 접근하기

B. 브이리뷰 스크립트 적용하기

C. 나머지 탭 영역에 추가 적용하기

D. 저장 후 적용된 모습 확인하기


﹡셀프 설치가 어렵다면 ****설치 요청하기

리뷰팝업-모바일.png

상세페이지의 리뷰 탭을 클릭하면 리뷰 목록이 팝업창으로 노출됩니다.

설치 가이드

소요시간 20분 내외


A. 디자인스킨 편집 페이지 접근하기

1. 메이크샵 관리자 페이지 로그인


2. 모바일샵 → 모바일D4(개별 디자인) 이동

Untitled


3. 내 모바일샵 스킨 복사한 후 이름 지정


4. [브이리뷰 위젯] 디자인 스킨의 디자인 미리보기 클릭

스크린샷 2021-12-22 오후 7.24.36.png


5. 상품 상세페이지로 이동하여 위젯이 설치될 위치 확인

상품 상세페이지의 메뉴 탭 영역을 확인합니다.

Untitled


6. 모바일 샵 → 모바일D4(개별 디자인)으로 다시 이동하여, HTML 디자인 편집하기 클릭

Untitled


7.왼쪽 메뉴에서 상품관련 → 상품 상세 페이지 ‘기본 상세 페이지’ 클릭

상품 상세페이지를 수정할 수 있는 에디터 화면이 열립니다

Untitled

*현재 작업중인 스킨명이 복사한 스킨(브이리뷰 위젯)이 맞는지 확인합니다

*오른쪽 상단의 코드 하이라이트 사용을 체크하면 코드를 보기가 더 쉽습니다


B. 브이리뷰 스크립트 적용하기

8. 리뷰 탭 영역을 클릭하여 아래 HTML 편집기에 해당 영역의 소스코드 찾기

디자인 편집에서 탭영역을 찾습니다

Kapture 2021-12-23 at 13.04.33.gif


9. 탭 메뉴 소스코드 중 ‘리뷰’에 해당 하는 영역 찾기

리뷰 탭에 해당하는 코드를 찾습니다

Untitled

상품 상세페이지의 메뉴 타이틀 3개 (상품리뷰, Q&A, 배송안내) 가 차례대로 적혀있는 영역입니다.

Untitled

쇼핑몰 마다 리뷰 탭의 이름이 다르기 때문에, 자사 쇼핑몰의 리뷰 탭 이름과 동일한 영역을 찾습니다. 예시의 경우, 리뷰 메뉴의 타이틀이 ‘상품리뷰’이기에, 상품리뷰를 찾습니다.

Untitled


10. 기존 리뷰 탭 영역 코드 복사 후, 주석처리

기존의 코드를 복사(control + C) 한 후, 바로 윗줄에 붙여넣기(control + V) 합니다.

붙여넣은 코드의 양쪽에 <!—- -—> 를 적어줍니다.

Kapture 2021-12-23 at 13.23.02.gif

*기존의 리뷰 탭 영역을 비활성화 하고, 브이리뷰의 위젯을 설치하는 과정입니다.

*주석은 기능이 없는 코드입니다. 코드에 주석 처리시 해당 영역은 보이지 않거나 기능을 하지 않습니다.

*추후 리뷰 탭을 이전으로 복구할 경우를 대비해, 기존 리뷰 탭 영역은 삭제하지 않고 주석처리하여 비활성화 합니다.


11.브이리뷰 주석 스크립트 복사 후 붙여넣기

아래 스크립트를 복사합니다.

<!--브이리뷰 (vreview) 스크립트 / 수정할 경우 연락 부탁드립니다 ([email protected])-->

*용이한 유지보수를 위해, 브이리뷰 코드가 심겨진 위치를 표시하는 역할을 합니다.

10번에서 주석처리한 코드 바로 아래에 복사한 주석 스크립트를 붙여넣습니다.

Kapture 2021-12-23 at 13.24.38.gif


12.리뷰 팝업 기능을 활성화 하는 코드를 심습니다.

아래 코드를 복사합니다

리뷰 탭 영역 코드의 맨 앞 <li> 태그 안에 복사한 코드를 붙여넣습니다.

selected가 있는 <li>태그에 브이리뷰 클래스 코드가 심겨질 경우 다음과 같습니다


C. 나머지 탭 영역에 추가 적용하기

13. 메뉴 탭 내 메뉴 개수에 맞게, 10~12번 작업을 반복


D. 저장 후 적용된 모습 확인하기

14. 브이리뷰 클래스 코드 작업 완료 후, 디자인 스킨 저장


15. [브이리뷰 위젯] 디자인 스킨을 내 모바일샵 적용하기