結論：アンカーリンクを使えば可能です
はい、可能です。ホームページのセクションにID（例：reviews）を付与し、タブのリンク先を /#reviews に設定します。ブラウザは # の後ろに一致するIDを持つ要素までスクロールします。ShopifyがJSONテンプレートで自動生成するIDは変わる可能性があるため、自身で設定したIDを使用してください。
HTMLアンカーリンクを使用すれば、下部タブからホームページ上の任意の要素へ直接移動できます。タップ時、ブラウザはDOM内で一致するIDを検索して画面に表示します。Web標準によりID属性は文書内で一意でなければなりません。ShopifyがJSONテンプレートで自動生成するIDは更新で変化しやすいため、安定した独自IDの設定が不可欠です。
モバイルタブバーは、画面下部に常時固定表示されるナビゲーションメニューです。優れた モバイルタブバーのアーキテクチャ を構築することは、コレクションへの誘導だけでなく、ホームページ上のレビューへの最短アクセスを提供することを意味します。
Shopifyホームページにおけるアンカーリンクの仕組み
/#reviews という記述の正確な意味
/#reviews という記述は3つの指示を与えます。先頭スラッシュ / はホームページを示し、# はフラグメントの区切りを表し、reviews は対象HTML要素のIDを指定します。タップ時、ブラウザは親コンテナをスクロールして要素を表示します（scrollIntoView() と同様の動作）。#reviews のみでは他ページで失敗するため、先頭スラッシュでホームページへの復帰を担保します。
自動生成されるセクションIDと自身で設定するIDの違い
Shopifyの各セクションは、class="shopify-section" と shopify-section- で始まるIDを持つ親 div で囲まれています。Liquid静的セクションの場合、IDは .liquid を除いたファイル名となります。一方JSONテンプレートでは、Shopifyによって動的にIDが生成されます（参照：Liquid Objects: Section）。これは shopify-section-template--123456__reviews のような形式です。このIDのコピーは簡易テスト向きで、セクションを作り直すとIDが変わりリンク切れを起こす可能性があります。自分で設定したIDなら、Shopifyの自動生成に依存せずに済みます。
| 比較項目 | 自動生成されるセクションID | 自身で管理するカスタムID |
|---|---|---|
| フォーマット例 | shopify-section-template--123456__reviews |
reviews |
| 安定性 | 低い（セクションを作り直すと変わる可能性がある） | 高い（自分で管理でき、ブロックが残る限り維持される） |
| 管理主体 | Shopifyテーマ描画エンジン | ショップ運営者または開発者 |
| 推奨される用途 | 一時的な動作検証や簡易的な要素検査 | 本番運用のナビゲーションメニューやモバイルタブバー |
ステップ1：セクションに安定したIDを設定する
アンカーによるジャンプを設定するには、モバイルブラウザが特定できる明確な要素IDが必要です。既存のテーマコードを検証して一時的にテストする方法と、本番運用に向けて専用のアンカーブロックを配置する方法の2つがあります。
手早く検証するにはPCブラウザでDOMを検査します。各セクションは class="shopify-section" と shopify-section-template--123456__reviews のようなIDを持つ親 div で囲まれています（参照：Section Rendering API）。テストには使えますが、IDが変わってリンク切れを起こす可能性があります。
永続的な方法は、自身で管理できるIDを設定することです。利用中のテーマでCustom LiquidまたはCustom HTMLのブロックやセクションが提供されている場合は、テーマエディタで目的のセクションの真上に配置し、以下のシンプルなアンカータグを挿入します。
<div id="reviews"></div>
アンカー名は半角英小文字とハイフンを用います。MDN Web Docs id 属性 に明記されている通り、IDはドキュメント全体で一意でなければなりません。IDが重複するとスクロール先が不確実になります。作業前には必ずテーマを複製してください。
図1：概念イラスト — 自動生成されるセクションIDとCustom Liquidで設定した安定したカスタムIDの比較
ステップ2：タブにアンカーリンクを設定する
テーマ内蔵のタブバー（カスタムリンクブロック）
一部のテーマにはモバイルボトムバーが内蔵されています。Zestテーマのドキュメントでは、カスタムリンクブロックについて「顧客を希望のリンク先ページへリダイレクトする」と説明されています。このドキュメントにアンカーの記載はないため、リンク欄に /#reviews と入力して動作を確認してください。
ナビゲーションアプリによるタブバー
専用アプリでナビゲーションを管理している場合は、アプリのドキュメントを確認してアンカー記号がサポートされているかを確かめてください。アプリによっては、要素までスクロールする独自構文（後述するNavi+の scroll:OnPage など）が用意されています。
タブバーがサイト全体で表示される設計の場合、リンク先は #reviews ではなく必ず /#reviews と記述してください。商品ページ滞在時に #reviews のみをタップしても何も反応しません。先頭のスラッシュ / を付与することで、確実にホームページに戻ってから移動します。
最新Shopifyテーマのナビゲーション設計に関する詳細な分析については、当社の Horizon テーマの徹底レビュー をご参照ください。
ステップ3：スマートフォンでテストする（スムーズスクロールと固定ヘッダー余白）
エミュレーターでの検証ではタッチ操作感を正しく評価できません。スマートフォン実機を用いて、ホームページ上からのタップと商品ページからのタップを直接テストしてください。
ブラウザはデフォルトでアンカー位置へ一瞬でジャンプします。滑らかなアニメーションのため、CSSに scroll-behavior: smooth; を追加します。MDN Web Docs CSS scroll-behavior に記載の通りナビゲーション時の挙動を制御します。
html {
scroll-behavior: smooth;
}
固定ヘッダーによる重なりを解消します。ブラウザは要素上端を表示領域最上部に合わせるため、固定ヘッダーが見出しを隠します。MDN Web Docs Element: scrollIntoView() で解説されている通り、固定ヘッダーがある場合は scroll-margin-top で余白を確保します。
#reviews {
scroll-margin-top: 80px; /* Adjust according to your sticky header height */
}
注意：80px という数値は一例です。実機でヘッダーの高さを測定し、テーマに合わせて数値を調整してください。また、画面下のタブバーがセクション末尾のボタン類を隠していないかも確認します。
図2：概念イラスト — 固定ヘッダーに隠れてしまったセクション見出しと、scroll-margin-top で適正な余白を確保した表示の比較
アンカーリンクが機能しない場合の対処法
モバイルタブをタップしてもスクロールしない場合や、着地位置がズレている場合は、以下の5つの原因を確認してください。
-
セクション再追加によるID変化：自動生成ID（
shopify-section-...）を使用していた場合、並べ替え等でIDが再生成されます。Custom LiquidのカスタムIDに変更してください。 -
ページ内でのID重複：複数要素に同一IDが付与されている場合、ブラウザは最初に見つかった要素へしかジャンプしません。カスタムIDが一意であることを確認してください。
-
サードパーティ製アプリのウィジェット：外部アプリが読み込むセクションにID設定がない場合は、その直前に空の
<div id="reviews"></div>を配置します。 -
遅延読み込みによる表示ズレ：画像の読み込み遅延によってページの高さが変わる場合があります。実機で2回タップし、正しい位置に収まるかを確認してください。
-
開いたままのドロワーメニュー：展開中の モバイルドロワーメニューの実装指針 が画面を遮ることがあります。タブ操作時に自動でドロワーを閉じるよう設定してください。
| リンクの記述形式 | ホームページ上でタップした場合 | 別ページ（商品ページ等）でタップした場合 |
|---|---|---|
#reviews |
レビューセクションへスクロール | 何も動作しない（該当ページ内に対象IDが存在しないため） |
/#reviews |
レビューセクションへスクロール | ホームページへ遷移した後、対象セクション位置に表示を合わせる |
アンカーリンクと独立したページ・コレクションの比較
タブをホームページの特定セクションへジャンプさせる設計は便利な近道ですが、あらゆるコンテンツに適しているわけではありません。ページ内ジャンプと個別ページの選択は、検索インデックスの制約と操作性のバランスを考慮して判断する必要があります。
アンカーリンクは、レビュー、ブランドのルックブック、簡易FAQなど、ホームページ上に自然に収まるコンテンツで強みを発揮します。訪問者はページの再読み込みを待つことなく、閲覧の文脈を保ったまま信頼情報を確認できます。
ただしオーガニック検索での上位表示を狙う場合、URLフラグメントは適していません。Google検索は個別コンテンツを識別する手段としてフラグメントを通常サポートしません（参照：Google Search Central のURL構造ガイドライン）。/#reviews が独立したページとして検索結果に表示されるとは期待しないでください。独立した検索流入を狙うなら固有のURL（/pages/reviews など）が必要です。
モバイルタブバーは画面ビューの切り替えを主目的として設計されています。多数のアンカーを配置するとユーザーが混乱するため、設置は最大1〜2個に留めるべきです。詳細な指針については、当社の ハンバーガーメニューを超えたナビゲーション をご覧ください。
| 戦略的フレームワーク | 最適な適用先 | 主なメリット | 考慮すべきトレードオフ |
|---|---|---|---|
アンカーリンク (/#reviews) |
ホームページ上のレビュー、ルックブック、簡易FAQ | 再読み込みなしで即座に表示、閲覧位置のコンテキストを維持 | Google検索にインデックスされない、多用するとタブバーが混乱する |
独立したページ・コレクション (/pages/reviews) |
網羅的なレビュー一覧、サイズガイド、商品コレクション | Google検索で個別にインデックスされ、リッチスニペット表示も可能 | ページの完全な再読み込みが必要、訪問者をホームページから離脱させる |
Navi+ が提供するソリューション
Shopify向け専用モバイルボトムバーである Navi+ Tab Bar をご利用の場合、セクションへのスクロール機能が標準でサポートされています。
Navi+のダッシュボード内では、各タブに「Link To」設定欄があります。BusinessプランおよびEliteプランでは、scroll:OnPage(#reviews) という構文を入力することで、該当CSSセレクターへのスムーズなスクロールが実行されます。
Navi+では分かりやすい規約を採用しています。Link Toを空欄にするとホームページを指します。通常リンクはドメイン無しの相対パス（例：/collections/all）を用います。単独の # は画面遷移せずサブメニューを開く親項目専用です。展開用 # と scroll:OnPage(#reviews) を混同しないようにしてください。
アプリ専用構文を使う場合でも、基本原則は共通です。対象セクションに安定したIDを付与し（ステップ1）、実機上で scroll-margin-top による固定ヘッダーの余白を必ず調整してください（ステップ3）。scroll:OnPage は現在のページ内の要素へスクロールするため、本番利用の前にホームページと他のページの両方からタブを試してください。
Navi+ Tab Barをご利用の場合は、タブの「Link To」欄に scroll:OnPage(#reviews) と入力し、スマートフォン実機で動作を確認してください。利用可能なリンク形式の全一覧はNavi+ヘルプセンターで公開されています。詳細な実装手順については、公式ドキュメントの Navi+ のリンクタイプ解説 をご確認ください。
実践チェックリスト
- モバイル購入者に直接ジャンプさせたいホームページのセクションを選ぶ。
- 対象の上に空のCustom Liquid（
<div id="reviews"></div>）を配置して安定したIDを付与する。 - タブのリンク先を
/#your-id（またはアプリ構文scroll:OnPage）に設定する。 - CSSに
html { scroll-behavior: smooth; }を記述してスムーズスクロールを有効化する。 - CSSで
scroll-margin-topを指定し、固定ヘッダーが見出しを隠さないよう余白を取る。 - スマートフォン実機を用い、ホームページおよび商品ページ双方からの動作を確認する。
- 今後のテーマ改修で誤って削除しないよう、カスタムIDを社内メモに記録しておく。
よくある質問（FAQ）
ShopifyセクションのIDはどこで確認できますか？
各セクションは shopify-section-... というIDを持つ親 div で囲まれています。PCブラウザ上で右クリックして「検証」を選択すれば確認できます。
なぜ設定したアンカーリンクが突然動かなくなったのですか？
JSONテンプレート内のセクションIDはShopifyによって動的に生成され、セクション再配置で変化します。Custom LiquidでカスタムIDを設定して永続化してください。
ジャンプ後、なぜセクションの見出しが固定ヘッダーの下に隠れてしまうのですか？
ブラウザは要素上端を表示領域最上部に合わせるため、固定ヘッダーが見出しに重なります。CSSの scroll-margin-top で必要な余白を確保してください。
同一ページ内で同じIDを2回以上使い回すことはできますか？
いいえ、できません。HTML仕様書により id 属性はドキュメント全体で一意であることが義務付けられており、重複は予期せぬ挙動の原因となります。
Googleは /#reviews を独立した個別ページとしてインデックスしますか？
いいえ、インデックスされません。Google検索は個別コンテンツの識別にURLフラグメントを通常サポートしないため、専用ページを作成してください。
Navi+ はタブからセクションへのリンクをサポートしていますか？
はい、対応しています。Navi+ Tab Barでは、Link To欄に scroll:OnPage(#section-id) と入力することでCSSセレクターへのスクロールが可能です（Business/Elite）。
情報源・参照文献
- Shopify Developer Documentation: Liquid Objects: Section
- Shopify Developer Documentation: Section Rendering API
- MDN Web Docs: HTML id attribute
- MDN Web Docs: Element: scrollIntoView() method
- MDN Web Docs: CSS scroll-behavior
- Google Search Central: URL Structure Guidelines
- FoxEcom Zest Theme Documentation: Mobile Navigation Bar
- Navi+ Help Center: Menu Item Link Types
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。