コンテンツにスキップ
GloboGlobo Docs
アプリをインストール
日本語

モバイル用ボトムナビゲーションバー

ホーム、カート、検索などのクイックリンクやアクションを備えた、アプリのような固定アイコンバーを追加します。

ハウツーガイド Pro Navigation 17 分で読めます

このバーは、買い物客がスクロールしても画面に表示され続けます。モバイルアプリのタブバーのように、ホーム、メニュー、カート、検索、チャット、電話にワンタップでアクセスできます。項目から小さなサブメニューを開くこともできます（たとえば、アカウント、お問い合わせ、FAQへのリンクを含む More 項目）。

ボトムバーエディター：設定タブ (1) とライブプレビュー (2)。プレビュー左下のボタンで、プレビューのデバイスを切り替えられます。

設定タブは、メニュー項目、一般、タイポグラフィ、カラー、位置、詳細設定、バージョン履歴 です。

ボトムバーを作成する

  1. バーを作成する

    アプリの ホーム ページで ボトムナビゲーションを追加 をクリックします。または、メニューマネージャー で メニューを作成 をクリックし、モバイルボトムバー を選びます。

    ホーム: (1) メニューの作成やインポートを行うクイックアクション、(2) アプリの埋め込みを有効にするボタン

  2. 項目を設定する

    メニュー項目 で、デフォルトの項目を編集し、独自の項目を追加します。「項目を追加して編集する」をご覧ください。

    ボトムバーエディター：設定タブ (1) とライブプレビュー (2)。プレビュー左下のボタンで、プレビューのデバイスを切り替えられます。

  3. バーのスタイルを設定する

    一般、タイポグラフィ、カラー の各タブを調整します。「バーのスタイルを設定する」をご覧ください。

    サブメニューの位置と開き方を含む、一般設定。

  4. 表示する場所を選ぶ

    位置 で、デバイスと画面上の位置を選びます。「バーを表示する場所を選ぶ」をご覧ください。

    モバイル (1) とデスクトップ (2) でバーをオンにしてから、位置を選びます。

  5. 保存して公開する

    右上の 保存 をクリックし、公開 をクリックします。「バーを公開する」をご覧ください。

項目を追加して編集する

  1. 項目のアクションを表示する

    メニュー項目 で、項目にカーソルを合わせると 編集、複製、削除 が表示されます。ハンドルをドラッグすると、項目を並べ替えられます。

    項目にカーソルを合わせて、編集、複製、削除を行います。

  2. 項目とサブメニューを追加する

    項目を追加 をクリックすると、その階層に項目が追加されます。項目の サブメニューを追加 をクリックすると、その下に項目を入れ子にできます。入れ子にした項目はサブメニューとして開き、最大3階層までです。

  3. アイコン、タイトル、リンクを設定する

    編集 をクリックして メニュー項目の編集 を開きます。アイコン を選び（変更 をクリック）、タイトル を入力して、リンク フィールドをクリックします。

    リンクフィールドをクリックして、項目のアクションを選びます。

  4. アクションを選ぶ

    リンクを選択 で、アクションの横にある 選択 をクリックします (1)。リンク ボックス (2) にリンクの冒頭部分が入ります（たとえば、Products by collection では /collections/）。構文 列の例のように、/collections/summer-sale などで完成させ、更新 (3) をクリックします。

    選択 (1) をクリックし、リンクを完成させ (2)、更新 (3) をクリックします。

項目の設定

アイコン
変更 をクリックして、アイコンを選ぶか画像をアップロードします。
タイトル
アイコンの下のテキスト。
リンク
タップしたときの動作。クリックすると リンクを選択 が開きます（「項目のアクション」をご覧ください）。
新しいタブで開く
リンクを新しいブラウザータブで開きます。
説明
項目と一緒に表示する短いテキスト（任意）。
アイコンサイズ
アイコンのサイズ（px）。
Box > Border radius（ボックス > 角丸）
項目ボックスの角を丸くします。0～100 px。
Box > Box padding（ボックス > 余白）
項目ボックスの内側の余白。0～100 px。
Box > Position（ボックス > 位置）
項目を左（負の値）または右（正の値）に移動します。-100～100 px。
カラー
この項目のみのテキスト、アイコン、アイコン背景、背景の色。それぞれにホバー時の色があります。設定をクリア をクリックすると、バーの色に戻ります。
バッジ
項目に付ける小さなラベル。タイトル、バッジの文字色、バッジの背景色 を設定します。
表示設定
一部のデバイスや一部の買い物客に対して項目を非表示にします。または、2つの日付の間だけ表示します。「表示ルール」をご覧ください。
詳細設定
追加のクラス名 は、カスタムCSS用のCSSクラスを追加します。分ける は、項目の横に区切り線を追加します。

項目のアクション

リンクを選択 では、アクションが8つのセクションにまとめられています。アクションの横にある情報アイコンをクリックすると、例が表示されます。

1. Link to your store internal pages
Exact short url /[your-url]、Home page /、All products /collections/all、Products by collection /collections/[collection-handle]、A product detail /products/[your-product-shorturl]、All blog posts /blogs/news、A blog posts detail /blogs/news/[your-blog-shorturl]、A page detail /pages/[your-page-shorturl]、Cart page /cart、Search page /search、Contact form /pages/contact。
2. Open panels (Compatible with popular themes)
Open Menu (mobile) gm-open:MobileMenu、Open Cart gm-open:Cart、Open Search gm-open:Search。
3. Open other applications (E.g. Shopify inbox...)
Open Chatbox gm-open:Inbox は、Shopify Inbox のチャットを開きます。
4. Scroll on page
Scroll to top gm-scroll:Top、Scroll to bottom gm-scroll:Bottom、Scroll to a on-page element gm-scroll:OnPage(htmlElement)。
5. Call javascript function
gm-javascript:Function は、サイト上のJavaScript関数を実行します。
6. Support tools
Make a phone call tel:、Send a SMS message sms:、Send an email mailto:、Chat with Messenger、Whatsapp、Telegram、Line、Zalo。
7. Share
Copy current URL gm-share:CopyUrl、Share to Facebook gm-share:Facebook、Share to X (Twitter) gm-share:X。
8. Link to extend websites
Full url（任意の完全なWebアドレス）、Don’t redirect #。
セクション2～4：パネルを開く、他のアプリケーション、スクロール。
セクション5と6：JavaScriptとサポートツール。
セクション7と8：共有と外部リンク。

例：

  • gm-scroll:Top(150) — 150 px の余白を残して、ページの先頭までスクロールします。
  • gm-scroll:OnPage(#page-title) — ID が page-title の要素までスクロールします。
  • tel:+0123456789 — この番号に電話をかけます。
  • sms:+012345678?body=I need help — テキストが入力された状態でSMSを開きます。
  • https://wa.me/0123456789 — WhatsApp のチャットを開きます。国番号を付け、+ は付けません。

バーのスタイルを設定する

サブメニューの位置と開き方を含む、一般設定。

メインメニュー（レベル1）

メニューの角丸
バーの角の半径。0～50 px。
項目の間隔
項目間の余白。0～50 px。
Padding inline · Padding block（左右の余白 · 上下の余白）
各項目の内側の左右および上下の余白。0～100 px。
ボックスシャドウを使用する
バーの周りに影を追加します。

サブメニュー（レベル2、3）

サブメニューの位置
左、右、中央、または 全幅 の幅。
サブメニューの開き方
ドロップダウンメニュー（フライアウトメニュー） または スライドアウト。
サブメニューの幅
100～900 px。
Padding inline · Padding block
各サブメニュー項目の内側の左右および上下の余白。0～100 px。

アイコンとテキスト

Icon size · Submenu icon size（アイコンサイズ · サブメニューのアイコンサイズ）
バーとそのサブメニューのアイコンサイズ。0～100 px。
Main menu gap: text - icon · Submenu gap: text - icon（メインメニューのギャップ：テキスト - アイコン · サブメニューのギャップ：テキスト - アイコン）
アイコンとテキストの間の余白。0～50 px。

詳細設定

メニューテキストを非表示
バーにアイコンのみを表示します。
サブメニューテキストを非表示
サブメニューにアイコンのみを表示します。
サブメニューの説明を非表示
サブメニュー内の項目の説明を非表示にします。

バーを表示する場所を選ぶ

  1. デバイスを選ぶ

    位置 で、モバイルで表示 (1)、デスクトップに表示 (2)、またはその両方をオンにします。

    モバイル (1) とデスクトップ (2) でバーをオンにしてから、位置を選びます。

  2. 位置を選ぶ

    各スイッチの下にあるレイアウトをクリックします。

    • Mobile（モバイル） — 下、上、中央左、中央右、左下、右下。
    • Desktop（デスクトップ） — 下中央、左下、右下、下全幅、中央左、中央右。

  3. スクロール中は非表示にする（任意）

    スクロールダウン時に非表示 を選ぶと、買い物客が下にスクロールしている間、バーがコンテンツを覆いません。

詳細設定

マーケット別の提供状況
選択したマーケットでのみバーを表示します。マーケット別にメニューを表示するをご覧ください。
メニューのZインデックス
重なり順。他の要素がバーを覆う場合は大きくし、バーがポップアップを覆う場合は小さくします。
メニューの不透明度
バーの透明度。0～100%。
下余白
バーと画面下端の間の余白。
スタイルシート / CSS
バー用のカスタムCSS。
JavaScript
バー用のカスタムJavaScript。

表示ルール

場所 設定 効果
位置 タブ モバイルで表示、デスクトップに表示 デバイスごとに、バー全体の表示と非表示を切り替えます。
詳細設定 タブ マーケット別の提供状況 選択したマーケットでのみ、バー全体を表示します。
項目 > 表示設定 デスクトップで非表示、モバイルで非表示 1つの項目を、特定のデバイスで非表示にします。
項目 > 表示設定 ログイン時は非表示、ログイン時のみ表示 1つの項目を、ゲストにのみ、またはログイン中のお客様にのみ表示します。
項目 > 表示設定 公開を予約 1つの項目を、開始日 から 終了日 の間だけ表示します。

バーを公開する

  1. 公開する

    右上の 保存 をクリックし、公開 をクリックして、テーマを選んで確定します。ダイアログはメガメニューの場合と同じです（メニューを公開するをご覧ください）。ステータスが 下書き から アクティブ に変わります。

    メニューの公開ダイアログ: (1) テーマを選択、(2) プレビューと公開

  2. ストアフロントを確認する

    スマートフォン、または幅の狭いブラウザーウィンドウでストアフロントを開きます。

変更または削除する

  • ストアフロントから外す — エディター上部の 無効にする をクリックします。
  • 以前のバージョンに戻す — バージョン履歴 タブを開きます。バージョン履歴をご覧ください。

トラブルシューティング

ストアフロントにバーが表示されない

バーは、すべてのメニューと同様に、アプリの埋め込みを通じて読み込まれます。そのテーマでアプリの埋め込みがオンになっていることを確認してください。アプリの埋め込みを有効にするをご覧ください。

「パネルを開く」アクションが何も起こらない

Open panels アクションは、テーマ自体のメニュードロワー、カートドロワー、検索を開くため、主要なテーマで動作します。お使いのテーマで何も起こらない場合は、代わりにページへリンクする（たとえば Cart page /cart）か、お問い合わせください。

バーがチャットボタンやCookieバナーと重なる

詳細設定 タブで 下余白 を大きくするか メニューのZインデックス を変更するか、位置 タブで別の位置を選んでください。

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

問題を報告