- TOP
- ブログ
- Shopifyアプリ
- Shopifyでパンくずリストを表示する方法。おすすめアプリとは
Shopifyでパンくずリストを表示する方法。おすすめアプリとは
2026-07-30 13:03:05
Shopifyストアの商品数やコンテンツが増えると、ユーザーが現在どのページを閲覧しているのか分かりにくくなる場合があります。特に、検索エンジンや広告から商品ページへ直接アクセスしたユーザーは、ストア全体の構造を把握しにくい傾向があります。
ユーザーの現在位置を示し、上位のコレクションや関連ページへ移動しやすくする機能がパンくずリストです。適切に設定すれば、ユーザビリティーだけでなく、サイト内の回遊や検索エンジンによるサイト構造の理解にも役立ちます。
本記事では、Shopifyにパンくずリストを表示するメリット・デメリットや設定方法を解説します。テーマ・アプリ・Liquidコードを使った導入方法、構造化データの設定、実装時の注意点も紹介します。
目次
Shopifyのパンくずリストとは
パンくずリストは、ユーザーが閲覧しているページの位置を階層形式で示す補助的なナビゲーションです。まず始めに、パンくずリストの基本的な役割や種類、構造化データとの違いを詳しく解説します。
パンくずリストの役割
パンくずリストとは、ウェブサイトのトップページから現在のページまでの階層を、リンク付きのテキストで表示する機能です。
Shopifyの商品ページでは、次のような形式で表示されます。
ホーム ＞ レディース ＞ ワンピース ＞ 商品名
ユーザーはパンくずリストを見ることで、現在閲覧している商品がどのコレクションに属しているのかを把握できます。「レディース」や「ワンピース」をクリックすれば、上位のコレクションページへ直接移動できます。
グローバルメニューを開いたり、ブラウザーの戻るボタンを何度も押したりする必要がないため、商品数やコレクション数が多いShopifyストアほど効果を得やすい機能です。
Shopifyにおけるパンくずリストの表示例
パンくずリストに表示する階層は、ページの種類によって異なります。
商品ページでは、次のように、ホーム、コレクション、商品名の順に表示する形式が一般的です。
ホーム ＞ ファッション ＞ メンズ ＞ ジャケット ＞ 商品名
コレクションページでは、親コレクションと現在のコレクションを表示します。
ホーム ＞ ファッション ＞ メンズ
ブログ記事では、ブログ一覧や記事カテゴリーを経由して記事名を示します。
ホーム ＞ お役立ち情報 ＞ Shopify運営 ＞ 記事名
固定ページでは、ホームとページ名だけを表示する場合もあります。
ホーム ＞ よくある質問
全てのページで同じ階層数にそろえる必要はありません。ユーザーが現在位置と上位ページを理解できる構造を優先します。
パンくずリストの種類
パンくずリストは、主に位置型、属性型、パス型の3種類に分けられます。
-
位置型パンくずリスト
位置型は、サイト内の階層に基づいて現在位置を表示する形式です。
ホーム ＞ レディース ＞ ワンピース ＞ 商品名
商品がどのカテゴリーやコレクションに属しているのかを示すため、ECサイトで広く使われています。Shopifyストアでは、位置型を基本に設計する方法が適しています。
-
属性型パンくずリスト
属性型は、商品や検索結果の属性を表示する形式です。
ホーム ＞ レディース ＞ ワンピース ＞ 白 ＞ Mサイズ
ブランドや色、サイズ、価格帯など、ユーザーが選択した条件を示します。商品検索や絞り込み機能が充実したストアに適していますが、属性を増やしすぎると表示が長くなるため注意が必要です。
-
パス型パンくずリスト
パス型は、ユーザーが実際に移動した経路を表示する形式です。
検索結果 ＞ セールページ ＞ 商品ページ
同じ商品ページでも、ユーザーの移動経路によって内容が変わります。サイトの固定された階層を示す形式ではないため、Shopifyストアでは位置型や属性型を優先した方が分かりやすいでしょう。
画面上のパンくずリストと構造化データの違い
パンくずリストには、ユーザーが画面上で確認するナビゲーションと、検索エンジンへ階層を伝える構造化データがあります。
画面上のパンくずリストは、ユーザーが現在位置を把握し、上位ページへ移動するための機能です。一方、構造化データは、ページ同士の階層関係を検索エンジンへ伝えるために記述します。
画面上にパンくずリストを表示しても、構造化データが自動的に追加されるとは限りません。反対に、構造化データだけを記述しても、ストア上にナビゲーションが表示されるわけではありません。
ユーザー向けの表示と検索エンジン向けの情報は役割が異なるため、それぞれの設定状況を確認する必要があります。
Shopifyにパンくずリストは標準搭載されている？
ここでは、パンくずリストの対応状況を確認する方法を詳しく解説します。
パンくずリストの有無はテーマによって異なる
Shopifyの管理画面には、全てのテーマへ共通してパンくずリストを追加する設定項目はありません。
一部のテーマにはパンくずリスト機能が用意されており、テーマエディターから表示・非表示やデザインを変更できます。一方、パンくずリストを搭載していないテーマでは、アプリやLiquidコードによる追加が必要です。
また、商品ページには表示されても、ブログ記事や固定ページには表示されないテーマもあります。テーマが対応しているページの種類まで確認しましょう。
使用中のテーマでパンくずリストを確認する方法
まずは、公開中のストアで商品ページやコレクションページ、ブログ記事を開きます。ページ上部や商品名の上に「ホーム ＞ コレクション名 ＞ 商品名」のような表示があるか確認してください。
パンくずリストが見つからない場合は、次の手順でテーマ設定を確認します。
1. Shopify管理画面から「オンラインストア」へ移動する
2. 「テーマを編集する」を開く
3. 商品やコレクションのテンプレートを選択する
4. セクションやテーマ設定から「パンくず」「Breadcrumb」「Breadcrumbs」などの項目を探す
設定項目が見つからない場合は、テーマのマニュアルやデモストアも確認します。Shopifyのナビゲーション機能はテーマによって表示方法が異なるため、対応範囲を個別に調べる必要があります。
コードを確認できる場合は、テーマコード内でbreadcrumbやbreadcrumbsを検索する方法も有効です。
Shopifyにパンくずリストを表示するメリット
パンくずリストは、ユーザーの移動を支援するだけでなく、ストア内のリンク構造を整理する役割も担います。ここでは、Shopifyにパンくずリストを表示する主なメリットを詳しく解説します。
【ユーザー】現在位置を把握しやすくなる
パンくずリストを表示すると、ユーザーは現在のページがストア内のどの階層にあるのかを把握しやすくなります。
検索エンジンやSNS、広告などから商品ページへ直接アクセスした場合、ユーザーはトップページやコレクションページを経由していません。そのため、商品がどのカテゴリーに属しているのか分からない場合があります。
パンくずリストがあれば、初めて訪問したユーザーでもストアの構造を理解しやすくなります。
【ユーザー】上位のコレクションへ移動しやすくなる
商品ページから上位のコレクションへ直接移動できる点もメリットです。
例えば、商品ページに次のパンくずリストが表示されているとします。
ホーム ＞ 家電 ＞ キッチン家電 ＞ コーヒーメーカー
ユーザーが「キッチン家電」をクリックすると、同じカテゴリーに属する商品をまとめて確認できます。商品を比較したい場合や、希望の商品が見つからなかった場合にも、別の商品を探しやすくなります。
【ストア】サイト内の回遊を促進できる
パンくずリストは、商品ページからコレクションページへ戻る内部リンクとしても機能します。
商品ページだけを見て離脱していたユーザーが上位のコレクションへ移動すれば、閲覧ページ数や滞在時間が増える可能性があります。関連する商品を比較しやすくなるため、ユーザーの検討を継続させる導線としても役立ちます。
ただし、パンくずリストを設置するだけで回遊率が必ず改善するわけではありません。コレクションの分類やリンク先の品ぞろえも合わせて見直す必要があります。
【ストア】検索エンジンへサイト構造を伝えやすくなる
パンくずリストは、商品ページと上位のコレクションページを内部リンクで結びます。
商品やコレクション、ブログ記事などの関係が整理されるため、検索エンジンがストアの階層構造を理解する助けになります。ユーザー向けのパンくずリストに加えて構造化データも設定すれば、ページの位置をより明確に伝えられます。
ただし、パンくずリストの設置だけで検索順位が上がるとは限りません。コンテンツの品質、商品情報、サイトの表示速度など、他のSEO施策と合わせて取り組むことが重要です。
【ストア】検索結果に階層が表示される可能性がある
構造化データを適切に記述すると、Googleが検索結果のURL部分にパンくず情報を利用する場合があります。
階層が表示されれば、ユーザーは検索結果を見ただけでも、ページがどのカテゴリーに属しているのか判断しやすくなります。
Googleは、パンくずリストの検索表示をデスクトップ検索で提供しています。ただし、構造化データを設定しても、検索結果への表示が保証されるわけではありません。
【ストア】購入につながる導線を増やせる
パンくずリストから上位コレクションへ戻れると、ユーザーは同じカテゴリーの商品を比較しやすくなります。
最初に閲覧した商品が条件に合わなくても、別の商品を探す導線があれば、ストアから離脱せずに検討を続ける可能性があります。
パンくずリスト自体が直接購入を生む機能ではありませんが、商品を探しやすい環境を整えることで、購入機会の損失を抑えられます。
Shopifyにパンくずリストを表示するデメリット・注意点
パンくずリストは便利な機能ですが、表示方法や階層設計が適切でなければ、かえって操作性を下げる場合があります。ここでは、導入前に確認したいデメリットや注意点を詳しく解説します。
【ユーザー】スマートフォンでは表示が長くなりやすい
階層が深いストアや商品名が長いストアでは、パンくずリストが画面内に収まらない場合があります。
複数行に折り返されると、商品名や商品画像が下へ押し下げられ、ページ上部が見にくくなります。特にスマートフォンでは表示領域が狂いため、階層数や文字数への配慮が必要です。
長い項目を三点リーダーで省略する方法や、横スクロールを採用する方法などを検討しましょう。
【ユーザー】リンクが密集すると誤タップが起こりやすい
パンくずリストの文字やリンク間隔が小さいと、スマートフォンで誤タップが起こりやすくなります。
意図しないページへ移動すると、ユーザーは再び商品ページへ戻らなければなりません。操作の負担が増え、離脱につながる可能性もあります。
リンク同士の間隔を確保し、タップしやすい文字サイズへ調整することが重要です。
【ユーザー】誤った階層はユーザーを混乱させる
パンくずリストと実際のメニュー構造が一致していない場合、ユーザーは商品がどのカテゴリーに属するのか判断しにくくなります。
例えば、グローバルメニューでは「ファッション ＞ メンズ ＞ アウター」と分類しているにもかかわらず、パンくずリストでは「セール ＞ 冬物」と表示すると、ストアの構造が分かりにくくなります。
メニューやコレクション、パンくずリストで共通した分類ルールを定めましょう。
【ストア】複数のコレクションに属する商品は設計が必要
Shopifyでは、一つの商品を複数のコレクションへ登録できます。
例えば、同じ商品が次のコレクションに属している場合があります。
-
メンズ
-
ジャケット
-
新商品
-
冬物
-
セール
パンくずリストへ全てのコレクションを表示すると、階層が長くなり、親子関係も不明確です。商品ごとにメインとなるコレクションを一つ決めるか、メタフィールドでパンくず用のコレクションを指定する必要があります。
【ストア】アプリでは料金や機能の確認が必要
アプリを使う場合は、月額料金や対応ページを確認します。
商品ページには対応していても、ブログ記事や固定ページには表示されないアプリもあります。構造化データの出力、スマートフォン表示、日本語サポートなどもアプリによって異なります。
テーマやSEOアプリが既にパンくずリストの構造化データを出力している場合、機能が重複する可能性もあります。
【ストア】コード編集には保守作業が発生する
Liquidコードを使う方法は自由度が高い一方で、テーマ更新時の確認が欠かせません。
Shopifyは、テーマの更新と互換性がないコード変更について、更新後のテーマから削除される場合があると案内しています。また、コード編集前にはテーマを複製し、バックアップを作成する方法を推奨しています。
テーマを更新した後は、パンくずリストの表示やリンク先が維持されているか確認しましょう。
Shopifyでパンくずリストを表示する方法
Shopifyにパンくずリストを表示する方法は、テーマの標準機能、アプリ、Liquidコードの3種類です。ここでは、それぞれの特徴や設定手順を詳しく解説します。
| 方法 | 導入難易度 | 費用 | カスタマイズ性 | 保守の負担 |
| テーマの標準機能 | 低い | 原則不要 | テーマによる | 小さい |
| Shopifyアプリ | 低い | 無料または月額 | 中程度 | 比較的小さい |
| Liquidコード | 高い | 自社対応なら不要 | 高い | 大きい |
パンくずリスト対応テーマを利用する
使用中のテーマにパンくずリスト機能が備わっている場合は、テーマエディターから設定します。
設定手順は次のとおりです。
1. Shopify管理画面から「オンラインストア」を開く
2. 「テーマ」を選択する
3. 使用中のテーマにある「カスタマイズ」をクリックする
4. 商品やコレクションのテンプレートを選択する
5. パンくずリストのセクションや設定項目を探す
6. 表示位置やデザインを調整する
7. PCとスマートフォンで表示を確認する
テーマによっては、「Breadcrumbs」ではなく、商品情報やコレクションバナー内の設定として用意されている場合があります。
Shopifyアプリを利用する
テーマにパンくずリスト機能がない場合は、Shopifyアプリを利用する方法があります。
設定手順は次のとおりです。
1. Shopify App Storeでパンくずリストに対応したアプリを探す
2. 料金や対応ページを確認する
3. アプリをインストールする
4. アプリの管理画面で階層やデザインを設定する
5. 必要に応じてテーマエディターへアプリブロックを追加する
6. 表示内容とリンク先を確認する
設定方法はアプリによって異なるため、開発元のマニュアルも確認してください。おすすめのアプリは後述します。
Liquidコードを追加する
テーマのコードへパンくずリストを追加すれば、表示するページや階層を細かく調整できます。
パンくずリスト用のスニペットを作成し、表示したいテンプレートやtheme.liquidから呼び出す方法が一般的です。
ここでは、無料テーマ「Dawn」にパンくずリストを追加する方法を詳しく紹介します。
ただし、テーマのバージョンやカスタマイズ状況によって、ファイル構成や適切なコードの挿入箇所は異なります。本記事で紹介する手順が、全てのストアにそのまま適用できるとは限りません。作業前にテーマを複製し、プレビュー環境で表示や動作を確認した上で反映してください。
手順1．テーマを複製する
コードを編集する前に、使用中のテーマを複製します。
手順は次のとおりです。
1. Shopify管理画面から「オンラインストア」を開く
2. 使用中のテーマにある「…」をクリックする
3. 「複製」を選択する
手順2．パンくずリスト用のスニペットを作成する
複製したテーマのメニューから「コードを編集」を選択します。
「Snippets」フォルダーに新しいファイルを追加し、「breadcrumbs.liquid」のような名前を設定します。
手順3．パンくずリストのコードを記述する
作成したファイルにShopify公式が提供しているパンくずリストのコードを貼り付けて保存します。
手順4．スタイルを追加する
assets/base.css（またはテーマのメインCSSファイル）に次を追記します。
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0.8rem 0;
gap: 0.4rem;
font-size: 0.85rem;
}
.breadcrumbs li:not(:last-child)::after {
content: '›';
margin-left: 0.4rem;
color: #999;
}
.breadcrumbs a {
color: inherit;
text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
color: #666;
}
手順5．テンプレートにスニペットを埋め込む
パンくずリストを表示したいページのセクションファイル（例：sections/main-product.liquid、sections/main-collection.liquid など）の適切な位置に次のコードを追加します。
{% render 'breadcrumbs' %}
ヘッダーの直下や{{ content_for_layout }}の直前など、表示したい位置へ記述します。
手順6．動作確認・公開
複製したテーマでプレビューし、各ページ（商品、コレクション、ブログ記事、固定ページ）でパンくずリストが正しく表示されることを確認してから、本番テーマに同じ変更を適用してください。
メタフィールドで商品の親コレクションを指定する
商品が複数のコレクションに属している場合、商品メタフィールドにパンくず用のコレクションを登録する方法が適しています。
Shopifyのメタフィールドにはコレクション参照型があり、既存のコレクションを値として指定できます。
手順1．メタフィールドを作成する
まず始めに、メタフィールドを作成します。手順は次のとおりです。
1. Shopify管理画面から「設定」を開く
2. 「メタフィールドとメタオブジェクト」を選択する
3. 「商品」を開く
4. 「定義を追加」をクリックする
5. 名前に「パンくず用コレクション」などを入力する
6. ネームスペースとキーをcustom.breadcrumb_collectionに設定する
7. タイプから「コレクション」を選択する
8. 保存する
手順2．商品ごとにコレクションを指定する
商品管理から対象商品を開き、ページ下部のメタフィールドセクションでパンくずリストに表示したいコレクションを選択して保存します。
手順3. テーマのコードに反映する
テーマのパンくずリスト該当箇所に、以下の記述でメタフィールドのコレクション情報を取得し、コレクション名とURLを表示するよう編集します。編集対象のファイルやコードの構造はテーマによって異なります。
Shopifyのパンくずリストにおすすめのアプリ
Shopify App Storeには、パンくずリストの表示や構造化データに対応したアプリがあります。ここでは、アプリ選定後に掲載する情報の項目を紹介します。
Schema & Breadcrumbs by Bogdan
Schema & Breadcrumbs by Bogdanは、Shopifyストアにパンくずリストと構造化データを追加できるアプリです。ナビゲーション構造を基に、訪問者の経路を考慮したパンくずリストを自動生成できます。
階層や表示項目は自由に編集でき、デザイン調整や不要項目の非表示にも対応しています。複数階層にも対応しており、商品数が多いストアでも現在地を把握しやすくなります。
さらに、商品やレビュー、価格などの情報をLD+JSON形式で追加でき、レビューアプリとも連携可能です。リッチリザルト表示を狙ったSEO対策にも活用できます。
料金は無料プランの他、月額4.99ドルの「Standard」と6.99ドルの「Advanced」があり、有料プランは3日間の無料体験が利用可能です。
PH Breadcrumbs
PH Breadcrumbsは、Shopifyストアのメニュー構造を基にパンくずリストとJSON-LDの構造化データを追加できるアプリです。商品ページにも対応し、訪問者がページの階層を把握しやすくなります。
最大5階層まで対応し、HTMLで生成される点が特徴です。デザインや表示方法もカスタマイズ可能で、ストアに合わせて調整できます。
また、パンくずリストの構造化データを生成し、検索エンジンに階層構造を伝えられます。設定は一度で全体に適用され、導入も簡単です。
料金は月額4.98ドルで、30日間の無料体験が利用可能です。
Breadcrumbs & Categories
Breadcrumbs & Categoriesは、実際のカテゴリーツリーを基に、正確なパンくずリストとサブカテゴリーを生成できるShopifyアプリです。一般的な「ホーム＞コレクション＞商品」だけでなく、ストアの商品分類に沿った階層を表示できます。
複数のコレクションに属する商品にも対応し、訪問者がたどった経路に合わせて適切なパンくずリストを表示できます。並べ替えや無制限の階層、一括移動、高速検索など、カテゴリー管理に役立つ機能も備えています。
カテゴリーツリーはShopifyのメニューから自動作成でき、必要に応じて手動で調整可能です。JSON-LD形式のパンくずリスト構造化データやサブカテゴリー表示、バックアップ、データのインポート・エクスポートにも対応しています。
料金は月額4.99ドルの「ESSENTIAL」で、3日間の無料体験が利用可能です。
Breadcrumbs Uncomplicated
Breadcrumbs Uncomplicatedは、コレクションページや商品ページにパンくずリストを追加できるShopifyアプリです。既存のShopifyメニューを基に、カテゴリー階層を反映したパンくずリストを表示できます。
検索エンジンや広告から商品ページへ直接訪れたユーザーにも現在地を分かりやすく示し、関連カテゴリーや商品への回遊を促せます。JSON-LD形式の構造化データにも対応しており、検索エンジンにストアの階層構造を伝えるSEO対策にも活用できます。
Online Store 2.0のテーマではドラッグ＆ドロップで設置でき、旧テーマではコードを埋め込んで導入可能です。多言語ストアや長いURL、メタフィールドを利用した短縮URLにも対応しています。
料金は月額5ドルの「Basic」で、10日間の無料体験が利用可能です。
シンプルパンくずリスト｜お手軽 Breadcrumbs
シンプルパンくずリスト｜お手軽 Breadcrumbsは、Shopifyストアにパンくずリストを追加できるアプリです。専門知識がなくても、テーマエディターから簡単に導入できます。
区切り文字やホームリンクのテキスト、表示位置、文字サイズ、色などを細かくカスタマイズできる点が特徴です。ストアのデザインに合わせて、パンくずリストの見た目を調整できます。
また、スマートフォンとデスクトップで表示を切り替えられるため、端末の画面サイズに応じた見やすいパンくずリストを設置できます。
料金は月額3.99ドルの「Basic Plan」で、7日間の無料体験が利用可能です。
Shopify配送注文アプリ
月額利用料無料
最短3クリックで送り状を発行
この記事をシェア
