Shopify(빈티지 테마 및 헤드리스)에서 Klaviyo 리뷰를 설치하는 방법

학습 내용

빈티지 Shopify 테마 또는 헤드리스 아키텍처에서 Klaviyo 리뷰를 설치하는 방법을 알아보세요. 이 프로세스에서는 여러 코드 조각을 복사해 사이트 코드에 붙여넣어야 해요.

Shopify 2.0 테마를 사용 중이라면 코드를 사용하지 않고 Klaviyo 리뷰를 설치할 수 있어요. 자세한 내용은 Klaviyo 리뷰 시작하기에 대한 도움말을 참조하세요. WooCommerce를 사용한다면 WooCommerce용 Klaviyo 리뷰를 설치하는 방법을 알아보세요.

시작하기 전에 알아야 할 것

사이트 코드에 이 코드 조각을 붙여넣기 전에, Shopify 스토어에 Klaviyo 리뷰 앱을 추가 해 주세요. 빈티지 테마의 경우 Klaviyo의 온사이트 트래킹을 활성화해 주세요.

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

헤드리스 Shopify 스토어에 Klaviyo 리뷰를 통합하려면 Klaviyo.js라고도 하는 Klaviyo의 JavaScript 트래킹 스니펫을 리뷰 위젯을 추가하려는 모든 페이지(예: 제품 페이지)에 추가해 주세요. Klaviyo의 온사이트 트래킹 또는 가입 양식을 구성했다면 이미 이 스니펫을 설치했을 수도 있어요.

Shopify 스토어용 Klaviyo.js를 설치하는 방법을 알아보세요.

Klaviyo.js를 설치한 후, 아래 단계를 따라 헤드리스 스토어프런트의 head에 위젯을 추가해 주세요. 위젯 섹션의 Shopify 테마 편집 안내는 빈티지 테마에 적용돼요.

1. 아래 섹션에서 사용하려는 각 위젯 스니펫을 위젯이 표시되어야 하는 페이지 템플릿 또는 컴포넌트에 복사해 붙여 넣어 주세요.
2. 제품별 위젯의 경우 {{product.id}}을(를) 제품의 숫자 Shopify 제품 ID로 바꿔 주세요. 예: data-id="123456789". 각 제품 페이지에 올바른 ID를 입력해 주세요. 별점 스니펫에서도 {{product.title}} 및 {{product.type}}을(를) 해당 제품의 제목과 유형으로 바꿔 주세요.
3. SEO / All reviews 위젯에서는 data-id="all"을(를) 변경하지 마세요. 추천 리뷰 캐러셀 스니펫에는 제품 ID가 필요하지 않아요.
4. 변경 사항을 저장하고 스토어프론트를 미리 확인해 보세요. 변경 사항을 배포하기 전에, 게시된 리뷰가 있는 상품 페이지와 위젯을 추가한 다른 모든 페이지를 확인해 보세요.

코드 조각을 추가하세요.

아래 코드 조각을 사용하면 특정 리뷰 위젯이 스토어의 다양한 영역에 표시되도록 할 수 있어요.

• 별점 위젯은 특정 제품의 현재 별점을 표시하며, 보통 제품명 아래에 설치돼요.
• 리뷰 요약 위젯은 제품에 대해 선택된 모든 평점을 세부적으로 보여주는 차트, 리뷰와 함께 제출된 사용자 이미지, 그리고 제품이 받은 가장 일반적인 피드백을 보여줘요. 일반적으로 제품 페이지 하단 근처에 설치돼요.
• 제품 리뷰 위젯은 리뷰 요약 위젯과 리뷰 목록 위젯을 결합한 위젯이에요. 사이트에 제품 리뷰 위젯을 추가하면 리뷰 목록 위젯과 리뷰 요약 위젯을 따로 추가할 필요가 없어요.
• 리뷰 목록 위젯은 게시된 모든 리뷰와 고객 질문 목록을 검색창, 필터, 리뷰 작성 버튼, 질문하기 버튼과 함께 표시해요. 일반적으로 리뷰 요약 위젯 바로 아래에 설치돼요.
• 추천 리뷰 캐러셀 위젯은 모든 제품에서 강조 표시된 리뷰를 보여줘요. 홈페이지, 독립형 리뷰 페이지 또는 사이트의 다른 어디에든 추천으로 표시할 수 있어요. 이 위젯에서 추천으로 표시할 리뷰를 선택할 수 있어요. 가능한 경우 고객이 제출한 이미지가 각 리뷰에 함께 표시되며, 리뷰와 함께 이미지가 제출되지 않은 경우 제품 이미지가 사용돼요.
• SEO/모든 리뷰 위젯은 모든 제품의 모든 리뷰를 단일 페이지에 표시해요. 이 위젯을 사용하면 SEO를 개선하고, 잠재 고객이 현재 고객이 무엇을 좋아하는지 한곳에서 확인할 수 있어요. 이 위젯은 사이트의 독립형 리뷰 페이지에 가장 많이 추가돼요.

별점 위젯

별점 위젯을 사용해 제품의 평균 평점과 받은 리뷰 수를 눈에 띄게 표시해 보세요.

빈티지 테마의 경우 제품 제목 아래에 이 위젯을 설치해 주세요:

1. Shopify 스토어 관리자 페이지를 여세요.
2. 판매 채널에서 온라인 스토어를 클릭하세요.
3. 현재 테마 옆의 점 3개 메뉴를 클릭한 다음 복제를 선택해 현재 테마의 복제본을 만드세요.
4. 복제된 테마의 점 세 개 메뉴에서 코드 편집을 클릭해 주세요.
   

5. 파일 검색창에 “product”를 검색하고 제품 페이지 콘텐츠에 사용된 파일을 찾으세요. product.liquid일 수도 있고, product-template.liquid, 또는 이와 유사한 파일일 수도 있어요. (맞춤 제품 페이지 템플릿을 사용하는 경우 대신 그 템플릿을 선택하세요.)
   

6. 파일을 선택한 다음 {{ product.title }}을(를) 검색해 제품 제목을 표시하는 코드를 찾으세요.
   

7. 이 코드 아래에 새 줄을 추가해 주세요.
8. 새 줄에 이 코드 조각을 붙여넣으세요:
   <div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}"      data-product-type="{{product.type}}"></div>
   

9. 저장을 클릭합니다.
10. 스토어 미리보기를 클릭하세요.
11. 게시된 리뷰가 있는 제품의 스토어 미리보기에서 해당 제품의 제품 페이지로 이동해 주세요. 제품 제목 아래에 별 위젯이 표시될 거예요. 리뷰가 없는 제품은 위젯 설정에서 별점 위젯을 숨길 수 있어요.

제품 리뷰 위젯

리뷰 요약 및 리뷰 목록 위젯(또는 제품 리뷰 위젯만)을 사용해 사이트의 각 제품에 대해 게시된 모든 리뷰의 요약과 목록을 추가하세요.

빈티지 테마를 사용하려면 별점 위젯과 동일한 테마에 이 위젯을 설치해 주세요:

1. Shopify 스토어 관리자 페이지를 여세요.
2. 판매 채널에서 온라인 스토어를 클릭하세요.
3. 별점 위젯에 사용했던 것과 동일한 테마를 선택해 주세요. 해당 위젯을 건너뛰었다면, 현재 테마를 선택해 편집하거나, 세 점 메뉴 > 복제를 클릭해 복사본을 편집해 주세요.
4. 선택한 테마의 점 3개 메뉴에서 코드 편집을 클릭해 주세요.
   

5. 파일 검색창에 “product”를 검색하고 제품 페이지 콘텐츠에 사용된 파일을 찾으세요. product.liquid일 수도 있고, product-template.liquid, 또는 이와 유사한 파일일 수도 있어요. (맞춤 제품 페이지 템플릿을 사용하는 경우 대신 그 템플릿을 선택하세요.)
   

6. 파일을 선택한 다음, 맨 아래(또는 리뷰 요약 및 목록 위젯을 표시하려는 위치)로 이동해 주세요.
7. 새 줄을 추가한 다음 이 코드 조각을 붙여넣으세요:
   <div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
   

8. 저장을 클릭합니다.
9. 스토어 미리보기를 클릭하세요.
10. 후기가 있는 제품의 스토어 미리보기에서 해당 제품의 제품 페이지로 이동하세요. 페이지 하단 근처에 후기 요약과 목록 보기 위젯이 표시될 거예요.

리뷰 요약 위젯과 리뷰 목록 위젯 분리

위 섹션에 설명된 대로 함께 설치하는 대신, 후기 요약 및 후기 목록 위젯을 별도로 설치하려면 다음 코드 조각을 사용하세요.

요약 위젯 검토

<div id="klaviyo-reviews-summary" data-id="{{product.id}}"></div>

리뷰 목록 위젯

<div id="klaviyo-reviews-list" data-id="{{product.id}}"></div>

추천 리뷰 캐러셀 위젯(선택 사항)

추천 리뷰 캐러셀은 선택한 모든 페이지(예: 홈페이지)에 직접 선택한 리뷰를 표시합니다.

추천 리뷰를 표시하는 캐러셀을 추가하려면 먼저 리뷰 텍스트가 포함된 게시된 제품 리뷰를 선택해 주세요. 텍스트가 없는 별점 평가와 스토어 리뷰는 기능 컨트롤을 사용해 선택할 수 없어요.

1. Klaviyo의 기본 탐색에서 웹사이트 > 리뷰를 선택해 주세요.
2. 모든 후기를 클릭해 주세요.
3. 추천으로 표시할 리뷰 옆에서 기능 아이콘을 클릭해 주세요. 대신 추가 기능 옵션이 표시되면, 해당 옵션을 열고 추천 리뷰에 추가를 선택해 주세요.

사이트에 표시할 리뷰를 여러 개 선택한 후에는 어떤 페이지에든 리뷰 캐러셀 위젯을 설치할 수 있습니다. 캐러셀이 표시되길 원하는 페이지로 이동한 다음, 해당 페이지의 코드에 다음 스니펫을 붙여넣으세요:

<div id="klaviyo-featured-reviews-carousel"></div>

변경 사항을 저장한 다음 페이지를 미리 보기로 확인해 선택한 리뷰가 캐러셀에 표시되는지 확인해 주세요.

SEO/모든 후기 위젯(선택 사항)

SEO/모든 리뷰 위젯은 모든 제품에 걸쳐 게시된 모든 리뷰를 표시해요. 단독 리뷰 페이지나 회사 소개 페이지에 추가해 보세요. 해당 페이지의 코드에서 위젯이 표시될 위치에 아래 스니펫을 붙여넣어 주세요.

<div id="klaviyo-reviews-all" data-id="all"></div>

변경 사항을 저장한 다음 페이지를 미리 보기하여 위젯에 게시된 리뷰가 표시되는지 확인해 주세요.

결과

Shopify 테마 사본을 수정했다면, 미리보기에서 위젯이 예상대로 표시되는지 확인한 후 게시해 주세요. 헤드리스 스토어프론트의 경우, 변경 사항을 미리보기로 확인한 후 배포해 주세요. 리뷰는 상품 페이지와 위젯을 설치한 다른 모든 페이지에 표시돼요.

추가 자료