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

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

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

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

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

これらのウィジェットは完全にカスタマイズ可能です。ブランドのフォントと色を選択できるほか、注目のレビュー カルーセルでハイライトするレビューを手動で選択できます。
レビュー ウィジェットと送信ページの言語を選択
デフォルトでは、すべての Klaviyo レビューコンテンツは英語です。別の言語を選択するには:
- Klaviyo の レビュー タブに移動します。
- [レビュー設定] をクリックします。

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

- 言語を選択メニューで、言語を選択します。
Klaviyo レビューの言語の更新は、次に適用されます:
- レビュー投稿ページ
- サイト上のウィジェット
- 星評価ウィジェット
- レビュー概要ウィジェット
- レビューリスト ウィジェット
- 商品レビューウィジェット
- 注目レビューのカルーセルウィジェット
1 つのウィジェットだけの言語設定は更新できません。すべてのウィジェットで同じ言語を使用する必要があります。すでにサイトで公開中のものを含め、すべてのウィジェットと送信ページは直ちに更新されます。
Klaviyo レビューの言語を更新しても、他の Klaviyo 機能(例:カスタム質問、フロー、サインアップフォーム、プリファレンスページ、お客様が送信したレビューの内容など)には適用されません。これらは手動で翻訳および編集する必要があります。
商品にレビューが投稿されるまで、レビュー ウィジェットを非表示にする
これらの手順は、スター評価ウィジェットとレビューリスト ウィジェットに適用されます。
デフォルトでは、レビューがない商品には 0/5 の星と、まだレビューが送信されていないことを示すメッセージが表示されます。レビューを受け取るまでウィジェットを非表示にしたい場合は、次の手順に従ってください。
- Klaviyo で レビュー タブを開きます。
- [レビューの設定] を選択します。
- [サイト上のウィジェット] をクリックします。
- [商品レビュー] または [星評価] を選択してください。
- 空の状態メニューを開きます。
- 0 つ星も表示 設定をオフに切り替えます。

ウィジェットの外観を変更
次の手順に従って、任意のレビュー ウィジェットのスタイル(例:フォント、色など)を調整します。
- Klaviyo で レビュー タブを開きます。
- [レビューの設定] を選択します。
- [サイト上のウィジェット] をクリックします。
- 編集するウィジェットを選択します。
- [レイアウトとスタイル] をクリックします。
- フォント、色、間隔など、必要に応じてウィジェットの外観を調整します。
1 つのレビューウィジェットで設定(例:ボタンの色)を変更しても、SEO / すべてのレビュー ウィジェットを除き、他のウィジェットのその設定には影響しません。このウィジェットは、商品レビューウィジェットからすべての設定を継承します。商品レビューウィジェットではなく SEO / すべてのレビュー ウィジェットの外観をカスタマイズするには、カスタム CSS を使用する必要があります。
利用可能なレビュー スタイル設定
各ドロップダウン メニューを開いて、そのカテゴリで利用可能なスタイル オプションの詳細を確認してください。
商品レビューウィジェット
商品レビューのスタイル設定の Layout & style セクションで、次の設定を調整できます:
- マージン
ウィジェットの上、下、左、右のスペースを調整します。 - プライマリ背景色
この設定をオンにすると、ウィジェットの全領域に背景色が追加されます。 - セカンダリ背景色
ヒストグラム バーなどの特定のウィジェット要素の色を編集します。 - アクセント色
範囲質問での選択や認証済みレビュアー バッジなど、さまざまなアクセントに使用される色を編集します。 - 角丸
商品レビュー ウィジェット領域全体に角丸を適用します。これは、プライマリ背景色を追加した場合にのみ表示されます。 - 区切り線
各レビューの間に任意の区切り線を追加します。 - メイン フォント
既存のサイト フォントを使用するには [サイトから継承] を選択するか、フォントを選択します。メイン フォント の設定は、次を除くすべてのウィジェット フォントに適用されます:- 顧客レビューセクションの #/5 ラベル。
- 各レビューのタイムスタンプ。
- スター ヒストグラムのラベルテキスト。
- 検索フィールドのプレースホルダーテキスト。
- セカンダリフォント
サイトから継承を選択すると既存のサイトフォントを使用できます。あるいはフォントを選択します。セカンダリフォントの設定は、星のヒストグラム、検索フィールド、各レビューのタイムスタンプ、および カスタマーレビューセクションの #/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 ボタンとタブ、または Write a review ボタンを表示または非表示にするには、Actions カードでその選択をオン/オフに切り替えます。
- レビューリストウィジェットでフィルターセクションを削除または追加するには、フィルター のトグルを無効または有効にします。
- これらの設定のいずれかにチェックを入れる/外すことで、表示されるフィルター オプションを決定します:検索バー、並べ替え(最近、最高、最低)、評価、メディア、カスタム質問。
最も関連性の高いフィルタリングについて
最も関連性が高い フィルターは、ユーザーが最も役立つと感じる可能性が高いレビューを強調表示します。選択すると、レビューは次の順序で表示されます:
- 訪問者の国から送信されたテキスト、画像、またはカスタム質問を含むレビュー
- 閲覧者の国から送信された、内容がないレビュー(つまり、評価のみのレビュー)
- 他の国から送信された、テキスト、画像、またはカスタム質問を含むレビュー
- 他国から送信された、コンテンツのないレビュー(つまり、評価のみのレビュー)
各カテゴリ内では、レビューは投稿日時順に並べ替えられ、最新のものが先頭に表示されます。
レビュー概要で商品画像を機能させるかどうかを選択します。
レビュー概要には、お客様が送信した商品画像のオプション ギャラリーが含まれます。このギャラリーを有効または無効にするには:
- Klaviyo の レビュー タブに移動します。
- [レビュー設定] をクリックします。
- [サイト上のウィジェット] を選択してください。
- 商品レビュー ウィジェットを選択します。
- [レビューの要約とメディア] を選択します。
- 画像ギャラリー 設定をオフまたはオンに切り替えます。

レビューリストからアイテムを非表示にする
これらの手順は、レビューリスト ウィジェットに適用されます。
必要に応じて、レビュー一覧から要素(例:レビュー投稿者、ストアの返信、タイムスタンプ)を非表示にできます。これを行うには以下の手順に従ってください。
- Klaviyo で レビュー タブを開きます。
- [レビューの設定] を選択します。
- [サイト上のウィジェット] をクリックします。
- 商品レビュー を選択します。
- [レビューリスト] をクリックします。
- 非表示にしたい要素はすべてオフに切り替えます。
レビューリストで「スター評価」、「メディア」、「カスタム質問」を無効にすると、「レビュー フィルター」設定オプションは表示されなくなります。サイト訪問者が検索をフィルタリングできるようにするには、レビューリストで少なくとも 1 つのフィルター条件(スター評価、メディア、またはカスタム質問)を表示する必要があります。
注目レビューのカルーセルに表示するレビューを選択します。
注目のレビューは、注目レビューのカルーセルに表示されます。注目のレビューとして表示するレビューを選択するには:
- [レビュー] タブに移動します。
- [すべてのレビュー] を選択してください。
- [注目] したいレビューの横にある [機能] をクリックします。

- 必要に応じて繰り返します。強調表示するレビューは、少なくとも 3~5 件選択することをおすすめします。
その他のリソース
- How to install Klaviyo Reviews on Shopify 2.0 themes
Learn how to install Klaviyo Reviews on your Shopify 2.0 store by installing the app and adding reviews widgets.
- How to install Klaviyo Reviews on Shopify (vintage themes and headless)
Learn how to install Klaviyo Reviews with a vintage Shopify theme or headless architecture. This process involves copying several code snippets and pasting them into your site’s code.
- How to install Klaviyo Reviews for WooCommerce
Learn how to install Klaviyo Reviews on your WooCommerce store and add reviews widgets. To learn about all the steps required to get started, head to Getting started with Klaviyo Reviews.