サイトと Klaviyo Customer Hub にお気に入りボタンを表示する方法

このページで学べること

買い物客がサイトでお気に入りの商品を保存できるようにする方法を学びましょう。商品にお気に入りボタンを追加すると、Klaviyo Customer Hub のドロワーに買い物客が保存したアイテムを表示し、フォローアップフローを送信してコンバージョンを促進できます。

始める前に

このガイドでは、Klaviyo の Customer Hub 設定から「お気に入り」設定を有効にし、ウェブサイトのさまざまなページにお気に入りボタンを追加する方法について説明します。先に進む前に、Klaviyo で Klaviyo Customer Hub 機能が有効になっていることを確認してください。

Klaviyo Customer Hub の詳細はこちら。

お気に入りについて

お気に入りボタンを使うと、購入者は関心のある商品を保存できます。購入者がお気に入りに追加したアイテムは Klaviyo Customer Hub のドロワー内に表示され、追加のコンバージョンを促進するためにフローで使用できます。

Klaviyo Customer Hub の設定で「お気に入り」機能を有効にすると、Klaviyo Customer Hub のインターフェースに表示されるすべての商品にお気に入りボタンが表示されます。購入者がこのボタンをクリックすると、アイテムが「お気に入り」セクションに追加され、Klaviyo のプロファイルに保存されます。

表示を増やして利用を促すために、お気に入りボタンを次の対象にも追加できます。

• 商品詳細ページ
• コレクションページ（「product list pages」とも呼ばれます）

これらいずれかのページからお気に入りに追加されたアイテムは、Klaviyo Customer Hub ドロワー内の購入者の Favorites セクションにも保存されます。訪問者は、顧客アカウントにログインしているかどうかにかかわらず、誰でも商品をお気に入りリストに追加できます。ログインすると、保存したお気に入りが Klaviyo プロファイルに同期されます。

Klaviyo Customer Hub でお気に入りを表示できるようにします。

Customer Hub のドロワーにお気に入りを表示するには、まず Klaviyo で お気に入り の設定を有効にする必要があります。

1. Klaviyo のメインの左側ナビゲーションで、[サービス] - [Klaviyo Customer Hub] を選択します。
2. [デザイン] タブをクリックします。
3. オンサイトブロックでお気に入りを見つけ、チェックボックスをオンにしてお気に入りを有効にするをオンにします。

4. アイコンを選択 ドロップダウンで、商品（例：ハートやプラス記号）の下に表示するお気に入りアイコンの種類を選択します。
   • デフォルトでは、プレビューにはアイコンの未選択（つまりお気に入りに未登録）バージョンが表示されます。プレビュー内のアイコンをクリックすると、お気に入りに追加された状態に変わることを確認できます。
5. [保存] をクリックします。

Klaviyo Customer Hub インターフェース内で表示されるすべての商品に、[お気に入り] ボタンが下に表示されるようになります。クリックすると、アイテムが「お気に入り」セクションに追加されます。

商品詳細ページにお気に入りボタンを追加するためのガイダンスについては、次のセクションに進んでください。

既存のウィッシュリストを Klaviyo Customer Hub にインポートする

別のウィッシュリストアプリケーションから Klaviyo Customer Hub に移行する場合、合理的に損失の少ないデータ移行により、お客様の保存済みアイテムをシームレスに移行できます。Klaviyo では、買い物客が保存した商品を失わないように、過去のお気に入りとウィッシュリストのデータをインポートするための標準ワークフローを提供しています。

ネイティブアプリのインポート

Klaviyo には、次のような一般的なウィッシュリスト アプリからデータを直接インポートするためのネイティブな標準サポートが用意されています：

• Swym
• Wishlist King

CSV 経由でインポート

別のウィッシュリストプロバイダーから移行する場合は、データを Klaviyo に直接インポートできます。Klaviyo Customer Hub のお気に入り設定に移動し、アップロード領域に CSV ファイルをドロップします。テンプレートは不要です。インポーターがファイルの形式を自動的に認識し、それに応じてデータをマッピングして、ショッパーの Klaviyo Customer Hub プロファイルに反映します。

商品詳細ページにお気に入りボタンを追加する

商品詳細ページに "add to favorites" ボタンを追加して、エンゲージメントを大幅に高めましょう。

1. Klaviyo の お気に入り 設定で、[アプリブロックを追加] を選択します。
2. そうすると Shopify のテーマ エディタが新しいウィンドウで起動し、Klaviyo Favorites アプリ ブロックがデフォルトの商品ページ テンプレートに追加されたことを示すモーダルが表示されます。[了解しました] をクリックします。
   

3. 必要に応じて、アプリをクリックしてドラッグし、商品詳細ページ上での位置を調整してください。
4. 準備ができたら、[保存] をクリックして Shopify に変更を保存します。この時点で、お気に入りボタンが商品ページの商品下に表示されます。
5. 任意：追加のスタイル設定を行うには、Klaviyo に戻ります。[アプリ ブロック スタイル] ドロップダウンを使用すると、商品ページのお気に入りボタンの見た目をカスタマイズできます。次のいずれかを選択します。
   • ［継承］ を選択すると、サイトのボタン スタイルを同期します（デフォルト）。
   • Custom を選択して、特定のボタン フォントとテキストの色を選びます。
     

6. 変更内容を保存してください。

ウェブサイトに戻ります。商品詳細ページの商品下に、お気に入りボタンが表示されるはずです。

次に、コレクションページにお気に入りボタンを追加するセクションに進みます。

お気に入りボタンを手動でインストール（ビンテージテーマまたはカスタム セットアップ）

古い Shopify テーマ、またはアプリブロックに対応していないカスタム設定を使用している場合は、お気に入り登録アクション（例：商品ページ）を行いたいページに Klaviyo Wishlist アプリを手動でインストールする必要がある場合があります。

これを行うには以下の手順に従ってください。

1. Shopify ストアの管理画面を開きます。
2. 販売チャネルで、[オンラインストア] を選択します。
3. 現在のテーマで 3 点メニューをクリックし、[コードを編集]を選択します。下書きテーマでテストしたい場合は、まず現在のテーマを複製し、次に複製したテーマのコードを編集します。
   

4. 商品詳細ページ用のファイルを見つけます。これはテーマによって異なりますが、通常は名前に「product」という単語が含まれています。たとえば Dawn テーマでは、これは「main-product.liquid」と呼ばれます。
5. お気に入りボタンを表示したい場所に、次のコードスニペットを貼り付けてください。
   <div class="klaviyo-wishlist-slot" data-product-id="{{ product.id }}"></div>
6. [保存] をクリックします。
7. [ストアをプレビュー] をクリックします。
8. ストアプレビュー内の商品ページに移動します。追加したお気に入りボタンは、指定された場所に表示されるはずです。

コレクションページにお気に入りボタンを追加する

Shopify サイトに小さなコードスニペットをインストールして、コレクションページにお気に入りボタンを追加すると、買い物客は商品を閲覧しながらアイテムをすばやく保存できます。これは特にモバイルデバイスの買い物客に役立ちます。

これを行うには以下の手順に従ってください。

1. Shopify ストアの管理画面を開きます。
2. 販売チャネルで、[オンラインストア] を選択します。
3. 現在のテーマの横にある 3 点リーダーメニューをクリックし、[コードを編集] を選択します。
   • 下書きのテーマでテストする場合は、まず現在のテーマを複製し、次に複製したテーマのコードを編集してください。
4. 左側のサイドバーでコレクション ファイルを検索して開きます。この例では featured-collections.liquid ファイルを使用しますが、テーマによっては別のファイルを使用する場合があります。
   

5. コレクションファイル内で、検索ショートカット（Mac の場合は Command+F、Windows の場合は Control+F）を使用して、ファイル内の単語 “render” を検索します。これにより、商品グリッドが含まれているスニペット名を特定できます。
   • スニペットは通常、{% render 'snippet-name'%} のような形式で表示されます。ここで 'snippet-name' は該当するスニペット ファイルの名前（例：card-product）です。
     

6. 左側のサイドバーで、前のステップで特定したスニペットファイル（例：card-product.liquid）を検索して開きます。
7. このファイルの上部で、「Accepts」の下に記載されているオブジェクト値（例：「card_product」）を確認します。
   

8. 次のコードをコピーし、スニペットファイルに貼り付けます：
   • ヒント：ファイル内で価格がレンダリングされる最初の箇所を探し、その直前に上記のコードを貼り付けてください。
     <div

    class="klaviyo-favorites-plp-slot"

   data-product-id="{{ OBJECT.id }}"

   data-product-url="{{ OBJECT.url }}"

   data-variant-id="{{OBJECT.selected_or_first_available_variant.id}}"

  ></div>
9. 貼り付けたコード内で、OBJECT を先ほどメモしたオブジェクト値に置き換えます。
   • たとえば、ファイルのオブジェクト値が「card_product」の場合、価格の上にあるファイルに貼り付けるとコードは次のようになります。
     

10. Shopify で [保存] をクリックします。
11. サイトのコレクションページに移動して更新します。

各商品にお気に入りボタンが表示されるはずです。読み込みに数秒かかる場合があることに注意してください。デフォルトでは、これらは右上隅に配置されます。配置を変更したい場合は、カスタム CSS に関するサポートについて開発者に相談してください。

お気に入りボタンがまだ表示されない場合は、次のトラブルシューティング手順を試してください。

• コードスニペット内の OBJECT をファイルのオブジェクト値に置き換えたことを確認してください。
• ファイル内の別の場所にコードを貼り付けてみてください。
• 正しいスニペットファイルにコードを貼り付けたことを確認してください。

それでも表示されない場合は、開発者に支援を依頼してください。Klaviyo のサポートチームは、テーマ ファイルを直接編集できません。

次の手順

お気に入りボタンをサイトに追加したら、お気に入りのリマインダーフローを設定して、最近保存したアイテムを買い物客にリマインドし、コンバージョンを促進します。

その他のリソース