カスタム CSS を使用して Klaviyo レビューのウィジェットのスタイルを設定する方法

このページで学べること

Klaviyo レビュー向けのカスタム CSS について、基本的なユースケースの実装方法を含めて学びます。より高度なユースケースについては、Klaviyo レビューのカスタム CSS に関する開発者向けリソースをご覧ください。ウィジェットのカスタマイズの大半は ドラッグ＆ドロップ エディター を使用して実装できます；CSS が必要になるのは高度なユースケースのみです。

Klaviyo レビューのカスタム CSS について

Klaviyo レビューには幅広い CSS クラスセレクターが用意されており、これらを使用してカスタム CSS を作成し、レビュー ウィジェットに高度なスタイル設定オプションを適用できます。詳しくは、Klaviyo レビュー CSS クラスの完全な辞書をご覧ください。

カスタム CSS を適用する方法

他のカスタム CSS と同様に、Klaviyo レビューにカスタム CSS を適用できます：

• サイトのメイン CSS スタイルシートにカスタム CSS を追加します。
• 単一のページのコード内に <style> タグを挿入して、そのページに CSS を適用します。
• CSS を単一の HTML 要素（例：div）に埋め込み、その要素にのみ適用します。
• サイト全体にカスタム CSS を追加するには、Theme Settings > Custom CSS（Shopify）または Styles > CSS（WooCommerce）を使用します。

ここでは、実装が最も簡単な最後のオプションに焦点を当てます。

Klaviyo レビューは、デフォルトのスタイルを含め、通常、E コマース プラットフォームの CSS の後に読み込まれる点にご注意ください。そのため、カスタム CSS がデフォルトで上書きされないよう、正確なセレクタを使用することが重要です。

Shopify 用にカスタム CSS を適用する

1. Shopify 管理画面で、[Online Store] > [Themes]に移動します。
2. 現在のテーマの追加オプション メニュー（3 つの点）から、[複製] をクリックします。
   
   現在のテーマが公開中の場合は、変更を確認して問題のトラブルシューティングを行う前にサイト訪問者に編集内容が表示される可能性があるため、編集しないことをおすすめします。

3. テーマの新しいコピーの横にある [カスタマイズ] をクリックします。
4. テーマ設定アイコンをクリックします。
   

5. メニューから [Custom CSS] を選択します。
   

6. カスタム CSS を追加します。
   

1. レビューのウィジェットが表示されるエディタ内のページ（例：[デフォルトのプロダクト]）に移動します。
2. 編集内容を確認してから、[公開] をクリックしてください。

WooCommerce のカスタム CSS を追加

特定のページに CSS を適用するには、ページ ID セレクター.page-id-YOUR_PAGE_IDを使用する必要があります。ページ ID の見つけ方をご覧ください。

1. Wordpress 管理画面で、[外観]＞[エディター] に移動します。
2. [スタイル] を選択してください。
   

3. 3つのドットの（その他）メニューを開きます。
4. [追加 CSS] を選択します。
   

5. カスタム CSS を追加します。
   

1. 編集内容を確認してから、[公開] をクリックしてください。

カスタム CSS のユースケース

以下の CSS スニペットは、いくつかの基本的なユースケースをカバーしています。より高度なカスタマイズには、開発者のサポートが必要です。チームに開発者がいない場合や、ご自身でコードを書くことに不安がある場合は、サポートのご利用として Klaviyo パートナーにご連絡いただくことをご検討ください。

#klaviyo-product-reviews-wrapper {
  .kl_reviews__star {
    display: none;
  }
  .kl_reviews__full_star {
    background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/full-moon.png?v=1705073898"); 
    background-size: cover;
  }
  .kl_reviews__partial_star {
    background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/last-quarter-moon.png?v=1705073898");
    background-size: cover;
  }
  .kl_reviews__empty_star {
    background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/new-moon.png?v=1705073898");
    background-size: cover; 
  }
}

#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}  

#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}

その他のリソース