Shopify에 클라비요 리뷰를 설치하는 방법(빈티지 테마 및 헤드리스)

예상 4 읽은 시간(분)

업데이트 2024년 11월 5일 오전 10:46 EST

빈티지 Shopify 테마 또는 헤드리스 아키텍처로 클라비요 리뷰를 설치하는 방법을 알아보세요. 이 프로세스에는 여러 코드 스니펫을 복사하여 사이트 코드에 붙여넣는 작업이 포함됩니다.

Shopify 2.0 테마를 사용하는 경우 코드를 사용하지 않고 클라비요 리뷰를 설치할 수 있습니다. 자세한 내용은 클라비요 리뷰 시작하기 문서를 참조하세요. 우커머스를 사용하는 경우, 우커머스용 클라비요 리뷰를 설치하는 방법을 알아보세요.

이 프로세스를 수행하려면 Shopify에서 테마 파일을 직접 편집해야 합니다. 이 작업을 직접 수행하는 것이 불편하다면 개발자에게 문의하거나 클라비요 파트너에게 도움을 요청하세요.

시작하기 전 안내 사항

사이트 코드에 이러한 코드 스니펫을 붙여넣기 전에 클라비요 리뷰 앱을 Shopify 스토어에 추가합니다. 빈티지 테마의 경우 클라비요의 현장 추적을 활성화하세요.

Shopify에서 헤드리스 아키텍처로 설치

클라비요 리뷰를 헤드리스 Shopify 스토어와 통합하려면 리뷰 위젯을 추가하려는 모든 페이지(예: 제품 페이지)에 클라비요의 자바스크립트 추적 코드 조각(Klaviyo.js라고도 함)을 추가합니다. 클라비요의 온사이트 추적 또는 가입 양식을 구성한 경우 이 스니펫을 이미 설치했을 수 있습니다.

Shopify 스토어용 Klaviyo.js 설치 방법을 알아봅니다.

이 스크립트를 사이트에 추가한 후 아래 단계를 진행합니다.

코드 스니펫 추가

아래 코드 스니펫을 사용하면 특정 리뷰 위젯을 스토어의 여러 영역에 표시할 수 있습니다.

별점 위젯은 특정 제품에 대한 현재 별점을 표시하며, 제품 이름 아래에 설치되는 경우가 가장 많습니다.
리뷰 요약 위젯에는 제품에 대해 선택된 모든 평점, 리뷰와 함께 제출된 사용자 이미지, 제품이 받은 가장 일반적인 피드백을 분석한 차트가 표시됩니다. 일반적으로 제품 페이지 하단 근처에 설치됩니다.
제품 리뷰 위젯은 리뷰 요약과 리뷰 목록 위젯의 조합입니다. 사이트에 제품 리뷰 위젯을 추가하는 경우 리뷰 목록과 리뷰 요약 위젯을 별도로 추가할 필요가 없습니다.
리뷰 목록 위젯에는 게시된 모든 리뷰 및 고객 질문 목록이 검색창, 필터, 리뷰 작성 버튼, 질문하기 버튼과 함께 표시됩니다. 일반적으로 리뷰 요약 위젯 바로 아래에 설치됩니다.
추천 리뷰 캐러셀 위젯은 모든 제품의 하이라이트 리뷰를 표시합니다. 홈페이지, 독립형 리뷰 페이지 또는 사이트의 다른 어느 곳에서나 추천할 수 있습니다. 이 위젯에 표시되는 리뷰를 선택할 수 있습니다. 가능한 경우 고객이 제출한 이미지가 각 리뷰에 첨부되며, 리뷰와 함께 제출된 이미지가 없는 경우 회원님의 제품 이미지가 사용됩니다.
SEO/모든 리뷰 위젯은 모든 제품에 대한 모든 리뷰를 한 페이지에 표시합니다. 이 위젯을 사용하여 SEO를 개선하고 잠재 고객사가 현재 고객사가 좋아하는 제품을 한 곳에서 확인할 수 있도록 하세요. 이 위젯은 사이트의 독립형 리뷰 페이지에 추가되는 경우가 가장 많습니다.

별점 위젯

별점 위젯을 사용하여 제품의 평균 평점과 받은 리뷰 수를 눈에 띄게 표시할 수 있습니다.

별점 평가 위젯

제품 제목 아래에 이 위젯을 설치하려면 다음과 같이 하세요:

Shopify 스토어 관리자를 엽니다.
판매 채널에서 온라인 스토어를 클릭합니다.
현재 테마 옆의 점 3개 메뉴 > 복제를 클릭하면 현재 테마의 복제본을 만들 수 있습니다.
점 3개 메뉴에서 코드 편집을 클릭합니다.
파일 검색창에서 '제품'을 검색하고 제품 페이지 콘텐츠에 사용된 파일을 찾습니다. product.liquid일 수 있습니다, product-template.liquid, 또는 이와 유사한 것을 선택합니다. (사용자 지정 제품 페이지 템플릿을 사용하는 경우 해당 템플릿을 대신 선택합니다.)
파일을 선택한 다음 {{ product.title }} 을 검색하여 제품 제목을 표시하는 코드를 찾습니다.
이 코드 아래에 새 줄을 추가합니다.
새 줄에 이 코드 스니펫을 붙여넣습니다:
<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div>
저장을 클릭합니다.
스토어 미리 보기를 클릭합니다.
스토어 미리 보기 내에서 제품 페이지로 이동합니다. 제품 제목 아래에 별 위젯이 표시됩니다.

제품 리뷰 위젯

리뷰 요약 및 리뷰 목록 위젯(또는 제품 리뷰 위젯)을 사용하여 사이트의 각 제품에 대해 게시된 모든 리뷰의 요약 및 목록을 추가할 수 있습니다.

이미지가 포함된 리뷰 요약

요약 및 목록 위젯을 별도로 설치하려면 아래의 별도의 리뷰 요약 및 리뷰 목록 위젯 섹션으로 이동하세요.

이 위젯을 설치하려면 다음과 같이 하세요:

Shopify 스토어 관리자를 엽니다.
판매 채널에서 온라인 스토어를 클릭합니다.
현재 테마 옆의 사용자 지정을 클릭하여 편집하거나, 라이브 테마 대신 초안 테마를 편집하려면 점 3개 메뉴 > 복제를 클릭합니다.
점 3개 메뉴에서 코드 편집을 클릭합니다.
파일 검색창에서 '제품'을 검색하고 제품 페이지 콘텐츠에 사용된 파일을 찾습니다. product.liquid일 수 있습니다, product-template.liquid, 또는 이와 유사한 것을 선택합니다. (사용자 지정 제품 페이지 템플릿을 사용하는 경우 해당 템플릿을 대신 선택합니다.)
파일을 선택한 다음 맨 아래(또는 리뷰 요약 및 목록 위젯이 표시되기를 원하는 위치)로 이동합니다.
새 줄을 추가한 다음 이 코드 스니펫을 붙여넣습니다:
<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
저장을 클릭합니다.
스토어 미리 보기를 클릭합니다.
스토어 미리 보기 내에서 리뷰가 있는 제품의 제품 페이지로 이동합니다. 페이지 하단에 리뷰 요약 및 목록 보기 위젯이 표시됩니다.