Shopifyでは利用するテーマによっては様々な機能を使うことができます。この記事ではその中から「無限スクロール」 に焦点をあてて、無限スクロールが利用できるオススメのテーマをご紹介します。
無限スクロールはウェブサイトやアプリ上でコンテンツを表示する際の表示手法の1つです。沢山のコンテンツがある際にページを分けて表示するのではなく、同じページにとどまった状態を維持しつつも次々とコンテンツをロードして表示をします。
無限スクロール(Infinite Scroll)は2006年に発明されて以来、様々なSNSアプリに実装されてきました。ストレスなく次から次へと表示されるコンテンツによって、ユーザーの滞在時間を伸ばす効果があることで有名です。
ShopifyではLiquidの制限などにより、コレクションページで一度に表示される商品カードの数が50以下に制限されることが多いです。しかし、無限スクロールはそれの制限を超えて表示することができるため、お客様が離脱する前により多くの商品を見せることができます。アパレルなど魅力的な商品を多く扱うストアでは、できるだけ多くの商品をお客様に訴求することが売上アップに繋がります。
無限スクロールは大まかに2種類の方式で提供されます。
スクロール位置などに応じて自動的にコンテンツを読み込む方式です。快適である反面、ユーザーが一気にコンテンツを読み込むことができるため、大きな画像データ等を大量に配置している場合は注意が必要になります。
「もっと見る」「Load more」などのボタンを表示しておき、ユーザーがクリックしたタイミングで次のコンテンツをロード/表示する方式です。
無限スクロールが実装されているShopifyテーマは意外と多く、2025年2月現在で111種類ものテーマで無限スクロールをサポートしています。今回はそんなテーマの中から、特に人気の高いテーマを3つ紹介します。
レビュー574件 / 98% positive
Be yoursは2022年にリリースされたとても人気のあるテーマです。コレクションページ設定の「商品グリッド」の設定により、無限スクロールの設定ができます。
「無限」を選択すると、スクロール位置で自動的に商品カードが追加になる自動ロード方式に、「クリックして読み込む」を選択すると手動ロード方式に設定できます。
レビュー 279件 / 95% Positive
Palo Altoもとても人気のあるテーマです。Palo Altoの場合はテーマ設定の「Pagination」から、「Enable infinity scroll」を有効にすることで無限スクロール機能を使うことができます。Be yoursとは異なり、自動ロード方式しか選べませんが、Be yoursにはない機能として「トップに戻るボタン」があります。
このボタンは無限スクロール機能とよくセットで実装されるものです。無限スクロールでコンテンツを読み込んでいると、上の方にスクロールして戻ることが困難になります。お客様が「最初の方に見た商品をもう一回見たいな」と思っても、何度も画面をスワイプしてスクロールしなければなりません。こんなときに「トップに戻るボタン」があれば、少ない手間で戻れてストレスがなくなります。
またPalo Altoではブログ一覧のページも無限スクロールに対応します。ブログに力を入れているストアであれば、Be yoursよりも有力な選択肢になるのではないでしょうか？
レビュー308件 / 90% Positive
最後に紹介するのはFlowです。
こちらも最初に紹介したBe yoursと同様にコレクションページの設定で無限スクロールを有効にできます。
「無限スクロール」を選択すると自動ロード方式で、「さらに読み込む」を選択すると手動ロード方式で機能を使うことができます。
もしもこれらのテーマへの切り替えができない場合は、無限スクロール機能を追加するアプリもご検討ください。MF Infinite Scroll Proは、自動ロード方式/手動ロード方式に対応したコレクションページを簡単に実現できます。Dawn, Riseといった無料テーマや、Prestige, Impact, Impulseといった有名有料テーマでも多数の実績がありますので、無限スクロールにご興味を持たれた方はぜひ一度お試しください。
この記事では無限スクロール機能を利用できるShopifyテーマについて紹介しました。SKUが100を超えるストア様など、多くの商品を取り扱う場合にはとても有効な機能ですので、ぜひご検討の参考にしてください。
こちらのリンクから無料体験を申し込むと無料体験期間の後は1ヶ月間150円でShopifyをご利用いただけます。
