Shopifyのコレクションページで50以上の商品を掲載する方法

はじめに

Shopifyストアで取り扱う商品はコレクションページで一覧として表示されますが、通常は1ページに50以上の商品を掲載することができません。この記事ではこの制限を突破して多数の商品を商品ページに表示する方法を紹介します。

50以上の商品を掲載する方法

方法1 : Liquidの書き方を工夫する

コレクションページで50以上の商品を掲載できない理由として、Liquidの制限があります。Liquidでは描画処理を繰り返すfor文を記載することができますが、forループの回数が50回に制限されているのです。

例えばコレクションページにあるLiquidでこの制限を突破するためには、下記のようなコードを記載することで制限の突破ができます。

{% paginate collection.products by 1000 %}
    {% for product in collection.products %}
      <p>{{ product.title }}</p>
    {% endfor %}
{% endpaginate %}

方法2 : Hydrogenを利用する

HydrogenはShopifyストアのフロントエンドを構築するために使えるフレームワークで、これを利用することで自由度の高いShopifyストアを構築することができます。Shopifyの機能として在庫管理などのバックエンドを利用したいが、フロントエンドに拘りたい大規模事業者などに利用されることが多いです。HydrogenはLiquidを使わないため、先述の制限の影響を受けません。よって特に問題なく必要な分だけ商品情報を読み込んで描画することができます。

方法3 : アプリを利用する

Shopifyアプリを利用することでも制限の突破ができます。Shopifyアプリの拡張機能はLiquidとJavascriptによる複合的な実装で行われており、Javascript側をうまく利用することLiquidの制限の影響を受けずに商品を表示できます。

MF Infinite Scroll ProはJavascriptで商品情報をロードするため、50以上の商品をコレクションページに記載することができます。またただロードしてしまうと商品画像のロード等に時間がかかって見栄えを損ねてしまうため、コレクションページのページネーション設定に合わせて一定の数ずつ商品情報をロードします。

おわりに

この記事ではShopifyのコレクションページの制限を超えて、50以上の商品を表示する方法について紹介しました。ストア構築時の参考になれば幸いです。