レビュー ウィジェットをカスタマイズする方法
レビュー ウィジェット(例:ストア上で商品レビューの表示と投稿を行うブロック)の外観をカスタマイズする方法を学びます。
利用可能なレビューウィジェット
Klaviyoレビューには、ストアに追加できる複数のウィジェットがあります:
- 星評価ウィジェット
特定の商品に対する現在の星評価を表示します。多くの場合、商品の名前の下に追加されます。

- レビュー要約ウィジェット
商品のすべての評価の内訳を示すチャート、レビューとともに送信されたユーザー画像、最も一般的な顧客からのフィードバックを表示します。通常、商品ページの下部付近に追加されます。

- レビュー リスト ウィジェット
検索バー、フィルター、[レビューを書く] ボタン、[質問する] ボタンとともに、公開済みのすべてのレビューとお客様の質問のリストを表示します。最も多いのは、レビューサマリー ウィジェットのすぐ下に追加されることです。

- 商品レビュー ウィジェット
上記のレビュー サマリー ウィジェットとレビュー リスト ウィジェットを組み合わせたものです。サイトに商品レビュー ウィジェットを追加した場合、レビュー リスト ウィジェットとレビュー サマリー ウィジェットを個別に追加する必要はありません。 - 注目レビューのカルーセル ウィジェット
任意の商品から選択したレビューを表示します。これは、ホームページ、独立したレビュー ページ、またはサイト上の他の場所に掲載できます。このウィジェットに掲載するレビューを選択できます。利用可能な場合は、顧客が送信した画像が各レビューに添付されます。レビューと一緒に画像が送信されなかった場合は、商品の画像が使用されます。

- SEO / すべてのレビュー ウィジェットでは、すべての商品にわたるすべてのレビューを 1 つのページに表示します。このウィジェットを使用して SEO を改善し、見込み顧客が現在の顧客に好評な点を確認できる 1 か所を提供します。このウィジェットは、サイト上の独立した レビュー ページに追加されることがほとんどです。

ブランドのフォントと色を選択できるほか、注目のレビューカルーセルで強調表示するレビューを手動で選択できます。カスタマイズオプションはウィジェットによって異なります。
レビュー ウィジェットと送信ページの言語を選択
デフォルトでは、Klaviyoレビューウィジェットと送信ページのインターフェーステキストは英語です。別の言語を選択するには:
- Klaviyo の レビュー タブに移動します。
- [レビュー設定] をクリックします。

- [一般] を選択します。

- 言語を選択メニューで、ご利用の言語を選択してください。
- オプション:訪問者の設定に基づいて言語を設定をオンにすると、各訪問者のブラウザ設定に基づいて言語を選択できます。
- [変更を保存] をクリックします。
Klaviyoレビューの言語を更新すると、次の項目に適用されます:
- レビュー投稿ページ
- サイト上のウィジェット
- 星評価ウィジェット
- レビュー概要ウィジェット
- レビューリスト ウィジェット
- 商品レビューウィジェット
- 注目レビューのカルーセルウィジェット
- SEO / 全レビューウィジェット
言語設定は、サイトにすでにインストールされているウィジェットを含め、ウィジェットと送信ページ全体に適用されます。エディターでは、ウィジェットごとに別の言語を選択することはできません。訪問者の設定に基づいて言語を設定がオンの場合、表示される言語は訪問者によって異なることがあります。
Klaviyoレビューの言語を更新しても、その他のKlaviyo機能(例:カスタム質問、フロー、サインアップフォーム、設定ページ、顧客が送信したレビューの内容など)には適用されません。これらは手動で翻訳して編集する必要があります。
商品にレビューが投稿されるまで、レビュー ウィジェットを非表示にする
これらの手順は、別途インストールされたレビュー概要ウィジェットとレビューリストウィジェットを含む、星評価および商品レビューウィジェットに適用されます。
デフォルトでは、レビューがない商品には 0/5 の星と、まだレビューが送信されていないことを示すメッセージが表示されます。レビューを受け取るまでウィジェットを非表示にしたい場合は、次の手順に従ってください。
- Klaviyo で レビュー タブを開きます。
- [レビューの設定] を選択します。
- [サイト上のウィジェット] をクリックします。
- [商品レビュー] または [星評価] を選択してください。
- 空の状態メニューを開きます。
- 星0の表示設定をオフに切り替えます。

- 変更内容を公開をクリックしてください。レビューがない場合に非表示にしたい各ウィジェットについて、この手順を繰り返してください。
ウィジェットの外観を変更
フォント、色、間隔などのウィジェットスタイルを調整するには、次の手順に従ってください。以下で説明するように、SEO / All reviewsウィジェットはProduct reviewsと色とフォントを共有します。
- Klaviyo で レビュー タブを開きます。
- [レビューの設定] を選択します。
- [サイト上のウィジェット] をクリックします。
- 商品レビュー、星評価、または注目レビューのカルーセルを選択してください。
- 商品レビューまたは星評価については、レイアウト&スタイルをクリックしてください。注目のレビューのカルーセルについては、別々のレイアウトパネルとスタイルパネルを使用してください。
- フォント、色、間隔など、必要に応じてウィジェットの外観を調整します。
- [変更内容を公開] をクリックしてください。
1つのレビューウィジェットで設定(例:ボタンの色)を変更しても、SEO / All reviewsを除き、他のウィジェットは変更されません。このウィジェットは商品レビューから色とフォントを継承しますが、レイアウトはロックされており、一部の表示設定は異なります。レイアウトを変更する、または商品レビューとは別にスタイルを適用するには、custom CSSを使用してください。
利用可能なレビュー スタイル設定
各ドロップダウン メニューを開いて、そのカテゴリで利用可能なスタイル オプションの詳細を確認してください。
商品レビューウィジェット
商品レビューのスタイル設定の Layout & style セクションで、次の設定を調整できます:
- マージン
ウィジェットの上、下、左、右のスペースを調整します。 - プライマリ背景色
この設定をオンにすると、ウィジェットの全領域に背景色が追加されます。 - セカンダリ背景色
ヒストグラム バーなどの特定のウィジェット要素の色を編集します。 - アクセント色
範囲質問での選択や認証済みレビュアー バッジなど、さまざまなアクセントに使用される色を編集します。 - 角丸
商品レビュー ウィジェット領域全体に角丸を適用します。これは、プライマリ背景色を追加した場合にのみ表示されます。 - 区切り線
各レビューの間に任意の区切り線を追加します。 - プライマリフォント
サイトから継承を選択すると既存のサイトフォントを使用できます。あるいはフォントを選択します。これにより、ウィジェットのベースフォントが設定されます。補足テキストもセカンダリフォントの設定を使用します。一方、ボタンとフィルターには独自のフォントコントロールがあります。 - セカンダリフォント
サイトから継承を選択すると既存のサイトフォントを使用できます。あるいはフォントを選択します。スター分布のラベル、レビューのタイムスタンプ、平均評価の/5部分など、補足テキストに使用するセカンダリフォント設定スタイルです。フィルターを使用して検索フィールドとレビューのフィルターのスタイルを設定します。 - フォント サイズ、太さ、色
それぞれ、プライマリ フォントとセカンダリ フォントのサイズ、太さ、色を調整します。 - ボタン設定
- 色
ボタンの色。 - 角の半径
ボタンの角の丸みです。丸みをなくすには 0 に設定してください。 - 境界線
ボタンの周囲に表示される色付きの境界線。 - ホバー色を指定する
ホバー時にボタンの色を変更する場合は、この設定を有効にします。 - 余白
各ボタン内の余白(ボタンテキストの周囲の余白)。余白を追加すると、ボタンがより大きく表示されます。 - フォント、フォント サイズ、フォントの太さ、フォントの色
ウィジェット ボタンに使用されるフォントです。
- 色
- 評価の設定
- 塗りつぶし色
選択された星の色(例:商品が 5 つ星中 4 つ星の評価の場合、最初の 4 つの星にこの色が使用されます)。 - 空の色
選択されていない星の色です(例:商品が 4/5 の星で評価されている場合、5 つ目の星はこの色になります)。 - ボーダー
すべての星を囲む任意の色付きボーダーです。 - 間隔
各スター間のスペース。 - 形
とがった星、丸みのあるハートなど、別の評価スタイルを選択します。 - サイズ
- 概要
レビュー概要内の星のサイズ。 - Review
各顧客レビュー内の星のサイズ。
- 概要
- 塗りつぶし色
- フィルター設定
フィルター設定は、検索フィールドとレビュー フィルターに適用されます。- 背景色
フィルターボタンと検索バーの背景色です。 - アクティブ時の線の太さ、色
アクティブ(つまり選択済み)のフィルター オプションを示す枠線の太さと色です。(最小 1。) - 角丸
検索フィールドの角の丸み。丸めを行わない場合は、「0 px」を選択します。 - 検索アイコン
虫眼鏡の検索アイコンのオン/オフを切り替えます。 - フォントスタイル、フォントカラー、文字間隔、プレースホルダーテキストの色
検索プレースホルダーを含め、検索フィールドと絞り込みフィルター内のテキストのスタイルを設定します。
- 背景色
- 画像設定
- 概要画像の角の丸み
レビュー概要における概要画像の選択の丸み付け。 - レビュー画像の角丸半径
個々のレビュー内の各画像の角丸処理。 - レビュー画像のサイズ
個々のレビューに含まれる画像のサイズ。
- 概要画像の角の丸み
注目レビューのカルーセル
注目レビュー カルーセルのスタイル設定の レイアウト セクションで、次の設定を調整できます:
- セクションの見出し
カスタマーレビューなどの見出しを追加または編集します。 - カルーセル タイプ
カルーセルに画像を表示するか、テキストのみを表示するかを選択します。 - ページあたりの最大レビュー数
ページごとに表示する注目レビューの数を選択します。 - テキスト制限
各レビューのプレビューに含めるテキストの行数を選択します。 - 画像の高さ
レビュー プレビューに含まれる画像のサイズを編集します。 - マージン
ウィジェットの上、下、左、右のスペースを調整します。 - テキストの配置
テキストを左、右、中央のいずれに揃えるかを指定します。 - カード項目
レビューの日付、作成者、検証バッジを表示するオプションをオンまたはオフに切り替えます。
注目レビュー カルーセルのスタイル設定の スタイル セクションでは、次の設定を調整できます。
- セクション見出しのフォント設定
セクション見出しのフォント、フォント色、フォント サイズ。この設定をウィジェットに適用するには、Layout で Section headline を有効にする必要があります。 - 角丸半径
注目レビューの各タイルの角の丸みを調整します。 - カードの色
各レビュータイルの背景色を追加します。 - 影
カードの影を追加または削除します。 - 枠線
カードの枠線を追加または削除します。 - 評価スタイルの設定
- 塗りつぶし色
選択された星の色(例:商品が 5 つ星中 4 つ星の評価の場合、最初の 4 つの星にこの色が使用されます)。 - 空の色
選択されていない星の色です(例:商品が 4/5 の星で評価されている場合、5 つ目の星はこの色になります)。 - ボーダー
すべての星を囲む任意の色付きボーダーです。 - 間隔
各スター間のスペース。 - サイズ
各カスタマーレビュー内の星のサイズ。 - 形
とがった星、丸みのあるハートなど、別の評価スタイルを選択します。
- 塗りつぶし色
- レビュー見出しのフォント設定
既存のサイト フォントを使用するには Inherit from site を選択するか、フォントとフォント サイズ、太さ、色を選択します。 - レビュー本文のフォント設定
サイトから継承を選択すると既存のサイト フォントを使用できます。または、フォントとフォント サイズ、太さ、色を選択してください。 - 日付と名前ラベルのフォント設定
既存のサイトフォントを使用するには Inherit from site を選択するか、フォントとフォント サイズ、太さ、色を選択します。
星の評価
- マージン
ウィジェットの上、下、左、右のスペースを調整します。 - 評価スタイルの設定
- 塗りつぶし色
選択された星の色(例:商品が 5 つ星中 4 つ星の評価の場合、最初の 4 つの星にこの色が使用されます)。 - 空の色
塗りつぶされていない(つまり、選択されていない)星の色(例: 商品が 5 つ星中 4 つ星の場合、5 つ目の星はこの色になります)。 - ボーダー
すべての星を囲む任意の色付きボーダーです。 - 間隔
各スター間のスペース。 - サイズ
星評価ウィジェット内の星のサイズです。 - 形
とがった星、丸みのあるハートなど、別の評価スタイルを選択します。
- 塗りつぶし色
- プライマリ フォント
テキスト # ratings に使用するフォントを編集します。既存のサイト フォントを使用するには Inherit from site を選択するか、フォントを選択します。 - フォントサイズ、太さ、色
# 評価 テキストのサイズ、太さ、色を調整します。
レビュー フィルターとアクションを無効または有効にします
顧客が、評価、メディア(例:レビューに画像が含まれているかどうか)、またはカスタム質問への回答でレビューを絞り込めるようにします。これにより、見込み顧客は自分に最も関連性の高いレビューを見つけやすくなります。
- Klaviyo の レビュー タブに移動します。
- [レビュー設定] をクリックします。
- [サイト上のウィジェット] を選択してください。
- [商品レビュー] を選択します。
- [レビューレポート]を選択します。
- Q&Aボタンとタブ、またはレビューを書くボタンを表示または非表示にするには、アクションカードでそのオプションをオンまたはオフにしてください。
- レビューリストウィジェットでフィルターセクションを削除または追加するには、フィルター のトグルを無効または有効にします。
- 検索バー、並べ替え、および利用可能なレビュー・フィルター(評価、メディア、カスタム質問、バリエーション)をオンまたはオフにします。バリエーションオプションは、一般設定で商品のバリエーションサポートを有効にするがオンになっており、レビュー項目でバリエーションが選択されている場合に利用できます。
- [変更内容を公開] をクリックしてください。
最も関連性の高いフィルタリングについて
最も関連性が高い フィルターは、ユーザーが最も役立つと感じる可能性が高いレビューを強調表示します。選択すると、レビューは次の順序で表示されます:
- 訪問者の国から送信されたテキスト、画像、またはカスタム質問を含むレビュー
- 閲覧者の国から送信された、内容がないレビュー(つまり、評価のみのレビュー)
- 他の国から送信された、テキスト、画像、またはカスタム質問を含むレビュー
- 他国から送信された、コンテンツのないレビュー(つまり、評価のみのレビュー)
各カテゴリ内では、レビューは投稿日時順に並べ替えられ、最新のものが先頭に表示されます。
レビュー概要で商品画像を機能させるかどうかを選択します。
レビュー概要には、お客様が送信した商品画像のオプション ギャラリーが含まれます。このギャラリーを有効または無効にするには:
- Klaviyo の レビュー タブに移動します。
- [レビュー設定] をクリックします。
- [サイト上のウィジェット] を選択してください。
- 商品レビュー ウィジェットを選択します。
- [レビューの要約とメディア] を選択します。
- 画像ギャラリー設定をオフまたはオンに切り替えます。

- [変更内容を公開] をクリックしてください。
レビューリストからアイテムを非表示にする
これらの手順は、レビューリスト ウィジェットに適用されます。
必要に応じて、レビュー一覧から要素(例:レビュー投稿者、ストアの返信、タイムスタンプ)を非表示にできます。これを行うには以下の手順に従ってください。
- Klaviyo で レビュー タブを開きます。
- [レビューの設定] を選択します。
- [サイト上のウィジェット] をクリックします。
- 商品レビュー を選択します。
- [レビューリスト] をクリックします。
- アイテムを確認で、非表示にしたい要素のチェックを外してください。
- [変更内容を公開] をクリックしてください。
利用可能なレビューのフィルターは、表示するレビュー項目(星評価、メディア、カスタム質問、および商品バリエーションのサポートが有効になっている場合はバリエーション)によって異なります。これらの項目をすべて非表示にすると、レビューのフィルターのオプションは表示されなくなります。検索バーと並べ替えは、フィルターカードで引き続き有効にできます。
注目レビューのカルーセルに表示するレビューを選択します。
注目レビューは、注目レビューのカルーセルに表示されます。レビュー本文が含まれる公開済みの商品レビューを注目レビューとして設定できます。注目レビューとして設定するレビューを選択するには:
- [レビュー] タブに移動します。
- [すべてのレビュー] を選択してください。
- 紹介したいレビューの横にある機能をクリックします。その他の機能オプションが表示される場合は、レビュー全文を紹介するためにおすすめレビューに追加を選択します。

- 必要に応じて繰り返してください。強調表示するレビューは、少なくとも3–5件を選択することをおすすめします。
その他のリソース
- Shopify 2.0 テーマに Klaviyo レビューをインストールする方法
アプリをインストールし、レビュー ウィジェットを追加して、Shopify 2.0 ストアに Klaviyo レビューをインストールする方法をご覧ください。
- Shopify で Klaviyo レビューをインストールする方法(ビンテージ テーマとヘッドレス)
ビンテージ Shopify テーマまたはヘッドレス アーキテクチャで Klaviyo レビューをインストールする方法をご確認ください。このプロセスでは、複数のコードスニペットをコピーして、サイトのコードに貼り付けます。
- WooCommerce 用 Klaviyo レビューのインストール方法
WooCommerce ストアに Klaviyo レビューをインストールし、レビューウィジェットを追加する方法をご覧ください。開始に必要なすべての手順については、Klaviyo レビューのスタートガイドに進んでください。