Horizonテーマのヘッダーメニューで、商品リンクにサムネイル画像を自動表示するカスタマイズです。テーマファイルの編集は不要で、カスタムLiquidセクションにコードを貼り付けるだけで動作します。デスクトップのメガメニューとモバイルのドロワーメニューの両方に対応しています。
デスクトップ（メガメニュー）の表示例
子メニュー（2階層目）は48px、孫メニュー（3階層目）は28pxのサムネイルで階層の違いが視覚的にわかるようにしています。
モバイル（ドロワーメニュー）の表示例
モバイルでは孫メニューにインデントを入れ、画像の右端が子メニューと揃うようにしています。
設定方法：ヘッダーグループにカスタムLiquidセクションを追加
テーマエディタで「ヘッダーグループ」にカスタムLiquidセクションを追加し、コードを貼り付けてください。テーマファイル（ベンダーファイル）の編集は一切不要です。
仕組みの解説
このスクリプトは以下の流れで動作します。
- ページ読み込み時に
header-menu（デスクトップ）とheader-drawer（モバイル）内の商品リンク（/products/を含むURL）を全て取得 - 各商品のhandleを抽出し、
/products/{handle}.jsで商品画像URLを非同期で並列取得 - 取得した画像URLをCDNのリサイズ機能で100px幅に変換し、各リンクの先頭に
<img>を挿入 -
MutationObserverでメニューのDOM変更を監視し、変更があれば再挿入
【補足】MutationObserverが必要な理由
Horizonテーマはページ表示速度を最適化するために、ヘッダーセクションでハイドレーション（初回は軽量HTMLを返し、後からSection Rendering APIで完全なHTMLに差し替える処理）を行っています。この差し替えによってJSで挿入した要素が消えるため、DOM変更を監視して再挿入する仕組みが必要です。
Dawnではこの処理は不要でしたが、HorizonでヘッダーやカートドロワーにJSカスタマイズを行う場合は同様の対策が必要になります。
【補足】対応するリンクタイプ
このスクリプトはURL（/products/）で商品リンクを判定しているため、ナビゲーションに設定したリンクが商品ページへのリンクであれば自動的にサムネイルが表示されます。コレクションやブログ記事へのリンクには影響しません。この方法は商品リンクにのみ有効です。
【補足】サムネイルサイズのカスタマイズ
CSS内の .menu-thumb の width / height を変更すればサイズを調整できます。モバイル孫メニューの margin-left: 16px は子メニューとのサイズ差（48px - 32px）に合わせているため、サイズを変更する場合はこちらも調整してください。
