Shopifyナビゲーションメニューのリンク修正：壊れたリンク、消えたリンク、クリックできないリンクの対処法
ストア運営の現場において、ナビゲーションメニューのリンクが反応しないことほど不安を覚える瞬間はありません。ヘッダーの主要カテゴリをクリックして整理された商品一覧が表示されることを期待したのに、画面がまったく動かない。あるいはそれ以上に深刻なのは、お客様がスマートフォンでメニューをタップした結果、真っ白な404エラー画面が表示されてしまうケースです。
問題のあるリンクを正常なリンクへと修復するには、まずどこで接続が切れているのかを正確に診断することから始まります。多くのShopifyストアにおいて、メニューリンクが機能しない原因はLiquidテンプレートの奥深くに潜む複雑なプログラムのバグではありません。その多くは、削除されたリソースへのリンク切れ、意図しないページへのリンク間違い、ドロップダウンが開くだけでページ遷移しない親項目、管理画面で保存した変更がストアに反映されない現象という、4つの明確な運用上の症状に分類されます。
それぞれの症状には、テーマコードを慌てて変更するのではなく、Shopify管理画面の「コンテンツ > メニュー」から着実に解決できる手順が用意されています。本ガイドでは、ストアで起きている具体的な原因を特定し、安全にリンク先を修復し、PCでもモバイルでも使いやすいナビゲーションへ整える方法を分かりやすく解説します。
クイックアンサー：Shopifyナビゲーションメニューのリンクを修正する方法
Shopifyナビゲーションメニューのリンクを修正するには、「コンテンツ > メニュー」を開き、対象のメニュー項目を見つけてリンク欄横の「x」をクリックし、正しいコレクション・ページ・商品を選択して保存します（Shopifyヘルプセンター）。もし下層メニューを持つ親項目がクリックしても遷移しない場合、それはテーマの仕様であるケースが一般的です。多くのテーマはドロップダウン親ヘッダーをリンクではなくボタンとして実装しています（Shopifyヘルプセンター）。
リンクの不具合を解消するための基本手順は以下の5ステップです：
- 「コンテンツ > メニュー」を開く：Shopify管理画面からメニュー一覧にアクセスします（Shopifyヘルプセンター）。
- 該当のメニューを開く：ヘッダーに割り当てられているメニュー（例：「メインメニュー」）を選択し、問題のある項目を探します。
- リンク欄横の「x」をクリックする：古いリンク先を解除し、検索または一覧から正しいコレクション、ページ、または商品を選択します（Shopifyヘルプセンター）。
- メニューを保存する：画面の保存ボタンをクリックして変更を確定します。
- リンクを検証する：プライベートブラウザウィンドウを使い、PCとスマートフォンの双方で正常にページが表示されるか確認します。
もし下層カテゴリを束ねる親メニュー項目をクリックしてもページが開かない場合は、テーマの表示設計が関係しています。後述する「ドロップダウンのある親メニュー項目がクリックできない理由」を確認し、最適なアプローチを選んでください。
症状を特定する：リンク切れ、遷移先間違い、クリック不可、更新されない
設定を変更したりテーマファイルを編集したりする前に、まずは発生している症状を正確に特定しましょう。不具合の現れ方によって、Shopifyプラットフォーム内で対処すべき場所はまったく異なります。親項目のクリック不可トラブルをリンク切れと同じように扱ってしまうと、不適切な設定変更につながってしまいます。
以下の診断表を参考に、実際の現象と根本原因を照合してください：
| 症状 | 考えられる原因 | 修正する場所 | 該当セクション |
|---|---|---|---|
| リンク切れ / 404エラー | リンク先のリソースが削除されたか、コレクションのハンドルが変更された（Shopifyヘルプセンター、Shopify URLリダイレクト） | コンテンツ > メニュー & URLリダイレクト | 壊れたリンクの修正 & 古いURLのリダイレクト |
| 遷移先の間違い | リンク欄が誤ったコレクションや古いURLを指定している（Shopifyヘルプセンター） | コンテンツ > メニュー | 「コンテンツ > メニュー」でリンクを修正 |
| 親項目がクリックできない | テーマがドロップダウン親項目をリンクではなくボタンとして処理している（Shopifyヘルプセンター、Shopify Community） | テーマのヘッダー設定またはコンテンツ > メニュー | 親項目がクリックできない理由 & クリック可能にする方法 |
| 変更が反映されない | ヘッダーで別のメニューが選ばれているか、管理画面の同期遅延が生じている（Shopify Community） | テーマエディタ（Header）またはコンテンツ > メニュー | メニューの変更が反映されない場合 |
| ドロップダウンが早く閉じる | 枠線による隙間によりマウスホバーの判定が途切れている（Shopify Community） | テーマのCSSまたはアプリの埋め込み | PCでドロップダウンが早く閉じすぎる場合 |
ストアを確認する際は、実際の挙動をよく観察してください。リンク切れの場合は404ページが表示されます。リンク先間違いなら管理画面で選び直すだけで解決します。一方、ボタンとして振る舞う親メニューは、ブラウザがタップ操作を下層メニューの開閉専用として認識するため、通常のハイパーリンクとは全く異なる挙動になります。
「コンテンツ > メニュー」で壊れたリンクや誤ったリンクを修正する
メニューリンクが404ページを表示したり、誤ったカテゴリを開いたりする場合、基本的な修正場所はナビゲーション設定です。Shopify管理画面では、「コンテンツ > メニュー」からオンラインストアのメニューを表示・編集できます（Shopifyヘルプセンター）。
図1：コンセプトイラスト（Concept illustration）— 「コンテンツ > メニュー」で壊れたリンクや誤ったリンクを修正する
リンク先を修復するには、以下の3ステップを実行します：
古いリンクを解除する
コンテンツ > メニューへ移動し、該当のメニュー名をクリックします。修正したいメニュー項目の行にある編集をクリックします。表示されるウィンドウには「名前」と「リンク」の欄があります。リンク先を変更するには、リンク欄の横にあるxをクリックします（Shopifyヘルプセンター）。続けて、新しいリンク先を選択します。
コレクションまたはページを選択する
リンク欄が空になったら、枠内をクリックしてShopify標準のリソースピッカーを開きます。Shopifyでは、商品、コレクション、ページ、ブログ記事、ポリシーへリンクできます。Shopifyが説明しているとおり、ほとんどの場合、リンクを設定する前にアイテムを作成しておく必要があります（Shopifyヘルプセンター）。新しい商品カテゴリへのリンクを計画している場合は、ここで指定する前に管理画面で公開されていることを確認してください。
URLを手入力（例：/collections/shirts）するのではなく、必ずこの一覧からリソースを直接選択してください。一覧から選ぶことで、パスの入力ミスも防げます。
[!NOTE] メニュー項目が突然消えてしまった場合は、コレクションや固定ページを確認してください。ストアのメニューで使用しているリソースを削除すると、関連付けられているメニュー項目も自動的に削除されます（Shopifyヘルプセンター）。
メニューを保存する
リンク枠に正しいリソースが設定されたら、ダイアログ内の変更を適用するをクリックし、管理画面上部または下部のメニューを保存をクリックします。これで新しいリンク先が確定します。
ハンドル変更後に古いURLのリダイレクトを設定する
カテゴリの名称変更や整理に伴い、リンク切れが発生することは珍しくありません。たとえば、コレクションのURLハンドルを /collections/summer から /collections/summer-collection に変更すると、旧パスを使っている古いリンクやブックマークが404ページに行き着くことがあります。
ShopifyストアでURLを変更した場合、訪問者や検索エンジンがデッドエンドに迷い込まないよう、URLリダイレクトを作成できます（Shopifyヘルプセンター）。
リダイレクトを確実に機能させるには、Shopifyの2つの重要な原則を把握しておく必要があります：
第一に、リダイレクトできるのは壊れたURL（存在しないURL）からのみです（Shopifyヘルプセンター）。古いパスが完全に利用できなくなっている場合、Shopifyは自動的に訪問者を新しいコレクションへと転送します。
第二に、そのURLが有効なWebページを読み込める状態である場合、URLリダイレクトは機能しません（Shopifyヘルプセンター）。以前のURLに既存の固定ページや商品が残っている場合、プラットフォームはそのページを優先して表示し、リダイレクトは実行されません。
リダイレクトを作成した後は、必ずコンテンツ > メニューに戻り、メニュー自体のリンク先も直接最新のURLへ更新してください。メインナビゲーションをリダイレクト任せにしないでください。リダイレクトは古いリンクのための保険であり、メニュー自体は有効なURLを直接指すのが望ましい形です。
ドロップダウンのある親メニュー項目がクリックできない理由
Shopify運営者の間で最もよく聞かれる疑問の1つが、親メニュー項目にサブメニューを追加した際の挙動です。あるマーチャントが「ショップ」という親項目を作成して /collections/all をリンクさせ、その下に「トップス」や「ボトムス」などの小項目を配置したとします。保存後、実際のストアで「ショップ」をクリックしても全商品一覧ページへ移動しなくなります。
図2：コンセプトイラスト（Concept illustration）— ドロップダウンのある親メニュー項目がクリックできない理由
これは多くの場合テーマの仕様によるもので、不具合ではありません。Shopifyの公式ドキュメントによると、ほとんどのテーマではドロップダウンメニューのヘッダーをクリック可能なリンクではなくボタンとして実装しています（Shopifyヘルプセンター）。
技術的な観点から説明すると、最近の多くのテーマは、ドロップダウンメニューのコンテナを標準的なHTMLの <details> タグと <summary> タグで構築しています。MDN Web Docsの記載にあるとおり、<summary> 要素をクリックすると、親である <details> 要素の開閉状態が切り替わります（MDN Web Docs）。
ブラウザは <summary> へのタップ操作を表示の開閉切り替えとして処理するため、以下のような動作に限定されます：
- ドロップダウンを開くだけ：クリック操作はすべて子階層の開閉に消費され、設定されたURLへの画面遷移はキャンセルされます。
実際のストア運営者もこの仕様に直面しています。Shopify Communityでは、「ドロップダウンメニューと子リンクを追加した後、ヘッダーの親リンクがクリックできなくなった」という投稿が寄せられています。別のマーチャントも、「ショップのメニューをドロップダウンにしたら、すべての商品ページへ行けなくなった」と課題を述べています（Shopify Community）。
階層の深いナビゲーションを設計する際は、Shopifyの階層型マルチレベルメニュー構造の原則を理解しておくことで、モバイルユーザーを混乱させずにカテゴリを整理できます。
親リンクをクリック可能にする方法：テーマ設定、代替策、コード編集
親カテゴリ自体の一覧ページも閲覧させつつ、下層メニューも展開できるようにしたい場合、安全性の高い順に3つの対処法が存在します：
ヘッダーのメニュータイプ設定を確認する
コードを変更する前に、テーマエディタの設定を確認しましょう。一部のテーマには、メニューの表示形式を選択する設定が標準で用意されています。
たとえばTradeテーマでは、コミュニティの検証により、メニュータイプが「メガメニュー」に設定されていると親項目をクリック可能にするスクリプトが効果を発揮せず、「ドロップダウン」に切り替えることでクリック操作が有効になる事例が報告されています（Shopify Community）。お使いのテーマのヘッダーセクションに同様のレイアウト切り替えオプションがないか確認してください。
「すべてを見る」子リンクを追加する
コードを使わない回避策として、最初の子リンクを活用する方法があります。親項目に「ボタン」と「リンク」の2役を同時に負わせるのではなく、親項目はあくまで展開用のフォルダとして位置づけます。
コンテンツ > メニューで親項目を編集します。ヘッダーをどこにもリンクさせたくない場合は、リンクフィールドに # を入力します（Shopifyヘルプセンター）。次に、そのドロップダウンの一番上に「すべてを見る」や「全商品を見る」という名称の子項目を新設し、親コレクションページを指定します。
この方法には3つの大きな強みがあります：
- コードを一切変更しないため、テーマを壊す危険がゼロです。
- 親項目はドロップダウンのまま、コレクション全体へのリンクも提供できます。
- お客様にとっても、「親項目をタップして展開し、一番上のリンクで全体を見る」という直感的な操作が成立します。
テーマコードを編集する（必ず事前にバックアップ）
PC環境において親項目の文字をクリックして直接コレクションページへ移動させたい場合は、テーマのLiquidファイル（header-dropdown-menu.liquid や header.liquid など）を編集します。
[!WARNING] Liquidファイルを編集する前に、Shopifyの公式な助言を忘れないでください。コードをカスタマイズする前に、テーマのバックアップコピーを作成することをお勧めします（Shopifyヘルプセンター）。テーマを複製しておけば、万一コードの記述ミスで表示が崩れても即座に元の状態へ復元できます。
このカスタマイズの技術的な要点は、親項目のテキストを単なる <summary> のテキストノードのままにするのではなく、有効な href 属性を持つ正規のHTML <a> タグで囲むことです。この構造は検索エンジンのクロールにとっても重要です。Google検索セントラルが説明しているとおり、一般的にGoogleはHTMLの <a> 要素であるリンクのみをクロールできます（Google検索セントラル）。SEOに適したマークアップの詳細はGoogleがメニューをクロールできるようにする方法をご参照ください。
PC画面では、以下のような分割コントロールの形を取ることが一般的です：
- リンクと矢印の分離：カテゴリ名のテキスト部分はコレクションへ遷移するリンクとして機能し、その横にある矢印アイコンはドロップダウンを開閉するボタンとして動作します。
ただし注意が必要です。Dawn 7.0.1に関するコミュニティの議論では、PCでは動作してもモバイル画面では動作しないことがあり、別のバージョンのテーマではDOM構造やCSSクラスが異なるため動かなくなることがあります（Shopify Community）。
| 方法 | コード編集の有無 | リスク | 適したケース |
|---|---|---|---|
| テーマ設定の調整 | なし | 非常に低い | テーマにドロップダウンやメガメニューの切り替え設定がある場合 |
| 「すべてを見る」子リンク | なし | 非常に低い | メンテナンス不要で安定した動作を最優先したいすべてのストア |
| Liquidコードの手動編集 | あり | 中〜高 | テーマのアップデート管理を定期的に行える専門エンジニアがいる場合 |
メニューの変更がオンラインストアに反映されない場合
管理画面で丁寧にメニューを編集し、保存を完了したにもかかわらず、実際のストアに古いリンクが表示され続けるトラブルもよく発生します。
ヘッダーが使用しているメニューを確認する
多くの場合、原因は「表示されているメニューとは別のメニューリストを編集していた」ことにあります。Shopifyでは「コンテンツ > メニュー」内に複数のメニュー（例：「メインメニュー」「2026年ナビゲーション」「モバイルドロワー」「フッター」など）を作成できます。
現在の割り当てを確認する手順：
- Shopify管理画面からオンラインストア > テーマへ進みます。
- 現在適用されているテーマの横にあるカスタマイズをクリックします。
- 左側のサイドバーでヘッダーセクションを選択します。
- 右側パネルにあるメニューの設定項目を確認します。
ヘッダーに「新ナビゲーション」が指定されているのに、編集作業を「メインメニュー」側で行っていた場合、当然ながらストアの表示は更新されません。ヘッダーの指定を変更するか、現在割り当てられているメニューを編集してください。
ハンドルの再保存による対処法
テーマに正しいメニューが割り当てられているにもかかわらず反映されない場合、管理画面の同期ラグが発生している可能性があります。
Shopifyコミュニティでは、メニュー同期の遅延に直面したマーチャントによって実践的な回避策が見出されています。それは、メニューのハンドルを変更して保存し、その後再び元のハンドルに戻して保存し直すという方法です（Shopify Community）。
[!NOTE] ハンドルを再保存する方法はユーザーによって報告された非公式な代替策であり、Shopifyの公式手順ではありません。ハンドルを変更する前に、必ずプライベートブラウザでストアを開き、お使いのPCブラウザのキャッシュが原因ではないか確認してください。
PC環境でドロップダウンメニューが早く閉じすぎる場合
リンク先の設定は正しいのに、マウスカーソルを動かすとドロップダウンパネルがすぐに消えてしまい、お客様がサブメニューをクリックできないというユーザビリティ上の問題があります。
この現象が起きると、ユーザーが親カテゴリにマウスを乗せ、下層の項目をクリックしようと斜めにカーソルを動かした瞬間にメニューが閉じてしまいます。
コミュニティでの詳細な検証によると、PC環境でメニューが早く閉じすぎる場合、最上位の項目とドロップダウンパネルの間に余計な枠線（ボーダー）による隙間が存在し、それによりマウスホバーの判定領域が途切れてしまうことが原因と指摘されています（Shopify Community）。カーソルがその隙間を通過するとホバー状態が失われ、メニューが閉じてしまいます。
最近追加したアプリが挿入したCSSの影響で同様の現象が起きることもあります。裏付けのないCSSを無暗に追加するのではなく、テーマ設定でアプリの埋め込みを一時的にオフにして原因を切り分けるか、テーマの開発元にヘッダーのホバー判定エリアの調整を依頼してください。
トレードオフ：テーマコードの編集を避けるべきケース
親リンクがクリックできない問題に直面すると、ネット上で見つかるLiquidコードをコピーして貼り付けたくなるかもしれません。しかし、手動でのコード変更には継続的なコストが伴います：
- テーマ更新時の上書きリスク：テーマ開発元が機能改善やセキュリティ対策のアップデートを配信した際、
header.liquidやheader-dropdown-menu.liquidに加えた手動の変更は自動では引き継がれません。バージョンアップのたびに再編集と検証が必要になります。 - バージョン間の非互換性：テーマの設計は急速に進化しています。Dawn 7.0.1で報告されているように、特定のバージョン向けに書かれたコードは、クラス名やタグ構造が変わった新しいバージョンでは機能しなくなることがあります（Shopify Community）。
- モバイル表示での予期せぬ挙動：PCのマウスホバーを前提としたスクリプトは、スマートフォンのタッチスクリーンで誤作動を起こしがちです。子項目を見ようとして親カテゴリをタップした瞬間に画面遷移が始まってしまうケースが頻発します。
多くの店舗にとって、「すべてを見る」子リンクを追加する代替策は、自作コードを保守することなく直感的な操作感を提供できる有力な選択肢です。商品の分類がより複雑になり高度なナビゲーションが必要な場合は、テーマメニューの制限を確認し、専用のナビゲーションアプリの導入を検討してください。
Navi+が貢献できる領域
大規模な商品カタログを抱えており、テーマのLiquidコードを改修・維持することなく柔軟なナビゲーションを実現したい場合、Navi+が効果的な選択肢となります。
Navi+は、モバイル用ドロワーメニュー、PC・モバイル双方に対応したメガメニュー、スマートフォン向け固定タブバーを提供する特化型ナビゲーションアプリで、最大3階層までのネストに対応しています。テーマのコアファイルを書き換えることなく、テーマと共存して独立して動作します。
Navi+で設定する各メニュー項目は、リンクの挙動を個別にカスタマイズ可能です：
- 親項目に
#を設定することで、タップ時に画面遷移せず下層メニューを展開させることができます（Navi+公式ドキュメント）。 - 親項目自体にもリンクを持たせたい場合、Navi+のセクションヘッダー機能により、テキストをタップして下層を展開しつつ、付属の矢印ボタンをタップしてコレクションページへ直接移動するという両方の操作を1つの行で共存させることが可能です（Navi+アップデート履歴）。
お使いのテーマが親メニュー項目をボタンに変えてしまい、ヘッダーコードの保守を避けたい場合は、Navi+でメニューを構築し、項目ごとにリンク遷移、展開、またはその両方を自由に設定することをご検討ください。
修正後の確認チェックリスト
メニューリンクの修正が完了したら、以下のチェックリストを活用して、すべてのチャネルでナビゲーションが安定して動作しているか確認してください：
- キャッシュの影響を排除するため、PCとスマートフォンの両方でプライベートブラウザを開いてストアを確認したか。
- 第1階層、第2階層、第3階層のすべての項目をクリックまたはタップし、リンク先が正常に表示されるか。
- 名称やハンドルを変更したコレクションで404エラーが発生していないか、管理画面のリダイレクト設定を確認したか（Shopifyヘルプセンター）。
- テーマエディタのヘッダーセクションで、「コンテンツ > メニュー」で編集したメニューが正しく割り当てられているか。
- コードを手動で編集する前に、テーマのバックアップコピーを作成したか（Shopifyヘルプセンター）。
- コレクションやページを削除した際、自動的に削除されたメニュー項目がないかナビゲーションを確認したか（Shopifyヘルプセンター）。
- PC環境でカーソルを動かした際、ドロップダウンメニューが途中で不自然に閉じてしまわないか。
- 商品数の増加に合わせて、アクセシビリティに配慮したメニュー構成を維持するためにShopifyメニュー完全ガイドを参照したか。
よくある質問（FAQ）
ドロップダウンのあるメインメニュー項目がクリックできないのはなぜですか？
Shopifyでは、ほとんどのテーマがドロップダウンの親ヘッダーをリンクではなくボタンとして実装しているためです（Shopifyヘルプセンター）。テーマ内のメニュータイプ設定を確認するか（Shopify Community）、親コレクションを指す「すべてを見る」子リンクを追加することで解決できます。
メニュー項目が突然メニューから消えてしまったのはなぜですか？
メニューで使用しているリソース（コレクション、固定ページ、商品など）を削除すると、そのリソースに紐づくメニュー項目もシステムによって自動的に削除されます（Shopifyヘルプセンター）。元のリソースが削除されていないか確認してください。
コレクションの名前を変更した後、メニューリンクが404エラーになるのはなぜですか？
ストアでURLやハンドルを変更した場合、トラフィックを維持するためにURLリダイレクトを設定できます（Shopifyヘルプセンター）。ただしリダイレクトは壊れたURLに対してのみ機能するため、メニュー自体のリンク先も「コンテンツ > メニュー」で直接更新しておく必要があります。
オンラインストアでナビゲーションメニューが更新されないのはなぜですか？
テーマエディタのヘッダーセクションでどのメニューが選択されているか確認してください。コミュニティでは、メニューのハンドルを変更して保存し、再度元のハンドルに戻して保存し直すという回避策も報告されていますが（Shopify Community）、まずはシークレットウィンドウで確認してください。
Shopifyのドロップダウンメニューは何階層まで作成できますか？
最上位の項目に対し、その下にネストされたドロップダウンメニューを最大2階層まで作成できます（Shopifyヘルプセンター）。つまり、最上位を含めて合計で3階層のナビゲーションとなります。
ヘッダーコードを編集して修正するのは安全ですか？
Shopifyは、テーマコードをカスタマイズする前にテーマを複製してバックアップを取ることを推奨しています（Shopifyヘルプセンター）。手動のLiquid編集は、テーマのアップデート時やモバイル画面のタッチ操作で表示崩れを引き起こすリスクがあります。
情報ソース
- Shopify Help Center: Editing Menus — メニューのリンク先管理およびリソース連携手順。
- Shopify Help Center: Drop-down Menus — 階層メニューの作成規則と親項目のボタン動作仕様。
- Shopify Help Center: URL Redirects — ストアURL転送の仕組みと制限事項。
- Shopify Help Center: Duplicating Themes — コード編集前のテーマ複製とバックアップ手順。
- Google Search Central: Make Links Crawlable — 検索エンジンが認識可能なHTMLアンカータグの要件。
- MDN Web Docs: The Summary Element — HTML summary要素およびdetails要素の動作原理。
- Shopify Community: Why Isn’t My Navigation Menu Updating — メニューハンドルの同期遅延に関する議論。
- Shopify Community: Why Aren’t the Main Menu Links Working — PCにおけるホバー余白とメニューの早期終了に関する分析。
- Shopify Community: Dropdown Menu Clickable - Trade — Tradeテーマにおけるヘッダーメニュー形式の影響。
- Shopify Community: Dawn Theme 7.0.1 Dropdown Menu Parent Link Not Clickable — 親項目がクリックできない現象に関するユーザー報告。
- Shopify Community: How to Make My Shop Link in the Header Work Again — ドロップダウン化によるリンク機能無効化の相談。
- Navi+ Documentation: Menu Item Link Types — 独立したリンク種別の設定とハッシュリンクの動作仕様。
- Navi+ Changelog: Latest Update — セクションヘッダーのリンク遷移と下層展開の同時提供機能。
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。