カスタマーハブのスタイル設定

このページで学べること

カスタマーハブのドロワーのスタイル設定で利用可能なオプションと、ブランドに合わせてデザインする方法について説明します。カスタマーハブのインターフェースは顧客体験に深く組み込まれているため、ウェブサイトの延長のように見えるスタイルを採用するのがベストプラクティスです。

始める前に

このガイドでは、カスタマーハブのインターフェイスをカスタマイズする方法を説明します。次へ進む前に、カスタマーハブの機能が有効になっていることを確認してください。

Klaviyoカスタマーハブの詳細はこちら。

カスタマーハブのデザインオプション

カスタマーハブのドロワーには、カスタマイズ可能なタブが複数あります。

• おすすめ
• 注文
• カート（有効化した場合にのみ表示）
• チャット（ウェブチャットが有効な場合にのみ表示）
• プロファイル

これらの各タブでは、テキスト、色、フォントなどを編集してデザインをカスタマイズできます。カスタマイズで選択したスタイルは、カスタマーハブのドロワーにある各タブに連動して反映され、サイト訪問者に一貫したブランド体験を提供します。

KlaviyoでKlaviyo カスタマーハブのデザイン設定を編集する際は、Previewボタンを使用して、ウェブサイト上のハブインターフェースに加えた変更を確認してください。

各タブのメインの行動喚起をカスタマイズする

デフォルトでは、買い物客が顧客アカウントにサインインすると、Klaviyo は「first.nameさん、ようこそ」と表示します。これは、カスタマーハブのドロワーの [あなたにおすすめ]タブのメイン見出しとなります。このテキストは編集できません。

ただし、未認証の買い物客については、ログイン前に [サインイン] ボタンの上に表示する行動喚起の見出しを独自に作成できます。これにより、未認証の訪問者によるサインインとハブの利用を後押しできます。

以下の例では、メインの行動喚起に “報酬を獲得し、注文を追跡し、ショッピング履歴を保存する。” と表示されています。

注意：「利用可能な特典」インジケーターは、次のいずれかに該当する場合に自動的に表示されます。

1. カスタマーハブ内で設定された 固定クーポン、または
2. ロイヤルティ外部連携（Smile など）を有効にしている場合。

ハブインターフェイスの メインの行動喚起を更新するには：

1. Klaviyo の左側ナビゲーションで [ウェブサイト] > [Klaviyo カスタマーハブ] タブを開きます。
2. [デザイン]＞[ハブを編集]を開きます。
3. 右側のレイアウトドロワーで、固定レイアウトの下にある、[ログイン]ブロック内に表示する行動喚起をカスタマイズします。Klaviyo カスタマーハブドロワーの各タブに対して、これを行えます。
   • おすすめ
   • 注文
   • プロファイル
4. [保存] をクリックします。

カスタマーハブをデザインする

カスタマーハブのインターフェイスをカスタマイズするためのデザインオプション：

1. ウェブサイトタブの[カスタマーハブ]に進みます。
2. Klaviyo カスタマーハブのナビゲーションで[デザイン]を選択します。
3. デザインページの上部に、ハブのステータスを表示するカードが表示されます。[ハブを編集]ボタンを選択して、Klaviyo カスタマーハブエディターに入ります。
   

4. エディタで、左側のレールナビゲーションからパレットアイコンを選択してください。
5. [スタイル]メニューから、表示言語、フォント、色、スタイル設定を調整し、これらの調整が Klaviyoカスタマーハブのインターフェースキャンバスでどのように表示されるかをプレビューできます。

6. 必要に応じて、カスタム CSS を使用して高度なスタイル設定を適用できます。詳しくは以下の カスタム CSS セクションをご覧ください。
7. 別の言語を選択する方法の詳細については、Klaviyoカスタマーハブの言語およびロケールのサポートに関する記事をご覧ください。
8. [公開]をクリックして、変更を公開します。

カスタマーハブのウィジェットをカスタマイズ

Klaviyo カスタマーハブ自体のデザインに加えて、ハブウィジェットもカスタマイズできます。ハブウィジェットとは、ウェブサイト上に表示される小さなフローティング要素で、訪問者がクリックするとKlaviyo カスタマーハブのインターフェースをすばやく開けます。ウィジェットでは、受信したチャットメッセージや、お気に入りリストにアイテムを追加する際のフィードバックなど、ショッパーにタイムリーな情報が表示されます。有意義なエンゲージメントをお客様と生み出すために、ウィジェットUIを有効にすることをおすすめしますが、ハブを公開するために必須ではありません。

ハブ ウィジェットをカスタマイズするには：

1. Klaviyoカスタマーハブエディタに移動します。
2. ハブの上にあるフローティングコントロールパネルで、状態を[開く]から[閉じる]に切り替えます。これにより、[ウィジェットを編集]のスライドアウトが開きます。
3. [ウィジェット設定] セクションでは、どのショッパーにウィジェットを表示するか、またウィジェットがクリックされたときにどのKlaviyo カスタマーハブビューを開くかを調整できます。
   • サイトでウィジェットを表示するショッパーを選択します：
     • すべての購入者（認識済み、ログイン中、ログアウト中）– ウィジェットは全員に表示されます。
     • 認識済みまたはログイン済みの購入者 – ウィジェットは、Klaviyo がそのユーザーを認識している（Identified）場合、またはログインしている（Authenticated）場合にのみ表示されます。これは、新規訪問者の混雑を減らしつつ、リピーターにはきめ細かな体験を維持するのに最適です。
     • ログイン済みの購入者のみ – ウィジェットは、アクティブな Shopify セッションがあるユーザーにのみ表示されます。
4. ウィジェットの形状、色、アイコン、レイアウトも設定できます。

追加のウィジェットの状態をカスタマイズ

アイコン の横にあるキャレットを選択し、別のウィジェット状態に移動すると、追加のウィジェット状態をカスタマイズできます。

• 「カートに追加」のステータスは商品詳細ページで表示されます。カスタマイズ可能なウィジェットは、顧客が商品詳細ページの最上部から下へとスクロールし、従来の「カートに追加」ボタンが画面の外に出てしまった時に、顧客に商品の購入またはカートへの保存を促します。詳細はカスタマーハブのカート追加ウィジェットを設定する方法をご覧ください。

カスタマーハブ用のカスタム CSS

ブランディングの要件をカスタマーハブのデザインオプションで満たせない場合は、カスタム CSS で高度なスタイル設計を適用できます。

カスタマーハブでは、サイトのCSSと競合するのを避けるために CSS リセットを使用していますが、フローティングドロワーやカスタムの角丸の値など、エッジケースへの対応や独自のスタイル適用のために、カスタム CSS を追加する必要がある場合があります。

カスタム CSS を適用する

カスタム CSS をカスタマーハブのデザイン設定内の[カスタム CSS]のセクションに直接追加し、変更を保存してください。

カスタマーハブ内のすべての基本要素には、kl-hub- で始まるクラス名が付いています。

• すべてのテキスト要素にはクラス kl-hub-text があり、見出しにはクラスがあります kl-hub-heading
• ボタンにはクラス kl-hub-button があり、さらにそのバリエーション（例：kl-hub-button-primary、kl-hub-button-secondary など）も含まれます。
• Klaviyoカスタマーハブのドロワー自体にクラスがあります。 kl-hub-drawer
• テキスト入力には次のクラスがあります kl-hub-input
• すべてのコンテンツブロックにクラス kl-hub-content-block が付与され、クラス名にはブロックの「内部名」も含まれます（例：「Reward program」という名前のコンテンツブロックの場合はkl-hub-content-block-reward-program）。

これは網羅的なリストではありません。ブラウザのデバッガでカスタマーハブを調べれば、さらに詳細を確認できます。要素にkl-hub-で始まるクラスがある場合、カスタム CSSに使用しても安全です。

CSS の例

Klaviyoカスタマーハブ内のすべてのボタンと見出しを大文字にしたい場合は、次のカスタム CSS を記述できます。

.kl-hub-button, .kl-hub-heading {

    text-transform: uppercase;
}

その他のリソース