Klaviyo カスタマーハブにカートを追加する方法

カスタマーハブに組み込みのカート エクスペリエンスが追加されました。買い物客はページから移動することなく、ハブ内で直接カートを表示および管理できます。商品レコメンデーションや保存済みのお気に入りなど、カートに表示される内容を設定できるほか、ストアフロントのカート リンクを置き換えて、Klaviyo カスタマーハブを開くようにすることもできます。

始める前に

カートを設定する前に、Klaviyoでカスタマーハブ機能が有効になっていることを確認してください。カートは、有料のカスタマーハブプランまたはアクティブな無料トライアルを利用しているShopifyおよびShopify Headlessのストアフロントで使用できます。

カートを追加する前に、ShopifyのカスタマーハブまたはShopify Headlessの設定を完了してください。

Shopify Headlessの場合、ストアフロントが、買い物客がカスタマーハブで開く前にShopifyカートを作成することを開発者に確認してもらってください。カスタマーハブはストアフロントの既存のカートを使用します。

カートの設定

1. ウェブサイト > カスタマーハブ > デザインに移動し、ハブを編集を選択します。
2. エディタのコントロールを使用してカートを開き、有効化してください：
   • 左側のナビゲーションにコンテンツを追加（+）が表示されている場合は、それを選択し、次に機能の下でカートを選択します。これによりカートが有効になり、その設定が開きます。カートがすでに有効になっている場合は、プレビューの表示メニューからカートを選択し、カートのプレビューをクリックして設定を編集します。
   • プレビューの上に開くと閉じるのコントロールが表示されている場合は、開くを選択します。ページメニューからカートを選択します。コンテンツタブで、表示をすべての購入者に設定します。

ここから、次のことができます。

• Klaviyo カスタマーハブのカートを有効または無効にする
• カートの配置を、Klaviyo カスタマーハブのタブとして表示するか、独自のドロワーとして表示するかを指定します。
• カート内に表示する内容を選択してください（お気に入り、商品おすすめ）。
• カートリンクを置き換えることで、/cartで終わるストアフロントリンクが、ネイティブのカートページではなくカスタマーハブのカートを開くようにします。

カートに追加ウィジェットは個別に設定します。購入者が設定済みのスクロールしきい値に到達すると、購入者の表示設定に従って、商品詳細ページに表示されます。商品をカートに追加ウィジェットの設定方法をご覧ください。

購入者に表示される内容

買い物客が、カスタマーハブのタブ内または独自のドロワーで、商品が入ったカートを開くと、次の内容が表示されます：

• カート — 現在カート内にあるアイテム（商品の画像、名前、バリエーション、価格）
• 数量コントロール — アイテムを削除するためのゴミ箱アイコン付きステッパーと、数量を調整するためのマイナス／プラス ボタン
• カートを完成させる—カート内の商品と行動に基づき、カートアイテムの下に最大3件の商品レコメンデーションを表示します（カスタマーハブとカートで商品レコメンデーションが有効になっており、かつおすすめ商品が利用可能な場合）。
• お気に入りを購入—購入者が在庫がある場合にカートに追加できる保存済みアイテム（お気に入りがカスタマーハブとカートで有効になっており、購入者に表示され、かつ保存済みアイテムが利用可能な場合）
• 小計と［チェックアウト］ボタン—パネルの下部に固定表示されます。［チェックアウト］をクリックすると、購入者はShopifyのチェックアウトに移動します。

カートが空の場合、買い物客にはカート内の商品、レコメンド、お気に入り、チェックアウトバーの代わりに、カートは空ですと買い物を開始ボタンが表示されます。

カート機能

カート内のお気に入り

有効化され、購入者に表示されている場合、購入者が表示するために商品を保存していると、空ではないカート内にお気に入りを購入セクションが表示されます。購入者は、このビューから利用可能な保存済みアイテムを直接カートに追加できます。標準のShopifyストアフロントでは、すでにカートに入っている保存済み商品はこのセクションから除外されます。

カートにお気に入りを表示するには、Hubエディターのカート設定でお気に入りをオンにしてから、公開をクリックします。

おすすめ商品

有効になっていて、推奨商品を利用できる場合、空ではないカート内の購入者の商品一覧の下にカートを完成させるセクションが表示されます。おすすめは、購入者のカート内の商品と閲覧履歴に基づいてパーソナライズされます。このセクションには、利用可能なバリエーションが少なくとも1つある商品が最大3点表示されます。標準のShopifyストアフロントでは、すでにカートに入っている商品は除外されます。

最初に、 カスタマーハブ > 拡張機能 で カスタマーハブのプロダクトレコメンドを有効に し、その設定を保存してください。

カートにレコメンデーションを表示するには、Hubエディターのカート設定で商品のレコメンデーションをオンにしてから、公開をクリックしてください。

カートのリンクの差し替え

有効にすると、URLが/cartで終わるストアフロントリンクは、Shopifyのカートページに移動する代わりに、カスタマーハブのカートを開きます。これらのリンクのいずれかを使用している場合、カートアイコンが置き換えられます。カスタムカートボタンと、クエリ文字列を含むリンクは、この設定の対象外です。買い物客はカスタマーハブでカートを管理してから、チェックアウトを使用してShopifyのチェックアウトに進むことができます。

この設定を有効にするには、ハブエディタのカート設定でカートリンクを置き換えるをオンにし、次に公開をクリックしてください。ストアフロントのカートアイコンをテストして、カスタマーハブのカートが開くことを確認してください。

カートの配置

ハブエディターのカート設定にある配置設定を使用して、買い物客がカートにアクセスする方法を選択します：

[スタイル] タブから、ハブ全体の外観（形状、ドック側、色、フォント）も設定できます。カートはこれらの設定を引き継ぎます。