# 商品詳細ページのパンくずリストについて **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [December 12, 2023, 12:44pm UTC](https://community.shopify.com/t/topic/276659 "2023-12-12T12:44:15Z")\ **Posts on this page:** 6\ **Page:** 1 ## AI-generated summary 商品詳細ページのパンくずリストで、複数のコレクション名を表示させたいという質問。 **現状の問題:** - 現在は「Home › Catalog › コレクション名 › 商品名」と1つのコレクションしか表示されない - 商品が「ぬいぐるみ、ブランド名、キャラクター名」など複数のコレクションに属している場合、全てを表示したい **解決方法:** - `{% if product.collections[0] %}` を `{% for collection in product.collections %}` ループに書き換える - Shopifyコミュニティの[ベストソリューション](https://community.shopify.com/c/shopify-design/display-on-product-page-all-collections-a-product-is-in-in-an/td-p/1752419)を参考に実装 - `collection.title`、`collection.handle`、`collection.url` などを使用してループ内で各コレクション情報を出力 **結果:** 質問者は提供された情報を元に記述を修正し、無事に解決。 **追加情報:** コーディング不要の代替案として、UnReact社の「シンプルパンくずリスト|お手軽 Breadcrumbs」アプリも紹介されている(ただし3階層まで対応)。
**Author:** ![fy3](https://avatars.discourse-cdn.com/v4/letter/f/278dde/32.png) [@fy3](https://community.shopify.com/u/fy3)\ **Post date:** [December 12, 2023, 12:44pm UTC](https://community.shopify.com/t/topic/276659/1 "2023-12-12T12:44:15Z")
商品詳細ページのパンくずリストを下記のように表示させたいです。 「Home › Catalog › **コレクション名 › コレクション名 › コレクション名** › 商品名」 現在は、「Home › Catalog › **コレクション名** › 商品名」のようにコレクション名が一つしか表示されません。 私たちのショップの商品は、「ぬいぐるみ、ブランド名、キャラクター名」など複数のコレクションに該当するものが多く、一つの商品に２つ以上のコレクションが割り当てられています。 これら全てのコレクションをパンくずに表示したいです。 わかる方がいらっしゃいましたらご教示いただければ嬉しいです。 よろしくお願いいます。 \*現在導入しているスニペットのコード {% unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ %} Home {% if template contains 'page' %} ›{{ page.title }} {% elsif template contains 'product' %} › {{ 'Catalog' | link\_to: '/collections' }} {% if product.collections[0] %} › {{ product.collections[0].title | link\_to: product.collections[0].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 %} ---
**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\ **Post date:** [December 18, 2023, 4:32am UTC](https://community.shopify.com/t/topic/276659/2 "2023-12-18T04:32:16Z")
以下の if を for を使ってすべて出力する形に書き換えれば良いかなと思います。 ```markup {% if product.collections[0] %} ``` [参考] [https://shopify.dev/docs/api/liquid/tags/for](https://shopify.dev/docs/api/liquid/tags/for) [https://shopify.dev/docs/api/liquid/objects/product#product-collections](https://shopify.dev/docs/api/liquid/objects/product#product-collections) [https://shopify.dev/docs/api/liquid/objects/collection](https://shopify.dev/docs/api/liquid/objects/collection) ---
**Author:** ![fy3](https://avatars.discourse-cdn.com/v4/letter/f/278dde/32.png) [@fy3](https://community.shopify.com/u/fy3)\ **Post date:** [December 19, 2023, 6:03am UTC](https://community.shopify.com/t/topic/276659/3 "2023-12-19T06:03:00Z")
お返事ありがとうございます。 下記のように書き換えましたが、うまくいきませんでした。 {% if product.collections[0] %} ↓ {% for product.collections[0] %} 参考URLもご丁寧にありがとうございます。 ただ私の理解が乏しく、、よくわかりませんでした。 もう少し勉強して頑張ってみます。。 ---
**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\ **Post date:** [December 19, 2023, 3:26pm UTC](https://community.shopify.com/t/topic/276659/4 "2023-12-19T15:26:49Z")
基本的な形としましては以下ページのベストソリューション内のコードが該当します。 [https://community.shopify.com/topic/1752419](https://community.shopify.com/topic/1752419) あとは上記と、質問時に記載された該当箇所の記述を合わせてみると良いかなと思います。 **■イメージを掴む方法** [https://shopify.dev/docs/api/liquid/objects/collection](https://shopify.dev/docs/api/liquid/objects/collection) 一例ですが上記を参考にfor文の中を以下のように書くとなんとなくイメージといいますかパターンを掴めるかなと思います。 ```markup {% for collection in product.collections %} コレクションのタイトル: {{ collection.title }} コレクションのハンドル: {{ collection.handle }} コレクションのURL: {{ collection.url }} {% endfor %} ``` 上記の title や handle を[前述のドキュメント](https://shopify.dev/docs/api/liquid/objects/collection)を参考にいろいろ書き換えてみてください。 そうすれば目的の情報を出力できるようになると思います。 ---
**Author:** ![fy3](https://avatars.discourse-cdn.com/v4/letter/f/278dde/32.png) [@fy3](https://community.shopify.com/u/fy3)\ **Post date:** [December 20, 2023, 12:41pm UTC](https://community.shopify.com/t/topic/276659/5 "2023-12-20T12:41:17Z")
教えていただいた情報を元に記述した結果、無事に解決しました。 丁寧に教えていただいてありがとうございました。 大変助かりました！ ---
**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:07am UTC](https://community.shopify.com/t/topic/276659/6 "2024-07-31T02:07:18Z")
はじめまして 株式会社UnReactの西川と申します。 既に解決済みではございますが、今後このスレッドをご覧になる方々に向けて、弊社のアプリ「[シンプルパンくずリスト｜お手軽 Breadcrumbs](https://apps.shopify.com/ur-smart-breadcrumbs?locale=ja)」も有効な解決策の一つとしてご紹介させていただきます。 弊社の Shopify アプリで恐縮ですが、 「[シンプルパンくずリスト｜お手軽 Breadcrumbs](https://apps.shopify.com/ur-smart-breadcrumbs?locale=ja)」を使用すれば、 「Home › Catalog › コレクション名 › コレクション名 › コレクション名 › 商品名」のパンくずを作成することはできませんが、 「Home › Catalog › コレクション名 › 商品名」３階層のパンくずリストをコーディング無しで作成することは可能です。 ![Nishi_0-1722391601187.webp](https://canada1.discourse-cdn.com/shopifyforum/original/2X/0/0de18aed14fe15fb75772fb95132bd9caf80daae.webp) ![Nishi_1-1722391601133.webp](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/7/87a6b4f40201d89a3fb05d4e9e23c3bed32c2b7b.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)