Shopify で Klaviyo レビューをインストールする方法（ビンテージ テーマとヘッドレス）

このページで学べること

ビンテージ Shopify テーマまたはヘッドレス アーキテクチャで Klaviyo レビューをインストールする方法をご確認ください。このプロセスでは、複数のコードスニペットをコピーして、サイトのコードに貼り付けます。

Shopify 2.0 テーマを使用している場合は、コードを使用せずに Klaviyo レビューをインストールできます。詳しくはKlaviyo レビューのスタートガイドをご覧ください。WooCommerce を使用している場合は、WooCommerce 用 Klaviyo レビューをインストールする方法をご覧ください。

始める前に

これらのコードスニペットをサイトのコードに貼り付ける前に、Shopify ストアに Klaviyo レビュー アプリを追加してください。ビンテージ テーマの場合は、Klaviyo のオンサイト トラッキングを有効化してください。

Shopify でヘッドレス アーキテクチャを使用してインストールする

ヘッドレス Shopify ストアに Klaviyo レビューを連携するには、Klaviyo の JavaScript トラッキングスニペット（Klaviyo.js とも呼ばれます）を、レビューのウィジェットを追加したいすべてのページ（例：商品ページ）に追加します。Klaviyo のオンサイトトラッキングまたはサインアップフォームを設定している場合は、このスニペットをすでにインストールしている可能性があります。

Shopify ストアに Klaviyo.js をインストールする方法をご確認ください。

このスクリプトをサイトに追加したら、次の手順に進み、以下の手順のコードスニペットをサイトのコードにコピーしてください。

コードスニペットを追加してください。

以下のコードスニペットを使用すると、特定のレビュー ウィジェットをストアのさまざまな場所に表示できます。

• 星評価ウィジェットには、特定の商品に対する現在の星評価が表示され、たいていは商品の名前の下に設置されます。
• レビュー概要ウィジェットには、商品に対して選択されたすべての評価の内訳を示すグラフ、レビューと一緒に送信されたユーザー画像、商品が受け取った最も一般的なフィードバックが表示されます。通常は、商品ページの下部付近にインストールされます。
• 商品レビュー ウィジェットは、レビュー サマリー ウィジェットとレビュー リスト ウィジェットを組み合わせたものです。サイトに商品レビュー ウィジェットを追加した場合、レビュー リスト ウィジェットとレビュー サマリー ウィジェットを個別に追加する必要はありません。
• レビューリスト ウィジェット には、公開済みのレビューと顧客の質問の一覧に加えて、検索バー、フィルター、レビューを書く ボタン、質問する ボタンが表示されます。通常はレビュー概要ウィジェットのすぐ下にインストールされます。
• おすすめレビュー カルーセル ウィジェットには、すべての商品から選ばれたレビューが表示されます。これは、ホームページ、独立したレビュー ページ、またはサイト上の他の場所に掲載できます。このウィジェットに掲載するレビューを選択できます。利用可能な場合、顧客が投稿した画像が各レビューに添付されます。レビューと一緒に画像が投稿されていない場合は、商品の画像が使用されます。
• SEO / すべてのレビューウィジェットは、すべての商品にわたるすべてのレビューを 1 つのページに表示します。このウィジェットを使用して SEO を改善し、見込み顧客が現在の顧客に支持されている点を確認できる場所を 1 つにまとめて提供します。このウィジェットは、サイト上の独立した レビュー ページに追加されることが最も一般的です。

星評価ウィジェット

星評価ウィジェットを使用して、商品の平均評価と受け取ったレビュー数を目立つように表示します。

商品のタイトルの下にこのウィジェットを設置するには：

1. Shopify ストアの管理画面を開きます。
2. Sales channels の下で、Online Store をクリックします。
3. 現在のテーマの横にある 3 点メニューをクリックし、[複製] を選択して現在のテーマのクローンを作成します。
4. 3 点メニューから、[コードを編集] をクリックします。
   

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. Sales channels の下で、Online Store をクリックします。
3. 現在のテーマの横にある Customize をクリックして編集するか、公開中のテーマではなく下書きのテーマを編集する場合は、三点メニュー > Duplicate をクリックします。
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 または全レビューウィジェットには、すべての商品の公開済みレビューが表示されます。これを独立したレビューページ、または About ページに追加します。

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

達成できること

この記事で説明したウィジェットをインストールし、新しいテーマを公開すると、レビューが商品ページ全体（およびサイト内でインストールしたその他のページ）に表示されます。

その他のリソース