# 全商品表示方法について **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [May 7, 2019, 6:46pm UTC](https://community.shopify.com/t/topic/3425 "2019-05-07T18:46:04Z")\ **Posts on this page:** 9\ **Page:** 1 ## AI-generated summary Shopifyのコレクションページで、約500点の商品をページ送りなしで1ページにすべて表示できるかが主題です。初期回答では、Liquidの`collection.products`を`offset`と`limit`で分割ループすれば50件超の表示が可能かもしれない、という案が示されました。 その後の検証で、この方法は不可と訂正されています。Shopifyの仕様上、同一ページで1つの`collection`オブジェクトから取得できる商品数は50件までで、`for`ループを分けても上限は超えられません。 補足として、レイジーロードは画像などの読み込みをスクロール位置に応じて遅らせ、体感速度を改善する手法だと説明されました。ただし、これは表示速度対策であり、50件上限の突破にはつながりません。 さらに`collection.next_product`/`previous_product`も検証されましたが、コレクションページでは`nil`となり使えず、商品ページ専用の挙動でした。結論として、この問題はテーマ編集だけでは解決困難で、外部DBやJS、API活用、またはコレクション分割などの代替策が必要なままです。
**Author:** ![Shopifylion](https://avatars.discourse-cdn.com/v4/letter/s/ea666f/32.png) [@Shopifylion](https://community.shopify.com/u/Shopifylion)\ **Post date:** [May 7, 2019, 6:46pm UTC](https://community.shopify.com/t/topic/3425/1 "2019-05-07T18:46:04Z")
【質問】全商品を表示させる方法をお伺いします。 コレクションの中に、商品のカテゴリーをいくつか作っているのですが、その一項目に「全商品を表示」という項目を作りたいのですが、どうしても全商品を表示させることができません。 ショップページを見るとどうしても次のページを見るように矢印をクリックしなければならないのですが、そうではなく１ページに全商品（500品ほど）を表示させる方法はありますでしょうか？下にスクロールしていけば次々と商品が見えるようにしたいという意味です。 当方、ウェブサイト知識は簡単なHTML程度を理解している程度ですので、なるだけわかりやすくおしえていただければ助かります。どうぞよろしくお願いいたします。 ---
**Author:** ![WEBUILD](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/webuild/32/271922_2.png) [@WEBUILD](https://community.shopify.com/u/WEBUILD)\ **Post date:** [November 11, 2019, 8:18am UTC](https://community.shopify.com/t/topic/3425/2 "2019-11-11T08:18:03Z")
かなり古い投稿ですので、すでに解決しておられるかもしれませんが。 コミュニティの活性化のためにも回答させていただきます。 HTMLのみの知識ということですと実装はかなりハードルが高そうですが・・・ 通常collectionに含まれるプロダクトは50商品が表示限界になっているようです。 ただしこれは一回のループ内で・・・という縛りっぽいです。 当方がまだ構築中で５０にも商品数が届いていなにので まだ確実なテストできておりませんが。 collection.products のループを数カ所作った結果、同じプロダクトの情報ではありますが５０を超える プロダクトの出力が可能でした。これが実際、すべて異なるプロダクトの数が５０個までという謎仕様出ない限り 複数個のcollection.products のループを設置で実現できるかもしれません。 ```auto {%- assign maxpage = collection.all_products_count | divided_by: 10 | ceil -%} {% for i in (0..maxpage) %} {%- assign offset = i | times: 10 -%} {%- assign offset_limit = i | plus: 1 | times: 10 | minus: 1 -%} {% for product in collection.products offset: offset limit: 10 %} {% endfor %} {% endfor %} ``` こんな感じのコードですかね～ これは１０件ずつループで回しています。 たぶんソートも効くはずです。 ただこのままもし本当に５００商品とか表示すると重くて仕方がないと思うので 最初の１０以降はすべてレイジーロードにするとかするなどしてパフォーマンスを考慮しないといけないとおもいます。 ---
**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\ **Post date:** [November 12, 2019, 9:01am UTC](https://community.shopify.com/t/topic/3425/3 "2019-11-12T09:01:29Z")
コミュニティ活性のためのご回答ありがとうございます！ 参考になりました。 僕もoffsetを使ったこの方法がよいと思います。 レイジーロードとは、Twitterなどのスクロールのように、次にスクロールした段階で、続きのoffsetからデータを描画するということですよね？ ---
**Author:** ![WEBUILD](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/webuild/32/271922_2.png) [@WEBUILD](https://community.shopify.com/u/WEBUILD)\ **Post date:** [November 12, 2019, 9:42am UTC](https://community.shopify.com/t/topic/3425/4 "2019-11-12T09:42:52Z")
Twitterのフロント部分はReactを使ったSPAですね。最初投稿は3件くらいしか生成されていませんが、スクロールするとDOMツリーがどんどん生成されていくタイプです。 レイジーロードはもう少し単純なもので、HTTPリクエストが発生しそうなものをすべて一旦別の要素で置き換えます。 例えば 最も重たいのは画像ですよね。 通常 ![]() となっているはずですが ![]() のようにして、いったんリクエストされない形にしておきます。 でスクロールしていって当該の要素がウィンドウに近づいたら data-srcの中身を srcに移し替えて画像をリクエストします。 こうすることで一気に大量のリクエストが送られずに、徐々に表示されるため、体感スピードが大幅に向上します。 自身で書かなくても、class を当てるだけでいい ライブラリもいくつか存在します。 liquidはバックエンド言語だと思うので、APIがないとこういったリアルタイムな通信はできないんじゃないでしょうか。 なのでテーマ編集のみで実装するのであれば、ファーストビュー分を除く全てのDOMを上記のようにlazy対応しておいて JSでスクロール監視→src書き換え とするしかないかな～と思います。 ---
**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\ **Post date:** [November 13, 2019, 2:15am UTC](https://community.shopify.com/t/topic/3425/5 "2019-11-13T02:15:05Z")
なるほど。ご回答ありがとうございます。 > liquidはバックエンド言語だと思うので、APIがないとこういったリアルタイムな通信はできないんじゃないでしょうか。 そうですね、liquidのデータは最初の描画時に全てデータを保持してるはずなので、リアルタイムで追加データを参照することはできないと思います。 ---
**Author:** ![WEBUILD](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/webuild/32/271922_2.png) [@WEBUILD](https://community.shopify.com/u/WEBUILD)\ **Post date:** [January 27, 2020, 2:36am UTC](https://community.shopify.com/t/topic/3425/6 "2020-01-27T02:36:04Z")
こちらに回答させていただいた 1ページに大量の商品を表示させる方法ですが、 実際には ５０商品以上出力されないことが確認できました。 なのでこちらの回答は使えないコードなので参考になさらないようにお願いいたします。 Shopifyの仕様で、同一ページ内に、１つのcollectionオブジェクトから取得可能なproductは５０まででした。 これは一つのforループという縛りではなく、forを分割したり、別の変数にオブジェクトを定義しなおして新たにforループを作成しても同じです。 １ページに50以上productを表示可能な方法は異なるcollectionオブジェクト同士の場合のみでした。 ---
**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\ **Post date:** [January 27, 2020, 4:57am UTC](https://community.shopify.com/t/topic/3425/7 "2020-01-27T04:57:24Z")
フォローアップありがとうございます。 こちらにも書いてありますね。 [https://help.shopify.com/en/themes/liquid/objects/collection](https://help.shopify.com/en/themes/liquid/objects/collection) なお、このドキュメントに collection.next\_product collection.previous\_product というオブジェクトがありますが、これでiterationした場合はどうでしょうか？ nil になるまでループし続けたら、50件以上表示できたりしないですかね？ ---
**Author:** ![WEBUILD](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/webuild/32/271922_2.png) [@WEBUILD](https://community.shopify.com/u/WEBUILD)\ **Post date:** [January 27, 2020, 6:34am UTC](https://community.shopify.com/t/topic/3425/8 "2020-01-27T06:34:28Z")
ご返信ありがとうございます。 たしかに書いてありました(汗) どう曲解したのか、当時の私は一回のforループの上限が50という思い込みをしたようです＞＜ テストしたときは２０商品ほどしか登録できていなかったため、同じプロダクトを何度もループで出力した場合、５０以上出力できるのでそれで可能だと勘違いしてしまいました。。。 collection.next\_product, collection.previous\_product については早速テストさせていただきました。 結論から言いますと、コレクションページでは使用できず、いずれのコレクションでも必ずNilが返りました。 Productページであれば機能しました。 そのProductが所属するコレクション内の前後商品を取得する機能のようです。 Productページでたくさん商品を表示したい場合は有りかもしれません。 が結構それはレアケースかな・・・ 私はコレクションのタグフィルターをANDではなくORで使用したかったので、 自前で擬似Collectionオブジェクトを作成しようと試行錯誤していたのですが、どうしても５０商品以上出力できませんでした。。。 Paginateオブジェクトも純粋なcollectionオブジェクトしか受け取らないしで結構しばりがきついですね。。。 海外版を見てもやはりできないらしく、Shopifyの商品をDBをローカルに移してJSで表示する方法取られている方がいました。 かなり手間がかかるのでどうかなぁって感じですが。。。 APIも考慮しましたが、まだサラッと読んだだけですが２５０アイテムが上限？っぽいのでどのみち弊社のボリュームでは使用できず、 今はとりあえず諦めてコレクションを大量生成して商品タイプにキーワードを含ませて検索させてるようにしました。。。根本的な解決にはなりませんが。。。 ---
**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\ **Post date:** [January 27, 2020, 1:47pm UTC](https://community.shopify.com/t/topic/3425/9 "2020-01-27T13:47:53Z")
なるほど。検証ありがとうございます。大変助かります。