# Debutテーマ パンくずリストを表示したい

**URL:** <https://community.shopify.com/t/debut/126284>\
**Category:** Shopify テーマ\
**Created:** [June 6, 2022, 10:22am UTC](https://community.shopify.com/t/debut/126284 "2022-06-06T10:22:27Z")\
**Posts on this page:** 12\
**Page:** 1

## AI-generated summary

Debutテーマでパンくずリストを表示する方法の相談。layout/theme.liquidの{% section 'header' %}直下（約205行）か、sections/header.liquidの<script type="application/ld+json">直前（約257–258行）にコードを挿入する提案。新規構築なら最新テーマ「Dawn」推奨。

実装手順の確定事項:
- snippets/breadcrumb.liquidを作成し、汎用サンプル（page/product/collection/blog/articleを条件分岐）を貼付。
- sections/header.liquidに{% render 'breadcrumb' %}を追加して読込。
- これでブログと商品は階層表示OK。

課題と対応:
- ページで「Home>メニュー項目>ページタイトル」としたい要望。固定の「ページ」見出しは一覧ページがないためリンク不可。
- 「フォルダ名」は実際はメインメニュー項目だったため、page条件の処理を置き換え。linklists.main-menuを走査し、active/child_activeを用いてメニュー階層をパンくず化する方法に変更。
- 「HOME」が二重表示される問題は、手動で出力していた「Home」を削除し、セパレータ（›）＋メニュー項目のみを表示する修正で解消。
- パンくず上部の余白は.nav.breadcrumb等にmargin-topを付与（簡易対応）。

結果: 希望どおりの表示になり解決。コード位置とメニュー連動ロジック、CSS微調整が要点。

<div class="post-metadata">

**Author:** ![Aa16](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aa16](https://community.shopify.com/u/Aa16)\
**Post date:** [June 6, 2022, 10:22am UTC](https://community.shopify.com/t/debut/126284/1 "2022-06-06T10:22:27Z")

</div>

Debut テーマを使っています。

パンくずリストを表示したいです。

こちらのサイトを参考に、

コピペでできるのかな… と期待しています。

([https://hon-dana.org/online-shop/bread-crumbs-shopify/](https://hon-dana.org/online-shop/bread-crumbs-shopify/))

サイト内では、106行目に貼り付けとあります。

Debut テーマで、メインメニューの下にパンくずリストを表示させる場合。

どのようなコードの後に、貼り付けるべきか、教えていただきたいです。

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 7, 2022, 11:11am UTC](https://community.shopify.com/t/debut/126284/2 "2022-06-07T11:11:18Z")

</div>

参考URLのやり方でうまく動くかの確認はしておりませんが、

layout/theme.liquidでしたら、

{% section ‘header’ %}

の下、205行目あたりにコードを挿入されると良いかと思います。

もしくは、

sections/header.liquidの

の上、257, 258行目でも挿入位置としては問題ないように思われます。 なお、今からストア構築をされるのでしたら、 Debutではなく、Shopifyの最新のテーマであるDawnの方をおすすめいたします。 [https://themes.shopify.com/themes/dawn/styles/default?architecture%5B%5D=os2&locale=ja](https://themes.shopify.com/themes/dawn/styles/default?architecture%5B%5D=os2&locale=ja) コード挿入に関しては動作確認などしていないため、うまくいかない可能性がありますので、 あくまで参考まで。 (キュー田辺)

---

<div class="post-metadata">

**Author:** ![Aa16](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aa16](https://community.shopify.com/u/Aa16)\
**Post date:** [June 7, 2022, 12:58pm UTC](https://community.shopify.com/t/debut/126284/3 "2022-06-07T12:58:46Z")

</div>

ありがとうございます。

試してみました。

パンくずリスト、表示はされたのですが．．．

ページやプロダクトは、きれいな階層表示です。

一方で、ブログは階層表示がなく、「ホーム」という表示だけです。

そこで．．．

このような記事を見つけました。

[Shopifyで階層のあるパンくずリストを実装【サンプルコードあり】｜liquid note | 初学者向けShopify情報ブログ (ikdlog.com)](https://ikdlog.com/breadcrumbs/)

記事内では、新しくbreadcrumb.liquidを作るようにあります。

snippetsフォルダ\>新しいsnippetを追加する\>breadcrumb.liquid ファイルを作り、

コードをコピペしました。

しかし、パンくずリストが表示されません。

当方の手順が異なるのでしょうか？

アドバイスいただけると、ありがたいです。

どうぞ、よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 8, 2022, 1:26am UTC](https://community.shopify.com/t/debut/126284/4 "2022-06-08T01:26:16Z")

</div>

返信遅くなりました。

ご記載の参考記事の、breadcrumb.liquid を作るの部分は、

記事内のリンクを拝見するに、「Simple」というテーマを前提にしたお話に見受けられました。

他のテーマでは、breadcrumb.liquid を読み込む必要があるのではないでしょうか？

{% render ‘breadcrumb’ %}

か

{% include ‘breadcrumb’ %}

を、

私の前回の回答に記載した場所に設置してみてはどうでしょうか？

（※ renderで動くのであればrenderを使った方がいいです。[https://shopify.dev/api/liquid/tags/theme-tags#render）](https://shopify.dev/api/liquid/tags/theme-tags#render%EF%BC%89)

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![Aa16](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aa16](https://community.shopify.com/u/Aa16)\
**Post date:** [June 8, 2022, 3:44am UTC](https://community.shopify.com/t/debut/126284/5 "2022-06-08T03:44:26Z")

</div>

ありがとうございます。

ここまでのアドバイスを踏まえ、このように行いました。

備忘録として、残しておきます。

その上で、２点お伺いしたいです。

１）snippetsフォルダ\>新しいsnippetを追加する\>breadcrumb.liquid ファイルを作る

２）下記コードをコピーする

{% unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ %}

Home {% if template contains 'page' %} ›{{ page.title }} {% elsif template contains 'product' %} {% if collection.url %} › {{ collection.title | link\_to: collection.url }} {% endif %} ›{{ product.title }} {% elsif template contains 'collection' and collection.handle %} › {% if current\_tags %} {% capture url %}/collections/{{ collection.handle }}{% endcapture %} {{ collection.title | link\_to: url }} ›{{ current\_tags | join: " + " }} {% else %} {{ collection.title }} {% endif %} {% elsif template == 'blog' %} › {% if current\_tags %} {{ blog.title | link\_to: blog.url }} ›{{ current\_tags | join: " + " }} {% else %} {{ blog.title }} {% endif %} {% elsif template == 'article' %} › {{ blog.title | link\_to: blog.url }} ›{{ article.title }} {% else %} ›{{ page\_title }} {% endif %} {% endunless %}

３）２）に貼り付ける

４）sections\>header.liquid ファイルを開く

５） を探す

６）５）の上に {% render ‘breadcrumb’ %} を貼り付ける。

---

<div class="post-metadata">

**Author:** ![Aa16](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aa16](https://community.shopify.com/u/Aa16)\
**Post date:** [June 8, 2022, 3:50am UTC](https://community.shopify.com/t/debut/126284/6 "2022-06-08T03:50:06Z")

</div>

お伺いしたい２点…

１）階層表示について

ブログ、プロダクトは、きれいな階層表示で満足しています。

気になるのは、ページの表示階層です。

希望は、Home\>フォルダ名\>ページタイトル の表示です。

現在は、フォルダ名を飛ばしています。

ここを解決したいです。

２）パンくずリストが表示される上部に、少し余白を入れたい （可能であれば）

どうぞ、よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 8, 2022, 11:36am UTC](https://community.shopify.com/t/debut/126284/7 "2022-06-08T11:36:33Z")

</div>

> 希望は、Home\>フォルダ名\>ページタイトル の表示です。

ページにフォルダを作成する機能はないように思いますので、

フォルダ名、というのが何を意味するのかがわかっていないのですが、

例えば、

Home \> ページ \> {{ ページタイトル }}  
とされたいのでしたら、

下記を、

```markup
{% if template contains 'page' %}
    ›
    {{ page.title }}

```

下記のようにされてはいかがでしょうか？ (動作確認はしておりません。)

```markup
{% if template contains 'page' %}
    ›
　　　　　　　　ページ
    ›
    {{ page.title }}

```

しかし、この場合、「ページ」に設定できるリンクは存在しません。

ページの一覧ページは存在しないからです。( /pages/ にアクセスしても一覧は表示されません)

> ２）パンくずリストが表示される上部に、少し余白を入れたい （可能であれば）

どのようにCSSを管理されているか分かりませんので、雑なやり方になってしまいますが、(おすすめできる方法でありません。)

````markup

を

```markup

とされれば余白が入るはずです。(動作確認はしていません。)

margin-top:10pxの10pxの部分の数値を大きくすれば余白が大きくなり、小さくすれば余白が小さくなります。

なお、

他にもご要望があり、その形に近づけられたい場合は、

Shopifyの制作を請け負っている会社様にご依頼いただいた方が良いかと思います。

ご参考まで。

(キュー田辺)
````

---

<div class="post-metadata">

**Author:** ![Aa16](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aa16](https://community.shopify.com/u/Aa16)\
**Post date:** [June 9, 2022, 5:10am UTC](https://community.shopify.com/t/debut/126284/8 "2022-06-09T05:10:32Z")

</div>

ありがとうございます。

フォルダ名と認識していたもの…

正式には、メニュー項目でした。

メインメニュー\>メニュー項目\>ページ といった順で

パンくずリストに表示させたい、という要望でした。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 9, 2022, 11:55am UTC](https://community.shopify.com/t/debut/126284/9 "2022-06-09T11:55:18Z")

</div>

メニューとおっしゃられているのは、

Shopify管理画面で設定できるメニューのことでしょうか？

(管理画面 \> オンラインストア \> メニュー)

おそらく合っていると思いますので、それを前提に回答いたします。

元々、使用されていたコードの下記の部分のうち

```markup
{% if template contains 'page' %}
    ›
    {{ page.title }}
  {% elsif template contains 'product' %}

```

```auto
    <span aria-hidden="true">›</span>
    <span>{{ page.title }}</span>

```

を削除し、代わりに、

質問者様が参考にされているサイト様で紹介されている下記のコードを差し込んでみてはいかがでしょうか？

```markup
{% assign menu = linklists.main-menu %}
Home 
{% for link in menu.links %}
    {% if link.active or link.child_active %} > {{ link.title }} {% endif %}
  {% for sub_link in link.links %}
    {% if sub_link.active or sub_link.child_active %}> {{ sub_link.title }} {% endif %}
	{% for sub_sub_link in sub_link.links %}
    {% if sub_sub_link.active %} > {{ sub_sub_link.title }} {% endif %}
	{% endfor %}
  {% endfor %}
{% endfor %}

```

例によって、動作確認はしておりませんので、参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![Aa16](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aa16](https://community.shopify.com/u/Aa16)\
**Post date:** [June 9, 2022, 12:57pm UTC](https://community.shopify.com/t/debut/126284/10 "2022-06-09T12:57:47Z")

</div>

！ ！ ！

ありがとうございます。

希望通りの表示になりました。

最後に一点だけ、お付き合いいただけませんか？

ブログ、プロダクトはきれいに表示されています。

HOME\>階層\>ブログ記事orプロダクト

ページのパンくずリストのみ、次のように表示されます。

HOME HOME \>階層\>ページ

HOME の重複表示は、どこで修正できますか？

申し訳ありませんが、よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 10, 2022, 2:31am UTC](https://community.shopify.com/t/debut/126284/11 "2022-06-10T02:31:09Z")

</div>

挿入いただいたコードを、

```markup
{% assign menu = linklists.main-menu %}
Home 
{% for link in menu.links %}
    {% if link.active or link.child_active %} > {{ link.title }} {% endif %}
  {% for sub_link in link.links %}
    {% if sub_link.active or sub_link.child_active %}> {{ sub_link.title }} {% endif %}
	{% for sub_sub_link in sub_link.links %}
    {% if sub_sub_link.active %} > {{ sub_sub_link.title }} {% endif %}
	{% endfor %}
  {% endfor %}
{% endfor %}

```

下記のようにされてはいかがでしょうか？

```markup
{% assign menu = linklists.main-menu %}
{% for link in menu.links %}
    {% if link.active or link.child_active %}› 
 {{ link.title }} {% endif %}
  {% for sub_link in link.links %}
    {% if sub_link.active or sub_link.child_active %}›{{ sub_link.title }} {% endif %}
	{% for sub_sub_link in sub_link.links %}
    {% if sub_sub_link.active %}›{{ sub_sub_link.title }} {% endif %}
	{% endfor %}
  {% endfor %}
{% endfor %}

```

パンクズの「\>」のHTMLも少し変えてあります。

例によって、動作確認はしておりませんので、ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![Aa16](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aa16](https://community.shopify.com/u/Aa16)\
**Post date:** [June 10, 2022, 4:20am UTC](https://community.shopify.com/t/debut/126284/12 "2022-06-10T04:20:38Z")

</div>

希望通りの表示になりました！

お忙しいところ、

お付き合いいただきありがとうございました。