【Shopify】アプリ不要！コレクションページに無限スクロールを実装

ページネーションの代わりに「続きを表示」ボタンを設置して、コレクションページに無限スクロール機能を実装します。

Shopifyのコレクションページは、1ページあたりの商品出力上限が50商品という制限があり、それ以上を出力させたい場合は非推奨なテクニックを使う必要があります。

無限スクロール機能を搭載すれば、1ページ内に全てのコレクションが出力できますし、分割して商品リストを読み込むため、ページの読み込み速度にも影響がでません。
また、ページ滞在時間が増えるので離脱率が下がるというメリットも期待できます。

無限スクロールを搭載したテーマはいくつかありますし、実装するアプリもあります。一般的なページネーション機能でも問題ないショップも多いことでしょう。

ここで紹介するカスタマイズ方法なら、アプリやjQuery、JSライブラリに依存せず、テーマカスタマイズのみで無限スクロールを実装することが可能になります。