← 메인 페이지로

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

</aside>

설치 가이드 순서

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

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

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번에서 주석처리한 코드 바로 아래에 복사한 주석 스크립트를 붙여넣습니다.


12.리뷰 개수 연동 기능을 활성화 하는 코드를 심습니다.

아래 코드를 복사합니다

리뷰 탭에서 개수가 들어가는 곳에 복사한 코드를 붙여넣습니다.

기존에 다른 클래스 코드가 들어있는 <span>태그에 브이리뷰 클래스 코드를 심을 경우, 기존의 클래스 코드(아래 예시의 경우itemnum) 다음에 브이리뷰 클래스 코드 vreview-review-count 를 붙여넣고, 사이는 띄어쓰기를 해줍니다.


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

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

예시 쇼핑몰의 상세 페이지에는 리뷰 탭 메뉴가 한곳에 위치하기 때문에 추가 작업이 필요하지 않습니다.

내 쇼핑폴 상세페이지 내 메뉴가 세 군데 위치한다면, 총 3번을 작업합니다.


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

14. 모든 메뉴 탭에 브이리뷰 클래스 코드 작업 완료 후, 디자인 스킨 저장