カスタムメニュー位置を追加する

ハウツーガイド すべてのプラン 3 分で読めます

テーマに、メニューを表示したい場所のメニュー要素がない場合や、ヘッダーのカスタマイズが多く、ほかの 位置 オプションが使えない場合に使用します。テーマのコードに空のコンテナーを追加し、このCSSセレクターにメニューを表示 でそれを指定します。

注意

コードを編集する前に、テーマを複製してください（オンラインストア > テーマ > … > 複製）。コードの編集に不慣れな場合は、お問い合わせください。メニューを無料でインストールいたします。

コンテナーを追加してアプリに指定する

1. テーマのコードを開く

   オンラインストア > テーマ に移動し、テーマの … をクリックして コードを編集 を選びます。

2. メニューのコンテナーを追加する

   各メニューを表示したい場所に空のコンテナーを貼り付け、保存 をクリックします。IDは任意で、以下は例です。

   <div id="GloboDesktopMenu"></div>
   <div id="GloboMobileMenu"></div>

   • デスクトップ: 通常は、ナビゲーションを配置したいヘッダーのセクションファイル（例: sections/header.liquid）内です。
   • モバイル: 通常は、テーマのメニュードロワーのファイル、または layout/theme.liquid 内です。

3. アプリにコンテナーを入力する

   メニューエディターで 設定 タブを開き、位置 の このCSSセレクターにメニューを表示 を選びます。メインメニューのCSSセレクター に #GloboDesktopMenu、モバイルメニューのCSSセレクター に #GloboMobileMenu を入力します。

   

   2つのCSSセレクターのフィールドに、コンテナーのIDを入力します

4. 保存、公開して確認する

   保存 をクリックし、メニューを公開します。デスクトップとモバイルでストアフロントを確認してください。

知っておくべきこと

• 片方のレイアウトのみ — コンテナーを1つだけ追加し、もう一方のフィールドは空欄にします。
• 既存のコンテンツは置き換えられます — アプリは各コンテナーにメニューを入れ、中にあるものを置き換えます。
• テーマのメニューは残ります — 両方を表示したくない場合は、コードまたはテーマの設定で非表示にするか削除してください。
• テーマごと — コードの編集は、編集したテーマにのみ適用されます。テーマを切り替えたり更新したりした場合は、コンテナーを再度追加してください。

トラブルシューティング

モバイルメニューが表示されない

テーマが、ドロワーをJavaScriptで後から生成している可能性があります。モバイル用のコンテナーを、layout/theme.liquid のような常にページに存在するコードに移動してください。

何も表示されない

このテーマでアプリの埋め込みがオンになっていることを確認してください。ブラウザーのコンソールで、document.querySelector('#GloboDesktopMenu') がコンテナーを見つけられるか確認してください。

関連ページ

• CSSセレクターにメニューを表示するCSSセレクターを入力して、テーマの特定の要素にメニューを配置します。
• メニューを公開するメニューをテーマに公開し、ストアフロントのどこに表示するかを選びます。
• カスタムCSS独自のCSSを追加して、メニューの見た目を細かく調整します。

このページは役に立ちましたか？

問題を報告