1
/
の
1
【Shopify】アプリ不要!コレクションページに無限スクロールを実装
【Shopify】アプリ不要!コレクションページに無限スクロールを実装
ページネーションの代わりに「続きを表示」ボタンを設置して、コレクションページに無限スクロール機能を実装します。
Shopifyのコレクションページは、1ページあたりの商品出力上限が50商品という制限があり、それ以上を出力させたい場合は非推奨なテクニックを使う必要があります。
無限スクロール機能を搭載すれば、1ページ内に全てのコレクションが出力できますし、分割して商品リストを読み込むため、ページの読み込み速度にも影響がでません。
また、ページ滞在時間が増えるので離脱率が下がるというメリットも期待できます。
無限スクロールを搭載したテーマはいくつかありますし、実装するアプリもあります。一般的なページネーション機能でも問題ないショップも多いことでしょう。
ここで紹介するカスタマイズ方法なら、アプリやjQuery、JSライブラリに依存せず、テーマカスタマイズのみで無限スクロールを実装することが可能になります。
難易度:3
必要なスキル
- Liquid
- HTML
- Javascript
カスタマイズ代行料金
通常価格
¥33,000
通常価格
セール価格
¥33,000
単価
/
あたり
/税込
実装方法は無料で閲覧できますが、実装が難しい方はカスタマイズ代行を承ります。
受取状況を読み込めませんでした
![【Shopify】アプリ不要!コレクションページに無限スクロールを実装](http://10ca.net/cdn/shop/files/tclt-004.png?v=1718678118&width=1445)