Shopifyの管理画面でメニューを保存をクリックし、オンラインストアを確認したのに、古いリンクがそのまま残っている。ブラウザのタブを再読み込みしても何も変わらない——。
保存したメニューの変更がストアに反映されない場合、Shopifyが変更を無視しているわけではありません。ストアのナビゲーション表示は、ブラウザキャッシュ、現在公開されているテーマ、ヘッダーに割り当てられたメニュー、メニューを描画しているアプリ、テーマの競合という5つの独立したレイヤーによって成り立っています。これらを順番に確認すれば、数分で原因を特定できます。
Quick answer: why your menu changes don’t show
ほとんどの場合、変更自体は保存されていますが、ブラウザのキャッシュ、公開されていない下書きテーマ、または別のメニューリストを指しているヘッダー設定を見ている状態です。アプリが描画しているメニューの場合、編集はコンテンツ > メニューではなく、アプリ内で行う必要があります。
現在の画面の状況を以下の診断テーブルと照合してください。
| 症状 | 考えられるレイヤー | 確認する場所 |
|---|---|---|
| 自分の端末でのみ古いメニューが表示される | ブラウザキャッシュ | シークレットウィンドウを開くか、別の端末で確認 |
| プレビューでは反映されているが実際のストアでは古い | 下書きテーマ | オンラインストア > テーマで現在のテーマを確認 |
| PCは更新されたがスマホのドロワーが古い（またはその逆） | ヘッダーやドロワーで別メニューを使用 | 公開中テーマのエディタを開きヘッダー設定を確認 |
| コンテンツ > メニューを編集したがタブバーやドロワーが変わらない | アプリ描画メニュー | ナビゲーションアプリの管理画面内で直接編集 |
| テーマ切り替え後にメニューが完全に消えた | アプリの埋め込みが無効 | テーマエディタのアプリの埋め込みでアプリを再有効化 |
Native Shopify menu vs a menu drawn by an app
トラブルシューティングを行う前に、表示されているメニューがどの仕組みで動いているかを特定する必要があります。Shopifyストアには2つの異なるメニュー表示方式が存在します。
Shopify標準メニューは、管理画面のコンテンツ > メニューで管理されます。テーマのLiquidテンプレートがこのリストを読み込み、表示方法を決定します。通常、メインメニューは全ページに表示されますが、レイアウトやスマホでの表示形式はテーマの仕様に依存します。
アプリで描画されるメニューは、テーマに統合された外部アプリ（画面下部に固定されるタブバー、カスタムドロワー、メガメニューなど）によって表示されます。これらのアプリは独自のダッシュボード内でリンク情報を保持しています。Shopify標準のナビゲーション設定を変更しても、アプリ側メニューには自動反映されません。
| 項目 | Shopify標準メニュー | アプリ描画メニュー（タブバー、ドロワーなど） |
|---|---|---|
| 編集場所 | Shopify管理画面：コンテンツ > メニュー | 各アプリの専用ダッシュボード |
| 割り当て場所 | テーマエディタ：ヘッダーセクション | テーマエディタ：アプリの埋め込みまたはブロック |
| 更新の仕組み | ストアDBに保存されLiquidで描画 | アプリ内で設定しクライアント描画または手動同期 |
PCで標準ヘッダーを使い、スマートフォンでアプリのドロワーを利用している場合、separate desktop and mobile menusを運用していることになります。管理画面でPC用メニューを編集しても、スマホ用メニューは自動更新されません。
Start here: hard refresh, private window, another device
まずは2分間でローカルブラウザの可能性を切り分けましょう。ブラウザキャッシュとは、表示を高速化するために端末内に保存されたウェブページの複製データです。メニューを更新しても、ブラウザが手元の古い複製データを読み込み続けているケースがよくあります。
最初に、強制再読み込み（ハードリフレッシュ）を実行してください。
- Windows / Chrome / Edge:
Ctrl + Shift + RまたはCtrl + F5 - Mac / Safari / Chrome:
Cmd + Shift + R
それでも古いメニューが表示される場合は、シークレットウィンドウ（プライベートブラウジング）を開いてストアにアクセスしてください。シークレットウィンドウは既存のキャッシュやクッキーを使用しません。
次に、スマートフォンのモバイルデータ通信（4G/5G）やShopifyモバイルアプリなど、別の端末でストアを開きます。別の端末で確認すると、お使いのパソコン固有の問題かどうかを切り分けられます。
Shopifyの公式テーマのトラブルシューティングガイドでも、シークレットモード、別端末、またはモバイルアプリでのテストが端末依存の問題を切り分ける基本手順として推奨されています。プライベートウィンドウやスマホで新しいメニューが表示されれば、Shopify側への反映は正常に完了しています。作業用PCのキャッシュとクッキーを削除するだけで解決します。
すべての端末で古いメニューのままであれば、キャッシュ消去を中止し、次のレイヤーを確認してください。
Are you editing the live theme?
シークレットウィンドウでも古いメニューが表示される場合、最も多い原因は、公開されているテーマではなく下書きテーマを編集してしまっていることです。
図1：コンセプトイラスト（Concept illustration）— Are you editing the live theme?
Preview vs published theme
テーマライブラリには複数のテーマを保存できますが、Shopifyのテーマの公開に関するドキュメントにあるとおり、訪問者が実際に閲覧できるのは公開済みテーマのみであり、同時に公開できるテーマは1つだけです。
テーマライブラリ内の未公開テーマでカスタマイズをクリックした場合、下書きを編集していることになります。管理画面内のプレビューには新しいメニューが表示されますが、一般のURLには未変更の公開テーマが配信され続けます。
公開テーマを編集しているか確認する手順：
- オンラインストア > テーマにアクセスします。
- 画面上部にある現在のテーマと書かれたカードを確認します。
- 下のライブラリではなく、必ずそのカードのカスタマイズをクリックしてください。
App embeds after switching themes
テーマを新しく公開したりバージョンアップした直後に、ナビゲーションアプリが消えてしまうことがあります。
多くのナビゲーションアプリは、アプリの埋め込みを通じてメニューを描画します。Shopifyのテーマ構造とアプリの埋め込みガイドに従い、アプリの埋め込みはテーマエディタ内で有効化・無効化・カスタマイズできます。ただし、埋め込み設定はテーマごとに独立しています。テーマを変更した場合、新しいテーマ側でアプリを再度有効化する必要があります。
テーマ変更後にタブバーやドロワーが表示されなくなった場合は、公開中テーマのエディタを開き、左メニューのアプリの埋め込みから該当アプリのスイッチをオンに戻してください。
Is the right menu selected in the Header?
管理画面でメニューを正しく保存していても、テーマのヘッダーが別のメニューリストを参照している可能性があります。
Content > Menusには複数のメニューがあることがあり、たとえば「Main menu」と「Footer menu」などです。テーマのヘッダーが別のメニューを参照していると、管理画面で「Main menu」を編集してもストアには反映されません。
メニューの割り当てを確認する手順：
- オンラインストア > テーマに移動し、現在のテーマのカスタマイズを開きます。
- 左側のセクションツリーからヘッダーを選択します。
- 右側の設定パネルでメニューの項目を確認します。
- 別のメニューが選ばれている場合は、先ほど編集したメニューを選択して保存します。
Desktop header vs mobile drawer
メニューの表示形式はテーマによって大きく異なります。PCとスマホで同じメニューリストを共有するテーマもあれば、デスクトップバーとモバイル用ドロワーで別々のリストを指定できるテーマもあります。
PCでは更新されたのにスマホで古いままの場合、ヘッダー設定内にモバイルメニューやドロワーメニューといった別枠の設定がないか確認してください。そこに正しいリストを割り当てるか、ドロワー自体の動作に不具合がある場合はmake the menu open on mobileのガイドを参照してください。
Check each menu item’s link
特定のメニュー項目だけが動作しない場合は、リンク先を確認してください。削除された、または下書きに戻された商品・コレクション・ページを指している項目は、訪問者を存在しないページへ案内してしまうことがあります。管理画面でリンクを確認するか、fix broken links in a navigation menuを参照して、各リンク先が有効か確認してください。
Did the edit actually save?
Shopifyのナビゲーション編集は2段階の保存が必要です。
- 管理画面のコンテンツ > メニューを開きます。
- 編集したいメニューのタイトルをクリックします。
- スライドパネルでリンクを追加・編集したら、まずパネル下の変更を適用を押します。
- その後、ページ右上にあるメインの保存（またはメニューを保存）ボタンを必ずクリックします。
「変更を適用」を押しただけで、ページ右上の「保存」を押さずにタブを閉じてしまうと、編集内容は保存されません。
コンテンツ > メニューを開いた状態でブラウザを再読み込みしてください。新しい項目が表示されていればShopifyのデータベースに保存されています。消えてしまう場合は、以下の公式動画の手順を確認し、set up menu links in your Shopify storeを参考に正しく保存してください。
Server and CDN cache: how long should you wait?
ShopifyはCDNやサーバーキャッシュの反映時間について公式な数値を発表していません。サードパーティのブログでは数分から数時間までまちまちな予想が書かれていますが、これらは公式見解ではありません。
公開中テーマとヘッダー設定を確認してもシークレットウィンドウと別端末で古いメニューのままなら、待つのではなく、次のアプリ層の確認に進んでください。
フォーラムなどで見かける「メニューのハンドル名を変更して元に戻す」「theme.liquidにコメントを追加する」といった裏技は非公式な手法であり、本番環境のコードを壊すリスクがあります。コードを変更する前に、アプリ側の設定を点検してください。
When an app draws the menu (tab bar, drawer, mega menu)
標準設定に問題がないにもかかわらずメニューが更新されない場合、外部アプリがナビゲーションを描画している可能性が極めて高いです。
図2：コンセプトイラスト（Concept illustration）— When an app draws the menu (tab bar, drawer, mega menu)
モバイルのタブバー、スライドインのドロワー、メガメニューなどアプリ型のナビゲーションは、通常アプリ自身のスクリプトが描画します。HeliumのMeteorメニューアプリのドキュメントには、ShopifyのNavigation設定の変更はアプリに反映されないこと、メニューはアプリ内で編集する必要があることが記載されています。他のアプリは動作が異なる場合があるため、お使いのアプリのドキュメントを確認してください。
ナビゲーションアプリを利用する際は、以下の3点を確認してください。
- アプリ内で直接編集する: リンクの追加や順序変更は、Shopify管理画面の「アプリ」から該当アプリを開いて作業します。
- 公開テーマで埋め込みを有効にしておく: アプリの埋め込みがオフになっていると、アプリ側で保存してもストアに表示されません。
- 手動同期ボタンの確認: Shopifyの既存メニューを取り込んで表示するアプリの場合、自動同期されないことがあります。例えばNavi+ Mobile Menuでは、Shopifyメニューを取り込んだ場合、アプリ内のSync nowボタンを押した時にだけ複製データが更新されます。管理画面で変更した後は、必ず同期を実行してください。
Isolate the cause: disable the app, test a free theme
テーマのコードが原因なのかアプリとの競合なのか判断がつかない場合は、複製テーマを作成して安全に切り分けテストを行います。
- テーマを複製する: オンラインストア > テーマで、現在のテーマの横にある
...をクリックし、複製を選びます。 - アプリの埋め込みをオフにする: 複製したテーマのエディタを開き、アプリの埋め込みからメニューアプリをオフにしてプレビューします。標準メニューが正常に更新されていれば、原因はアプリ側の設定にあります。Shopify公式でも、アプリの一時的なアンインストールによる動作確認を推奨しています。
- クリーンな無料テーマでプレビューする： アプリを無効にしても複製テーマで問題が続く場合は、Shopifyの無料テーマをライブラリに追加してプレビューします。そこでメニューが正しく表示されるなら、原因はShopifyではなくメインテーマにある可能性が高いです。
Trade-offs and when not to use these fixes
トラブルシューティングには実務上の注意点も伴います。
- ブラウザのキャッシュとクッキーの削除： クッキーを削除すると、利用中のサイトからログアウトされることがあります。不要なログアウトを避けるため、まずシークレットウィンドウで確認してください。
- アプリの一時アンインストール: Shopify公式に記載がある手法ですが、アプリによっては保存していたデザインやリンク設定が初期化される恐れがあります。まずは複製テーマ上でアプリの埋め込みをオフにするテストを優先してください。
- 本番テーマのコードを編集しない: キャッシュを強制更新させようとして、公開中の
theme.liquidを直接編集しないでください。記述ミスが起きるとストア全体が停止する危険があります。 - テスト用テーマを公開しない: 無料テーマでの切り分け確認時は、必ずテーマライブラリのプレビュー機能を使用し、未設定のテーマを本番公開しないよう注意してください。
Where Navi+ fits
ネイティブメニュー、アプリのメニュー、テーマ設定を揃えておく作業が繰り返し負担になるなら、Navi+はストアのナビゲーションを管理する選択肢の一つです。
Navi+は、テーマのアプリ埋め込みを通じてTab Bar、Mobile Menu（ドロワー）、Desktop Mega Menuを描画します。ラベル、アイコン、バッジ、リンクはNavi+アプリで編集し、保存したメニューはアプリのスクリプトがブラウザ上で描画します。保存後はシークレットウィンドウで結果を確認してください。
Shopify標準のナビゲーションを使い続けたい場合、Navi+ Mobile Menuは既存のShopifyメニューを埋め込めます。そのコピーはアプリでSync nowをクリックしたときだけ更新されるため、反映のタイミングはご自身で決められ、Content > Menusでの編集はそれまで反映されません。より広い背景はShopify menu guideをご覧ください。
Tab Bar、ドロワー、Mega Menuを一か所で管理したい場合、Navi+ならアプリ内で編集でき、既存のShopifyメニューはSync nowで引き続き使えます。まず複製したテーマで試すこともできます。
Action checklist
メニューが反映されない時は、以下の8項目を順に確認してください。
- シークレットウィンドウで確認: 古い表示が作業端末のキャッシュによるものか切り分ける。
- 別端末のモバイル回線で確認: Wi-Fiを切断したスマホでストアを開いて確認する。
- 公開テーマを確認: オンラインストア > テーマの現在のテーマを編集しているか確かめる。
- ヘッダーの割り当てメニューを確認: テーマエディタのヘッダーが目的のメニューリストを選んでいるか確認する。
- 保存操作の完了を確認: コンテンツ > メニューで「変更を適用」と「保存」の両方を押したか確認する。
- リンク先の有効性を確認: リンク先の商品やページが公開状態になっているか確認する。
- 公開テーマのアプリ埋め込みを確認: テーマエディタでメニューアプリの埋め込みがオンになっているか確認する。
- アプリ内で編集または同期を実行: アプリメニューを使用している場合、アプリ内で直接更新するかSync nowを押す。
When to contact support and what to send
チェックリストを終えてもメニューが更新されない場合は、サポートに連絡してください。Shopifyのテーマトラブルシューティングガイドでは、一般的な確認の後の最後のステップとしてサポートへの連絡が挙げられているため、すでに切り分けた内容を伝えられます。
初回問い合わせ時に以下の情報を添えてください。
- 公開テーマ名: オンラインストア > テーマに表示されている正確なテーマ名。
- 編集したメニュー名: コンテンツ > メニュー内のメニュー名と、反映されないリンク項目。
- シークレットウィンドウの画面キャプチャ: 管理画面の設定画面と、シークレットモードでのストア表示の比較画像。
- 利用環境: ご使用のOSおよびブラウザのバージョン。
- 導入中のナビゲーションアプリ: ストアにインストールされているメニュー系アプリの名称。
- 切り分けテストの結果: 複製テーマでアプリ埋め込みをオフにした際や、無料テーマでプレビューした際の挙動。
アプリで描画しているメニュー固有の問題であれば、Shopify App Storeの各アプリサポート窓口へ直接問い合わせてください。
FAQ
Do I need to clear my cache to see menu changes?
まずはシークレットウィンドウや別の端末で確認してください。Shopifyでは、問題が作業端末のみで発生している場合にブラウザのキャッシュとクッキーの削除を推奨しています。
How long does it take for menu changes to appear?
Shopifyはキャッシュ伝播の公式時間を定めていません。公開テーマとヘッダー設定を確認した後もシークレットウィンドウやスマホで反映されない場合、待機するよりも設定やアプリの競合を調査すべきです。
Why did my menu change in the preview but not on the live store?
テーマライブラリ内の下書きテーマを編集している可能性が高いです。訪問者が見られるのは公開済みテーマのみであり、同時に公開できるテーマは1つに限られます。
I edited Content > Menus but my app’s menu didn’t change. Why?
アプリで描画されるメニューは、アプリ内の設定データを参照しています。Shopify標準のナビゲーションを変更してもアプリ側は変わりません。Navi+の場合、取り込んだShopifyメニューはSync nowボタンを押した時に更新されます。
My menu disappeared after I switched themes.
テーマを変更すると、アプリの埋め込みは自動的には引き継がれません。新しいテーマのエディタを開き、アプリの埋め込みからメニューアプリを再度有効化してください。
Sources
- Shopify Help Center: Add, remove, or edit menu items in your online store — コンテンツ > メニューでのメニュー編集および保存手順。
- Shopify Help Center: Understanding navigation — テーマによるナビゲーション表示とメインメニューの表示範囲。
- Shopify Help Center: Publishing themes — 公開テーマの仕様と同時に公開可能なテーマの制限。
- Shopify Help Center: Troubleshooting your online store theme — テーマの基本トラブルシューティング、キャッシュ対策、無料テーマによる切り分け。
- Shopify Help Center: App embeds and theme structure — テーマ切り替え時のアプリ埋め込みの再有効化手順。
- Helium Help Center: Common issues & fixes — 標準ナビゲーション変更がアプリに届かない理由とスクリプト描画の挙動。
- Shop Theme Detector: How to delete your cache on Shopify — サーバーキャッシュ反映時間に関する業界内の見解の相違分析。
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。