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

サイトのナビゲーションバー（「ヘッダー」）に特定の「お気に入り」アイコンを追加すると、顧客はカスタマーハブ内で簡単にお気に入りを見つけられるようになり、エンゲージメントが向上します。購入者に保存済みアイテム専用の起点を用意することで、より多くを買い物かごに入れ、より頻繁にストアへ戻ってくるよう促せます。

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

このガイドでは、ハートのアイコンをテーマ アセットにアップロードし、Shopify の Liquid コードを使用してコード リンクをサイトのヘッダーに挿入する方法について説明します。

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

始める前に

変更を加える前に、公開中のテーマを複製することを強く推奨します。これにより、公開中のストアに影響を与えることなく、安全な環境で新しいアイコンをテストできます。

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

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

まず、ボタンとして使用するアイコンファイルをアップロードします。SVG ファイルの使用をおすすめします。画面サイズに合わせて品質を損なわずに拡大縮小でき、テーマのカラーを継承できます。

1. 使用したいアイコンを見つける必要があります。これはどのアイコンでも構いませんが、ピクセル化を防ぐために SVG の使用をおすすめします。こちらから標準（MIT ライセンス）バージョンをダウンロードできます：Heroicons heart.svg。
2. Shopify 管理画面で、[オンラインストア] > [テーマ]に移動します。
3. テーマを見つけて、3 点メニュー (...) > コードを編集 をクリックしてください。
4. 左側のサイドバーで [アセット]フォルダまでスクロールし、[新しいアセットを追加]をクリックします。
5. アイコン ファイルをアップロードしてください。

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

次に、アイコンを表示してそれをカスタマーハブにリンクするコードスニペットを追加します。

1. テーマのコードエディターで、ヘッダーを制御するファイルを見つけます。
   • 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"）に置き換えることができます。これにより、間隔とホバー効果が他のボタンと完全に一致します。

達成できること

保存後、ブラウザのキャッシュを回避するために、新しいシークレット/プライベートウィンドウでストアを開いてください。ナビゲーションバーにハートアイコンが表示されます。このアイコンをクリックすると、カスタマーハブ内の お気に入り タブが開くようになります。

トラブルシューティング

アイコンが表示されない、または正しく表示されない場合：

• アイコンが壊れた画像です: ファイルを Assets フォルダにアップロードし、名前を icon-heart.svg と完全に一致するように付けたことを確認してください。ファイル名は大文字と小文字を区別します。
• アイコンの位置がずれています： テーマのナビゲーションバーの高さに合わせるために、コードスニペットの style 属性内の height と width の値を調整する必要がある場合があります。
• 変更が表示されない： Shopify テーマはキャッシュが非常に積極的です。下書きテーマを作業している場合は、シークレット ウィンドウでテーマをプレビューするか、URL に ?preview_theme_id= を追加してみてください。