[Shopify]コレクション内の商品表示数を任意の数に変更、増やす方法

今回紹介するのはコレクション内の商品数を好きな数に変更する方法です。コレクション内（URL:  /collections/〇〇）にて、好きな商品数を表示させることが可能になります。

デフォルトではコレクションページ内に商品数20商品ほどしか表示されていないのですが、もっと表示したい！という要望はよく聞きます。なので、実際はテーマによって表示数の変更方法は異なりますが、一般的な方法についてまとめてみようと思います。

カスタマイズページから変更する

最初はカスタマイズページからコレクションの商品数を変更する方法です。テーマによって異なりますが、基本的にはこちらで対応できるはずです。

まず

管理画面→オンラインストア→カスタマイズ

に移動します。

カスタマイズを押した後は、上部の「コレクション」→「デフォルトのコレクション」画面に移動してみましょう。

すると左側にコレクションページに表示する

• 行数
• 行あたりの商品数

を設定する項目があるかと思います。（表示方法はテーマによって多少異なるかもしれません。）

今回であれば

行数（8行）×　行あたりの商品数（5商品）= コレクションの商品表示数（40商品）

になるので40商品を最大表示することが可能になります。もしここまでで、コレクション内の商品の表示数を理想に近づけられたなら、これにて終了です。

ただもし下記に当てはまる場合は、コード自体を編集する必要がありますので、そちらで調整してみましょう。

• 商品数をもっと表示したい
• テーマ上で表示する商品数を変更できなかった

コード上でコレクション内の表示商品数を設定する

次の手段として対応できるのが、コード上でコレクション内の表示商品数を変更する方法です。

できればtheme kitなどを使用してローカル側から更新かけたいものですが、難しい場合は

管理画面→オンラインストア→アクション→コードを編集する

を選択しましょう。

その中で下記どちらかのファイル

• section/collection-template.liquid
• templates/collection.liquid 

が今回編集対象になります。

ちなみに編集するコード部分は

{% paginate collection.products by limit %}

になります。この"limit"の部分を好きな数字に変更してもらえれば、その数がコレクション内の商品表示数になります。

例えば『コレクションの1ページ内に100商品表示したい！』といった場合は

{% paginate collection.products by 100 %}

と記載すれば100商品を表示可能になります。 

今回触った"Debut"テーマは{% paginate %}の部分の数として"limit"が使用されていましたが、もしかすると他のテーマだと異なる変数になっているかもしれません。ただ{% paginate %}の中に数字を記載すれば適切に動作するはずなので試してみてください。

[Shopify]コレクション内の商品表示数を任意の数に変更、増やす方法 まとめ

以上、コレクションページ内で表示する商品の数を自在に変更する方法でした。商品数が多いShopifyストアで、コレクション内の1ページあたりの表示数が少ないと、何度もページ遷移を繰り返さなければならなく、非常に商品が探しにくい状態になってしまいます。

なので、商品数が多いストアほど調整が必要かもしれません。もし参考になったなら大変嬉しいです！

それでは最後までお読みいただき、ありがとうございました！本日も良い1日を！