Shopify ヘッダーにお気に入りのリンク（アイコン、テキスト、またはボタン）を追加する方法

Shopifyのナビゲーションバー（ヘッダー）にお気に入りリンクを追加して、買い物客が保存済みの商品をカスタマーハブで直接開けるようにする方法をご確認ください。

これはアイコン（例：ハート）、シンプルなテキストリンク（例：「お気に入り」）、またはボタンとして実装できます。このガイドでは、Shopify の Liquid コードを使用して、必要なコードをサイトのヘッダーに挿入する方法について説明します。

このヘッダーリンクをクリックすると、保存したお気に入りが開きます。買い物客が商品詳細ページまたはコレクションページから商品を保存できるようにするには、サイトとカスタマーハブにお気に入りボタンを表示する方法に従ってください。

注意 このプロセスでは Shopify のテーマコードを編集します。コードを書くことに抵抗がある場合や、チームに開発者がいない場合は、サポートを受けるために Klaviyo パートナーにご連絡いただくことをおすすめします。Klaviyo サポートでは、カスタムコードの実装に関するトラブルシューティングはできません。

始める前に

このリンクを追加する前に、Shopifyストアでカスタマーハブを設定し、Klaviyoでお気に入りを有効化してください。編集するShopifyテーマでKlaviyoアプリの埋め込みが有効になっていることを確認してください。

変更を行う前に、公開中のテーマを複製することを強くおすすめします。これにより、公開中のストアに影響を与えることなく新しいリンクをテストできます。

1. Shopify で、[Online Store] > [Themes]に移動します。
2. ライブテーマの横にある 3 点メニュー (...) をクリックしてください。
3. [複製] を選択してください。

ステップ 1：アセットを準備する（アイコンを使用する場合）

以下のアイコンオプションでは、15KB未満のSVGファイルを使用してください。SVGは品質を損なうことなくあらゆる画面サイズに拡大縮小でき、テーマの色を引き継ぐこともできます。テキストリンクまたはボタンをご希望の場合は、ステップ2に進んでください。

1. 使用するアイコンを見つける必要があります。どのようなアイコンでも構いませんが、ピクセル化を避けるためにSVGの使用をおすすめします。標準（MITライセンス）バージョンはこちらからダウンロードできます：Heroicons heart.svg。以下のアイコンコードと一致するように、ファイルをicon-heart.svgとして保存してください。
2. Shopify 管理画面で、[オンラインストア] > [テーマ]に移動します。
3. 複製されたテーマを見つけて、3点メニュー（...）> コードを編集をクリックしてください。
4. 左側のサイドバーで、assetsフォルダを右クリックし、アップロード...を選択してファイルピッカーを開きます。
5. SVGファイルを選択し、開くをクリックします。

ステップ 2：ヘッダー（上部ナビゲーション バー）のリンクを挿入する

次に、アイコン、テキストリンク、またはボタンのコードスニペットを追加します。いずれのオプションでも、カスタマーハブでお気に入りが開きます。

1. ステップ1をスキップした場合は、Shopifyでコードエディタを開きます：オンラインストア > テーマに移動してください。複製したテーマの横にある3点リーダーメニュー（...） > [コードを編集]をクリックしてください。複製したテーマのコードエディタで、ヘッダーを制御するファイルを見つけてください。
   • Online Store 2.0 テーマ（例：Dawn）： sections/header.liquid を検索します。
   • Vintage テーマ：snippets/header-icons.liquid または header-bar.liquid を検索します。
2. 挿入ポイントを見つける：Ctrl+F（Mac の場合は Cmd+F）を押して、cart または account という単語を検索します。新しいコードは、これらの既存のアイコンが入っている同じコンテナ（通常は <div> または <ul>）内に貼り付けてください。
3. 以下のコードオプションのうち1つを、リンクを表示したい場所（例：カートアイコンの直前）に貼り付けてください。

オプションA：アイコンリンク

手順 1 を完了していて、例で icon-heart.svg という名前のハートアイコンを表示したい場合は、次のコードを使用してください：

<a href="#k-hub/favorites"
   id="favorites-icon-bubble"
   aria-label="Open Favorites"
   title="Favorites"
   style="display:flex;align-items:center;justify-content:center;height:4.4rem;width:4.4rem;">
  <span style="height:20px;width:20px">
    {{ 'icon-heart.svg' | inline_asset_content }}
  </span>
</a>

オプションB：テキストリンクまたはボタン

テキスト リンクまたはボタンを使用する場合は、このコードを使用します。この場合、アセットをアップロードする必要はありません。

シンプルなテキストリンクの場合：

<a href="#k-hub/favorites" class="header__menu-item header__menu-item--list" style="text-decoration: none;">
  Favorites
</a>

ボタンの場合：

<a href="#k-hub/favorites" class="button button--primary">
  Favorites
</a>

1. [保存] をクリックします。

ヒント：テーマのスタイルに合わせる テーマでヘッダーアイコンに特定のCSSクラス（例：header__iconまたはicon-link）が使用されている場合、上記のコード内のインラインstyle=属性をそのクラス（例：class="header__icon"）に置き換えることができます。結果をプレビューして、間隔とホバー効果が他のヘッダーリンクと一致していることを確認してください。

ステップ3：変更内容をテストして公開します

コードを保存したら、編集したテーマをプレビューし、公開する前にリンクをテストしてください。

1. Shopifyで、[オンラインストア] > [テーマ]に移動します。編集した複製テーマの横にある[三点リーダーメニュー（...）] > [プレビュー]をクリックします。
2. デスクトップとモバイルでヘッダーを確認してください。追加したアイコン、テキストリンク、またはボタンが表示されるはずです。それをクリックして、カスタマーハブに保存したお気に入りが開くことを確認してください。
3. 複製したテーマでのすべての変更を顧客に表示する準備ができたら、オンラインストア > テーマに戻ります。下書きのテーマで編集済みの複製を見つけ、公開をクリックします。
4. 本番ストアを開き、[お気に入り]リンクをもう一度テストしてください。

トラブルシューティング

リンクが表示されない、正しく表示されない、またはカスタマーハブが開かない場合：

• アイコンが表示されない場合：ファイルがassetsフォルダにあり、15KB未満のSVGで、コードスニペットに一致するように名前が正確にicon-heart.svgになっていることを確認してください。ファイル名は大文字と小文字を区別します。
• アイコンの位置がずれています： テーマのナビゲーションバーの高さに合わせるために、コードスニペットの style 属性内の height と width の値を調整する必要がある場合があります。
• 変更が表示されない場合：編集したテーマをプレビューしていることを確認してください。Shopifyからプレビューを再度開いてください。テーマの複製を保存しても公開中のストアは更新されません。テスト後に公開してください。
• リンクでカスタマーハブが開かない場合：カスタマーハブが設定されていること、および表示しているテーマでKlaviyoアプリの埋め込みが有効になっていることを確認してください。リンクが引き続き#k-hub/favoritesを使用していることを確認してください。