# 商品詳細ページのパンくずリストについて

**URL:** <https://community.shopify.com/t/topic/128868>\
**Category:** 技術的なQ＆A\
**Created:** [June 17, 2022, 8:18am UTC](https://community.shopify.com/t/topic/128868 "2022-06-17T08:18:02Z")\
**Posts on this page:** 6\
**Page:** 1

## AI-generated summary

商品詳細ページのパンくずリストで「Home→コレクション一覧→コレクション名→商品名」という階層表示を実現したいが、現状は「Home→商品名」のみ表示される問題について議論されています。

**原因の解説:**
- Shopifyでは商品ページへのアクセス方法が2通りあり、コレクションページ経由でアクセスした場合のみコレクション名が表示される仕様
- `collection.url`が存在する場合のみコレクション情報が反映される

**提案された解決策:**
1. コードAとB: `product.collections[0]`を使用して所属コレクションを取得する方法が提示されたが、複数コレクション所属時の順序が不規則という注意点あり
2. 商品詳細ページで`{% render 'breadcrumbs' %}`を使用する方法で、質問者は「コレクション一覧→コレクション名」の表示に成功

**その他:**
- コーディング不要でパンくずリストを実装できるShopifyアプリ「シンプルパンくずリスト」も紹介された
- 別のユーザーも同様の問題に直面しており、詳細な設定方法について追加質問中

<div class="post-metadata">

**Author:** ![ponuco](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@ponuco](https://community.shopify.com/u/ponuco)\
**Post date:** [June 17, 2022, 8:18am UTC](https://community.shopify.com/t/topic/128868/1 "2022-06-17T08:18:02Z")

</div>

[https://ikdlog.com/breadcrumbs/](https://ikdlog.com/breadcrumbs/)

上記のサイトを参考にパンくずリストを作ってみましたが、商品詳細ページだけうまくパンくずリストが反映されません。

現在は「Home→商品名」と表示されている状態なのですが、

「Home→カテゴリー一覧→カテゴリー１→商品名」のように表示されるようにしたいです。

どなたかご教授いただけないでしょうか？

---

<div class="post-metadata">

**Author:** ![st\_mh](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@st\_mh](https://community.shopify.com/u/st_mh)\
**Post date:** [June 21, 2022, 7:40am UTC](https://community.shopify.com/t/topic/128868/2 "2022-06-21T07:40:48Z")

</div>

まず、「カテゴリー」というのはshopifyの正式な名称だと「コレクション」なので、表記をそちらに変えながら説明します。

該当のコードは以下の部分ですね。

```markup
{% elsif template contains 'product' %}
  {% if collection.url %}
    ›
    {{ collection.title | link_to: collection.url }}
  {% endif %}
  ›
  {{ product.title }}

```

これは以下を意味します。

- （1行目）productテンプレートの時
- （2行目） **URLにコレクションが含まれていれば**
- （4行目）そのコレクション名、リンクを追加する

また、shopifyで商品ページに到達するには、2通りの方法があります。

1. https://\*\*\*.com/products/00000
2. https://\*\*\*.com/\*\*collections/コレクション名/\*\*products/00000

（2へは、コレクションページから商品にリンクすると到達可能です）

つまり、現状ではパンクズにコレクション名（カテゴリー1）を追加されるのは、2のURLでアクセスした時に限られるのです。

ーー

そして対策法についてです。

まず「コレクション一覧（カテゴリー一覧）」は、そのまま記述を加えるだけで可能です。表示名は自由に変更してください。

**コードA**

```markup
{% elsif template contains 'product' %}
  ›
  {{ 'コレクション一覧' | link_to: '/collections' }}
  {% if collection.url %}
    ›
    {{ collection.title | link_to: collection.url }}
  {% endif %}
  ›
  {{ product.title }}

```

続いて、コレクション名（カテゴリー1）についてですが、該当の商品が複数のコレクションに属しているなど、登録状況が複雑であれば対処が難しくなります。

一旦、登録状況がシンプルと仮定して、コードを作成しました。

product.collectionsを使えば、商品の所属コレクションが配列形式で取得できますので、そちらを活用します。

**コードB**

```markup
{% elsif template contains 'product' %}
  ›
  {{ 'コレクション一覧' | link_to: '/collections' }}
  {% if product.collections[0] %}
    ›
    {{ product.collections[0].title | link_to: product.collections[0].url }}
  {% endif %}
  ›
  {{ product.title }}

```

- URLに差があっても、関係なく所属コレクションが出力されます。
  1. https://\*\*\*.com/products/00000
  2. https://\*\*\*.com/\*\*collections/コレクション名/\*\*products/00000

- コレクションに所属していなければ何も出力されません。
- 所属コレクションが複数存在する場合、最初のコレクション（※）が選ばれます。
  - ※コレクションの順序に関しては、調べた限り規則性が見つかりませんでした。
  - ※コレクションの作成順、登録順、タイトル順とは無関係に、内部で順序が決められるようです。

コードBで問題無さそうであればそのまま活かしてください。

理想と違っていそうならば、妥協案にはなりますが、コードAを活用してください。

---

<div class="post-metadata">

**Author:** ![ponuco](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@ponuco](https://community.shopify.com/u/ponuco)\
**Post date:** [June 21, 2022, 9:28am UTC](https://community.shopify.com/t/topic/128868/3 "2022-06-21T09:28:57Z")

</div>

ご教授いただきありがとうございます！

下記の通りに書き換えて、コレクション一覧→コレクション名→商品詳細に飛んてみたのですが、

何も反映されず、Home→商品名と表示されてしまいます…

コードA、コードBとも試してみましたがダメでした。

コレクションは現在8種類あり、複数のコレクションには属さずに設定しております。

不躾なお願いですが、もし何か原因等わかれば教えていただきたいです。

よろしくお願いいたします。

```markup
{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}

{% endunless %}

```

---

<div class="post-metadata">

**Author:** ![ponuco](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@ponuco](https://community.shopify.com/u/ponuco)\
**Post date:** [June 21, 2022, 10:09am UTC](https://community.shopify.com/t/topic/128868/4 "2022-06-21T10:09:46Z")

</div>

度々すみません！

商品詳細ページだけ下記で呼び起こすように設定したらコレクション一覧→コレクション名が表示されるようになりました！

ありがとうございました。

```markup
{% render 'breadcrumbs' %}

```

---

<div class="post-metadata">

**Author:** ![Nishi\_3](https://avatars.discourse-cdn.com/v4/letter/n/8c91f0/32.png) [@Nishi\_3](https://community.shopify.com/u/Nishi_3)\
**Post date:** [July 31, 2024, 2:05am UTC](https://community.shopify.com/t/topic/128868/5 "2024-07-31T02:05:41Z")

</div>

はじめまして

株式会社UnReactの西川と申します。

既に解決済みではございますが、今後このスレッドをご覧になる方々に向けて、弊社のアプリ「[シンプルパンくずリスト｜お手軽 Breadcrumbs](https://apps.shopify.com/ur-smart-breadcrumbs?locale=ja)」も有効な解決策の一つとしてご紹介させていただきます。

弊社の Shopify アプリで恐縮ですが、 「[シンプルパンくずリスト｜お手軽 Breadcrumbs](https://apps.shopify.com/ur-smart-breadcrumbs?locale=ja)」を使用すれば、

「Home→カテゴリー一覧→カテゴリー１→商品名」のパンくずを作成することはできませんが、

「Home→カテゴリー１→商品名」３階層のパンくずリストをコーディング無しで作成することは可能です。

 ![Nishi_0-1722391059704.webp](https://canada1.discourse-cdn.com/shopifyforum/original/3X/f/b/fb419eec265a49a477f37660aaeec1c06fb8fd47.webp)

 ![Nishi_1-1722391059688.webp](https://canada1.discourse-cdn.com/shopifyforum/original/4X/8/2/b/82bfd687b78af2748828a45be6aefa8368d6d32f.webp)

パンくずリストをShopifyストアに挿入するだけの、非常に安価なアプリです。

下記、参考情報です。

[シンプルパンくずリスト｜お手軽 Breadcrumbs](https://apps.shopify.com/ur-smart-breadcrumbs?locale=ja)

[Shopify ストアにパンくずリストを実装する方法について徹底解説！](https://unreact.jp/blog/shopify-breadcrumbs)

その他にも 42 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。

[参考アプリ一覧](https://apps.shopify.com/partners/unreact5?locale=ja&page=1)

---

<div class="post-metadata">

**Author:** ![jcco](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@jcco](https://community.shopify.com/u/jcco)\
**Post date:** [November 20, 2024, 5:28am UTC](https://community.shopify.com/t/topic/128868/6 "2024-11-20T05:28:03Z")

</div>

同じような現象で困っておりました。

＞商品詳細ページだけ下記で呼び起こすように設定したらコレクション一覧→コレクション名が表示されるようになりました！

もう少し詳しく設定方法を教えて頂けると助かります。

よろしくお願いします。