ShopifyでPCとスマホで異なるメニュー構成を作りたい方へ。メガメニューとドロワーメニューを分け、デバイスごとに最適なナビゲーションを実現する方法を紹介。「header-drawer.liquid」の1行修正で簡単に実装でます。
Shopifyではノーコードでメニューを管理できるため、基本的なナビゲーションの実装はとても簡単です。
しかし、実際の運用を考えると「PCとスマホで異なるメニュー構成にしたい」という要望は意外とある‥業態やサイトデザイン、ユーザーの利用動線によって、理想的なメニュー構成は変わります。
たとえば現在制作しているBtoBサイトでは、PC利用が中心のため、階層が深く複雑なメニューを求められる一方で、スマホではシンプルで直感的な操作が重視されます。
そこで今回は、ShopifyでPCとスマホで異なるメニュー構成を実現する方法について、実際の設定例を交えながら紹介します。
まず前提があります！
今回のテーマには前提があります。
まず、PCではメガメニュー形式を採用しており、カテゴリーや下層ページを一目で確認できるような構成になっています。一方で、スマホは画面幅の制約から、ドロワーメニュー（ハンバーガーメニュー）を使用しています。
このように、表示デバイスによって構造自体が異なるため、単純なCSSの非表示切り替えだけでは対応できません。メニュー構成そのものを分けて管理する必要があります。
なお、PCでもドロワーメニューを採用している場合は、今回紹介する方法は適していません。その場合は、メニューを共通化しつつCSSやJavaScriptでの制御を検討する方が安定します。
Shopifyメニューの仕組み
本題に入る前に、まずはShopifyのメニュー構造について知っておく必要があります。
Shopifyのナビゲーションは、管理画面の「メニュー」から設定でき、main-menuやfooter-menuなどのハンドル（handle）名でテーマ内に紐づいています。つまり、どのメニューをどの場所に表示するかは、Liquidで呼び出すメニューのハンドルによって制御されています。
Shopifyメニュー構造の基本については、以下の記事を参考にしてください。
【Shopify カスタマイズ】メニュー カスタマイズ＆作成するために知っておくべき事５選
PCとスマホで違うメニューにする手順
では、具体的な方法を説明します。
まず、PC側はシンプルです。テーマエディタでメガメニューを設定し、表示したいメニュー（例：main-menu）を選択するだけでOK。Shopifyでは、メガメニューの階層を管理画面から自由に設定できるため、構造を整えるだけで目的の表示が可能です。
一方、スマホ側は少し仕組みが異なります。Shopifyのほとんどのテーマでは、スマホではドロワーメニュー（ハンバーガーメニュー）がデフォルトで表示されます。
このドロワーメニューをカスタマイズし、別のメニュー（例：mobile-menu）を読み込むようにすることで、PCとスマホで異なるメニュー構成を持たせることができます。
次に、スマホでのみ別メニューを表示させるための具体的な設定方法を紹介します。
Shopifyの多くのテーマでは、スマホ表示時に自動でドロワーメニュー（ハンバーガーメニュー）が使用されています。このドロワーメニューは「snippets/header-drawer.liquid」というスニペットで制御されています。
今回の編集は、わずか1か所のみです。
まず、コードエディタで「snippets/header-drawer.liquid」を開き、約24行目にある以下の記述を探してください。
{%- for link in section.settings.menu.links -%}これは、テーマエディタで指定したメニューを読み込む構文です。この部分を、以下のようにメニューのハンドル名を直接指定する形に変更します。
{%- for link in linklists.mobile-menu.links -%}
もしくは
{%- for link in linklists['mobile-menu'].links -%}
「mobile-menu 」は、Shopify管理画面で事前に作成しておいたスマホ専用メニューのハンドルです。
このようにハンドルを指定することで、スマホ表示時は「mobile-menu」を参照し、PC表示時はテーマエディタで指定した「main-menu（メガメニュー）」をそのまま利用する構成にできます。
なお、ハンドル名にハイフン（-）が含まれる場合は、linklists.mobile-menu.links ではなく、linklists[‘mobile-menu’].links のようにブラケット記法で記述するのが安全だと言われています。
この1行を変更するだけで、PCとスマホで異なるナビゲーションを完全に分離することが可能になります。
今回は、ShopifyでPCとスマホで異なるメニュー構成を持たせる方法を紹介しました。
ポイントは、テーマエディタで指定するメニュー（主にPC用）と「header-drawer.liquid」内で固定指定するモバイル用メニューを分けること。たった1行の修正で、ユーザーの利用環境に合わせた最適なナビゲーションが実現できます。
特に、BtoBサイトや情報量の多い店舗では、PCでは詳細な階層構造、スマホではシンプルな動線が求められるケースが多いと思います・
メニュー構成をデバイスごとにチューニングすることで、ユーザー体験が向上し、離脱率の低下やCV率の改善にもつながります。
運営サイトのデバイス比率を一度確認してみて、もしスマホとPCの利用傾向が異なるようなら、今回の方法をぜひ参考にしてみてください。
