- 対象の一意性： モバイルタブバーが正確に移動するためには、CSSセレクターがページ内で厳密に1つの要素のみに一致する必要があります。
- 2段階の検証： 検証ツールでラッパーIDを特定し、リンクを保存する前にConsoleで一致件数を必ずテストしてください。
- 長期的な安定性： ShopifyのJSONテンプレートはIDを動的に生成します。重要なリンク先にはCustom Liquidで固定IDを追加するのが確実です。
クイックアンサー
公開中のトップページを開き、対象セクションを右クリックして「検証」を選択します。IDが shopify-section- で始まる外側のコンテナを探し、先頭に # を付けた文字列を用意して、Consoleで $$('#そのID').length を実行します。結果が1であれば、そのセレクターはスクロール先として使用可能です。
モバイルタブバーやナビゲーションメニューを設定する際、「CSSセレクター」の入力を求められる場面がよくあります。ブラウザはページ内のDOMノードを検索してスクロールを実行するため、セレクターに誤りがあったり複数存在したりすると、意図しない場所に飛んだり全く反応しなくなったりします。開発者ツールで事前検証を行うことで、公開前に確実なナビゲーションを担保できます。
セレクター、セクションID、アンカー：タブリンクが必要とする要素
設定欄にコードを入力する前に、CSSセレクター、HTMLのセクションID、アンカーリンクという3つの用語の違いを整理しておくことが不可欠です。アプリやテーマによって入力欄の要件が異なり、形式を間違えるとタブが正常に機能しません。
CSSセレクターとは、スタイルシートやスクリプトがHTML要素を特定するための記述規則です。例えば #reviews（reviews というIDを持つ要素を指定）や .featured-collection（そのクラスを持つ要素を指定）が該当します。MDN Web Docsのid属性仕様によると、id 属性の値はドキュメント全体で一意でなければなりません。Section Storeの技術解説でも言及されているように、IDは1つの要素のみに属するため、目的の場所に正確に到達できます。
一方、アンカーリンク（Anchor Link）は /#reviews のようにURL末尾にフラグメント識別子を含むURLのことです。ブラウザはアドレスバーのハッシュ記号 # を読み取り、該当するIDの位置まで自動的にスクロールします。アプリのリンク欄が「CSSセレクター」を直接要求している場合は、URL全体ではなくセレクター文字列（例：#reviews）を入力する必要があります。通常のURLフラグメント形式でリンクを設定したい場合は、モバイルタブのアンカーリンクに関する関連記事を参照してください。
スマートフォンの利用者をトップページの主要コンテンツへ瞬時に誘導することは、モバイルタブバーの設計思想において極めて重要です。以下の表でそれぞれの違いを整理します。
| 形式 | 主な使用場所 | 記述例 | 必須要件 |
|---|---|---|---|
| CSSセレクター | ターゲットセレクターを求めるナビゲーションアプリの設定欄 | #reviews または #shopify-section-template--custom |
ページ内で厳密に1要素のみに一致すること |
| セクションID | セクションのHTMLマークアップタグ内の属性値 | id="reviews"（ハッシュ記号 # なし） |
HTMLドキュメント全体で完全に重複がないこと |
| アンカーリンク | 通常のURLリンク設定欄やブラウザのアドレスバー | /#reviews または https://store.jp/#reviews |
# フラグメント付きのURLとして記述する（セレクターではない） |
ステップ1：公開中のトップページでセクションを検証する
適切なセレクターを調べる際は、Shopifyのテーマエディタ内ではなく、一般の購入者と同じように公開中のトップページをブラウザで開いてください。公開中のページが購入者が実際に読み込むページなので、実際のマークアップを確認する最も確実な場所です。
新しいブラウザタブを開き、ストアのトップページにアクセスして移動先セクション（お客様の声、FAQ、特集商品など）までスクロールします。セクションの見出しや背景を直接右クリックし、「検証（Inspect）」を選択します。
ショートカットキーでも開発者ツールを起動できます。
- macOS:
Cmd + Option + C(Chrome DevTools Open) - Windows:
Ctrl + Shift + C(Chrome DevTools Open)
要素検証ツールを開くショートカットキー:
macOS: Cmd + Option + C
Windows: Ctrl + Shift + C
shopify-sectionラッパー要素を確認する
要素（Elements）パネルが開くと、クリックした直下のテキストや画像タグがハイライトされます。セクション全体をスクロールの着地先にするには、DOM階層を上にたどり、セクション全体を囲むコンテナを見つける必要があります。
- Elements パネル内で、親要素に向かってカーソルを上に移動させます。
- セクション全体を囲む外側のコンテナ要素（通常は
<div>）を探します。 - その要素の
id属性を確認します。Shopifyのストアフロントでは、通常shopify-section-から始まるIDが付与されています。
公式のShopify Sectionオブジェクト技術仕様に記載されているとおり、JSONテンプレートを通じて読み込まれるセクションのIDはShopifyによって動的に生成されます。IDは shopify-section-template--18492048593__featured_collection のような文字列になることがありますが、ストアごとに異なるため、必ずご自身のページからコピーしてください。
<!-- Shopifyセクションのラッパー要素の記述例 -->
<div id="shopify-section-template--18492048593__reviews" class="shopify-section">
<!-- セクションの内容がここにレンダリングされる -->
</div>
記述をセレクターに変換する（IDには #、クラスには .）
外側のラッパー要素を見つけたら、HTMLの属性値をCSSセレクターの形式に変換します。
idの値を使用する場合：先頭にハッシュ#を付与（例：#shopify-section-template--18492048593__reviews）classの値を使用する場合：先頭にドット.を付与（例：.featured-reviews-grid）- 1つの要素に複数のクラスがある場合：ドットで連結（例：
div.shopify-section.reviews-container）
Chrome DevToolsには便利な抽出機能もあります。Elementsツリーで強調表示されたラッパーノードを右クリックし、「Copy」から「Copy JS Path」を選択します（Chrome DevTools DOM）。すると、クリップボードに以下のような式がコピーされます。
document.querySelector("#shopify-section-template--18492048593__reviews")
引用符で囲まれた内側の文字列を取り出します。これがセレクターの候補となります。ただし、タブに設定する前に、このセレクターがページ内で唯一のものであるかを検証する必要があります。
ステップ2：セレクターが厳密に1要素のみに一致することを確認する
DevToolsからコピーしたセレクターなら何でもそのまま動作すると考えるのは危険です。セレクターが複数の要素に一致していたり、モバイル画面で一致件数がゼロになったりすると、タブが正常に動作しなくなります。
アプリ開発元のUpChargeも、要素を設定する際は一意のクラスやIDを確認することを推奨しています。この確認作業は開発者ツールを使えば手早く行えます。
要素パネル内を検索する（Ctrl/Cmd+F）
最も手軽な最初のチェックは、DOMツリー内での直接検索です。Chrome DevTools DOM ドキュメントにあるように、DOMツリーは文字列、CSSセレクター、XPathで検索できます。
- Elements パネル内をクリックします。
Ctrl + F（Windows）またはCmd + F（macOS）を押して、パネル下部に検索バーを表示させます。- 先頭の
#を含めたセレクター候補（例：#shopify-section-template--18492048593__reviews）を貼り付けます。 - 検索バー右側のマッチ件数表示（例：
1 of 1）を確認します。
Elementsパネルでの検索確認:
検索式: #shopify-section-template--18492048593__reviews
期待される結果: 1 of 1
表示が 1 of 1 であれば、そのセレクターはDOM構造内で単一のノードのみを指しています。
Consoleで一致件数をカウントする
スクリプト実行の観点から確実な検証を行うため、DevToolsの Console タブに切り替えます。
Chrome DevTools Console Utilities APIによると、ユーティリティ関数 $$(selector) は指定したCSSセレクターに一致する全要素の配列を返します。標準のWeb APIである document.querySelectorAll(selector)（MDN querySelectorAll）を使用しても同様です。
Consoleの入力プロンプトに以下のいずれかを入力してEnterキーを押します。
$$('#shopify-section-template--18492048593__reviews').length
document.querySelectorAll('#shopify-section-template--18492048593__reviews').length
出力された数値に応じて以下の対応を行います。
| 一致件数 | 技術的な意味 | タブスクロールへの影響 | 必要な対応 |
|---|---|---|---|
| 0 | 一致する要素が存在しない | MDN querySelector 仕様により null が返り、タブはスクロールしません。 |
スペルミス、セクションの非表示設定、外側ラッパーの再確認を行います。 |
| 1 | 正確に1つの要素に一致 | スクロール先が一意かつ安定的です。ブラウザは正しい位置を捕捉します。 | 使用可能。タブの設定に進んでください。 |
| 2以上 | 複数の要素がセレクターを共有 | querySelector はDOM内で最初に現れた要素のみを取得します（MDN querySelector）。 |
セレクターを絞り込むか、ステップ3の方法で固定IDを付与します。 |
この確認は必ずモバイル表示モードでも実施してください。DevTools内の Toggle device toolbar アイコンをクリックします。一部のShopifyテーマではPC用とスマホ用で異なるセクションを出力するため、画面幅によってセレクターが消失したり重複したりする場合があります。
概念図（コンセプトイラスト）: コンソールで一致件数を確認し、セレクターが単一の要素のみを捕捉していることを確認する画面イメージ。
ステップ3：テーマ更新でも壊れないセレクターを選択する
shopify-section- から始まる自動生成IDは手軽にテストできる反面、運用上これを恒久的なリンク先として使い続けることにはリスクが伴います。
ShopifyのOnline Store仕様では、JSONテンプレート内のセクションIDはShopifyによって動的に生成されます（Shopify Section Object）。テーマ開発元のFluorescentも “Shopify dynamically generates ids for sections but these ids are not stable.”（ShopifyはセクションのIDを動的に生成しますが、これらのIDは安定的ではありません）と明確に指摘しています。これらのIDは安定的ではないため、IDに依存したタブのリンクはレイアウト編集後に機能しなくなる可能性があります。変更のたびに再確認してください。
また、div:nth-child(4) > div.grid > div:first-child のような階層の深いクラスチェーンも避けてください。構造が変わるとリンクが無効化する可能性があります。
推奨アプローチ：Custom Liquidで独自の固定IDを設ける
テーマのカスタマイズや更新を行っても絶対に壊れないセレクターを作るには、テーマエディタで独自の固定IDを設置します。
- Shopify管理画面から「オンラインストア > テーマ」を開きます。
- 作業前に現在のテーマを複製し、バックアップを作成しておきます。
- 作業用テーマの「カスタマイズ」をクリックします。
- トップページのセクション構成画面で、リンクさせたいセクションの直上にある「セクションを追加」または「ブロックを追加」をクリックします。
- 「カスタムLiquid（Custom Liquid）」（テーマによってはカスタムHTML）を選択します。
- 任意のIDを指定した軽量なHTMLアンカータグを記述します。
<div id="reviews"></div>
IDには半角小文字の英数字とハイフンを使用します（例：customer-reviews、faq-section、best-sellers）。MDNのid属性リファレンスにあるとおり、この値はページ内で一意でなければなりません。
| 比較項目 | 自動生成セクションID | Custom Liquidで設定した固定ID (<div id="...">) |
|---|---|---|
| 記述例 | #shopify-section-template--18492048593__reviews |
#reviews |
| 導入の手間 | なし（ブラウザ検証ツールからコピーするのみ） | 直上にCustom Liquidブロックを追加する作業が必要 |
| テーマ変更時の安定性 | 脆弱（セクションの再配置・再作成でIDが変わる） | ブロックを残す限り同じIDが維持される |
| 可読性 | 長く暗号的で管理しにくい | 短く直感的で、メモや仕様書でも判別しやすい |
| 推奨用途 | 初期段階の動作確認や一時的なデバッグ | 本番稼働するナビゲーションリンクの実装 |
以下のEcomGraduatesによる動画チュートリアルでは、Shopifyのセクションを検証してカスタムアンカーIDを設置する一連の流れが実演されています。
注意が必要なケース：明確なIDがない場合、入れ子セクション、特殊文字
Shopifyストアの構造によっては、標準的なセレクター抽出が困難なケースがあります。以下の対処法をあらかじめ把握しておくことでトラブルを防げます。
セクションに明確なIDが存在しない場合
一部の独自開発セクションやページビルダー系アプリで作成したセクションでは、外枠のコンテナに標準的なIDが出力されないことがあります。複数のクラス名を無理に連結するとCSSの更新時にリンク切れを起こしやすいため、ステップ3のCustom Liquidによる方法を採用してください。セクション直上に <div id="任意のID"></div> を配置すれば、テーマのLiquidファイルを改変することなく確実なセレクターを用意できます。
入れ子になったセクションやアプリブロック
商品グリッド内に埋め込まれたレビューウィジェットなど、セクション内のアプリブロックへ直接スクロールさせたい場合、アプリの内部要素を指定すると意図しない位置に移動することがあるため、必ず動作を確認してください。この場合も外側の shopify-section コンテナを対象にするか、セクション直上にアンカーを配置するのが安全です。
モバイル専用またはPC専用セクション
端末ごとに別々のバナーやセクションを配置しているストアも多く見られます。PC用セクションにIDがあり、スマホ用セクションが別ブロックになっている場合、スマートフォンでタブを押しても移動しません。必ずDevToolsのモバイル表示で検証し、スマートフォン上で実際に表示されているコンテナをセレクターに指定してください。
特殊文字とCSSエスケープ規則
MDNのquerySelector仕様によると、数字で始まるIDや、コロン・ドット・疑問符などを含むIDは正規のCSS識別子ではないため、CSS.escape() によるエスケープ処理が必要になります。例えば 123-reviews のようなIDはCSS構文上で問題を起こす可能性があります。
アプリ側の設定エラーを防止するため、特殊文字は一切含めないようにしてください。カスタムIDは半角英小文字、数字、ハイフンのみで構成し、リンク入力欄に引用符や丸括弧を含めないことが鉄則です。
セレクターをタブのスクロール先として設定する
セレクターが1つの要素のみを指していることを確認できたら、モバイルタブバーの設定画面に入力します。
まず、利用しているナビゲーションアプリやテーマの設定ドキュメントを確認し、リンク入力欄がハッシュ付きURL（例：/#reviews）を求めているのか、直接のCSSセレクター式（例：#reviews）を求めているのかを判別します。
セレクター専用の入力欄が用意されている場合：
- ステップ2で検証したセレクター（例：
#reviewsや#shopify-section-template--custom）を入力します。 - アプリの構文規則に合致していることを確認します。
- メニュー設定を保存します。
なお、ブラウザのスクロール処理は現在開いているドキュメントに対して機能します。商品詳細ページやコレクションページを閲覧中に同一ページ内セレクターが設定されたタブをタップした場合、該当ノードが見つからずセレクター検索は null を返し（MDN querySelector）、スクロールは発生しません。タブのテストは必ずトップページ上で行ってください。
また、設定したカスタムIDはストアの運用管理シートに記録しておきましょう。レイアウト改修時に他のスタッフが誤ってCustom Liquidブロックを削除してしまう事態を防止できます。
トラブルシューティング：スクロールしない、ヘッダーに隠れる、位置がずれる
スマートフォン実機でタブの動作に問題が生じた場合は、以下の項目を順に確認してください。
タブを押しても全くスクロールしない
トップページでConsoleを開き、再度 $$('#設定したセレクター').length を実行します。結果が 0 の場合、その要素は現在のページに存在しないか、テーマ更新でIDが変化したか、記述にスペルミスがあります。MDNの規定どおり、不一致の場合は null が返され処理が中断します（MDN querySelector）。
意図しない別の場所にスクロールする
タップ時に指定セクションではなくページの最上部や最下部などへ飛んでしまう場合、セレクターが複数の要素に一致しています。複数の一致がある場合、querySelector はDOM内で最も上にある最初のノードを選択します（MDN querySelector）。Consoleで重複を確認し、固有のCustom Liquid IDに切り替えてください。
固定ヘッダーにセクションのタイトルが隠れる
ブラウザの標準的なスクロール処理は、対象要素の上端を表示領域（ビューポート）の最上部にぴったり揃えます。ストアに固定（Sticky）ヘッダーが存在する場合、ヘッダーが被さってセクションの見出しが隠れてしまいます。
MDNのscrollIntoViewドキュメントに記載されているように、CSSの scroll-margin-top プロパティを利用して表示位置の余白を調整できます（“To define a custom spacing, use scroll-margin-top or scroll-margin-bottom. This is often useful when there’s a fixed header on the page.”：固定ヘッダーがあるページでは、余白を定義するためにscroll-margin-topが役立ちます）。
DevToolsで固定ヘッダーの高さを測定し、テーマのカスタムCSSに十分な余白を設定します。
/* 固定ヘッダー分の余白を確保して隠れを防ぐ */
#reviews {
/* Replace 80px with your own header height */
scroll-margin-top: 80px;
}
開いたドロワーメニューが画面を遮っている
下部タブバーとスライド式ドロワーメニューが併用されている場合、ドロワーを開いたままタブを操作すると画面遷移が干渉することがあります。モバイルドロワーメニューの設計指針に基づき、外部リンクがタップされた際はオーバーレイが自動で閉じる挙動を確保してください。
画像の遅延読み込み（Lazy-load）で着地位置がずれる
目的セクションより上に大きな画像バナーが配置されている場合、遅延読み込みによってスクロール完了後にページの高さが変わり、停止位置が上下にずれる現象が起こります。ページの読み込みが完全に完了した状態で動作を確認してください。
概念図（コンセプトイラスト）: CSSのscroll-margin-topを指定して固定ヘッダーによる見出しの被りを解消するイメージ。
トレードオフ：セレクターリンクが適さないケース
ページ内セクションへのスムーススクロールは優れた操作性を提供する一方で、すべての導線設計に適しているわけではありません。
専用ページが必要なボリュームのあるコンテンツ
リンク先が多数の商品を含むカタログ、詳細なポリシー、充実したサポート情報である場合、トップページの1セクションに詰め込むと見つけにくく、共有もしにくくなります。独立したコレクションページやポリシーページにはそれぞれ専用のURLがあり、タブはページ内スクロールに頼らず、そのURLへ直接リンクできます。
タブバーの情報過多と操作性の低下
モバイルタブバーは親指での素早い主要導線切り替えを目的としています。トップページの各セクションへ飛ぶタブを複数並べると、下部バーが乱雑になり、下層ページを回遊しているユーザーにとって利便性が低下します。ハンバーガーメニューを超えたナビゲーション設計で解説しているように、タブは最も利用頻度の高い目的地に絞り込む必要があります。
テーマ依存度とメンテナンス負荷
テーマの自動生成コードに依存したセレクターは、デザイン刷新のたびに点検が必要になります。標準テーマのメニュー機能だけで対応が難しくなった場合は、テーマ標準メニューの構造的限界を把握し、専業アプリによる柔軟なメニュー管理への移行を検討するのが賢明です。
Navi+における活用法
Navi+は、Tab BarおよびMobile Menuを通じてShopifyストアに最適化されたナビゲーション機能を提供しています。各メニュー項目には専用の「Link To」欄が備わっており、通常のWeb URLから特殊なアクション構文まで柔軟に対応しています。
特定セクションへのスムーズなスクロールを実現するため、Navi+では scroll:OnPage(#section-id) という構文をサポートしており、公式ヘルプセンターに「CSSセレクターによるセクションへのスクロール」として記載されています（Navi+ リンクタイプ一覧）。本機能はBusinessおよびEliteプランでご利用いただけます。
設定時は、ステップ2で検証した「1要素のみに一致するセレクター」を正確に入力してください。ページ内スクロール処理は現在開いているドキュメントのDOMを検索するため、リンク先のセクションはユーザーが閲覧中のページ内に存在している必要があります。トップページを起点としてスマートフォン実機で動作確認を行ってください。
Navi+ Tab Barをご利用の場合は、検証済みのセレクターをタブのLink To欄に scroll:OnPage(#設定したID) の形式で入力し、トップページからスマートフォンでタップして動作を確かめてみてください。すべてのリンク構文の詳細はNavi+ヘルプセンターでご覧いただけます。
アクションチェックリスト
セクションのセレクター設定を完了するための7項目の手順リストです。
- テーマエディタの外で、PCブラウザから公開中のトップページを開く。
- 目的のセクションを右クリックして「検証」を選択し、IDが
shopify-section-で始まる外側のコンテナを特定する。 - ラッパーのIDを控え、先頭に
#を付けたセレクター文字列を用意する。 - DevToolsのConsoleで
$$('#セレクター').lengthを実行し、結果が厳密に1であることを確認する。 - DevToolsのデバイスツールバーを有効化し、スマートフォン表示でも同一のセレクターが存在し一意であることを確認する。
- 長期的な運用の安定性を重視する場合、セクション直上に
<div id="設定ID"></div>を含めたCustom Liquidを追加する。 - 検証済みセレクターをタブの設定に入力し、固定ヘッダーで隠れる場合は
scroll-margin-topを指定した上で実機テストを行う。
よくある質問（FAQ）
ShopifyのセクションIDはどこで確認できますか？
セクションIDはShopifyの通常管理画面には表示されません。確認するには、公開中のストアフロントをブラウザで開き、対象セクションを右クリックして「検証」を選択し、外側の shopify-section 要素にある id 属性の値を読み取ります（Shopify Section Object、MDN querySelectorAll）。
設定したセクションのセレクターが突然動かなくなったのはなぜですか？
ShopifyはJSONテンプレート内のセクションIDを動的に生成しており、レイアウトの編集やセクションの再作成を行うとIDが変更されることがあります（Shopify Section Object、Fluorescent）。恒久的に機能させるには、Custom Liquidブロックで固定IDを配置してください。
セレクターが1つの要素のみに一致しているか確認するには？
開発者ツールのConsoleタブを開き、$$(selector).length または document.querySelectorAll(selector).length を実行します（Chrome DevTools Console Utilities、Chrome DevTools DOM）。返り値が1であれば、そのセレクターはページ内で単一の要素のみを指しています。
DevToolsの「Copy selector」機能を使ってもよいですか？
Chromeの「Copy selector」や「Copy JS Path」は初期確認には便利ですが、生成される長い階層構造はデザイン変更で破損しやすい傾向があります。セクション固有のIDを用いた簡潔な指定に絞り込む方が安全です。
セレクターが複数のセクションに一致しているとどうなりますか？
複数の要素が合致する場合、JavaScriptの querySelector などの処理はDOMツリー内で最初に出現した要素のみを対象とします（MDN querySelector）。そのため、タブを押した際に本来より上部にある無関係なセクションへ移動してしまう原因になります。
スクロール後にセクションのタイトルがヘッダーの下に隠れてしまうのはなぜですか？
ブラウザは対象要素の上端を表示領域の一番上に揃えようとします。ストアに固定ヘッダーが存在すると、そのヘッダーが見出しの上に重なってしまいます。対象要素にCSSの scroll-margin-top を付与することで、必要な表示余白を確保できます（MDN scrollIntoView）。
参考資料
- Shopify Developer Documentation: Section Liquid Object — JSONテンプレートにおけるセクションIDの動的生成に関する公式仕様。
- Fluorescent Documentation: Custom Liquid Developer Guide — セクションIDの変動性およびカスタムアンカー設置に関する解説。
- MDN Web Docs: HTML id グローバル属性 — ドキュメント全体でのID属性の一意性を規定する標準仕様。
- MDN Web Docs: Document.querySelector() — 最初に一致する要素の返却、null時の挙動、セレクターのエスケープ規則。
- MDN Web Docs: Document.querySelectorAll() — セレクター一致チェックにおける静的NodeListの評価仕様。
- MDN Web Docs: Element.scrollIntoView() — ビューポートのアライメント動作およびscroll-margin-topによる余白指定。
- Chrome for Developers: Chrome DevTools DOM Inspection — DOMツリー検索およびノード抽出に関する技術ガイド。
- Chrome for Developers: Console Utilities API — セレクター検索ヘルパー
$$(selector)の利用仕様。 - Chrome for Developers: Open Chrome DevTools — OSごとの開発者ツール起動ショートカット一覧。
- Section Store Help: Custom Placement: Finding a CSS Selector — 要素IDの一意性と配置に関するベンダー向けガイド。
- UpCharge Help Center: Selector Settings Guide — 一意のクラスおよびID特定に関する実務アドバイス。
- Navi+ Help Center: Navigation Item Link Types — BusinessおよびEliteプランにおける
scroll:OnPage(#section-id)の公式構文仕様。
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。