hiro 
ShopifyでECサイトを運営しているのだけど、商品在庫の管理が大変すぎる。
商品数が多いので、在庫僅少・在庫切れをいちいちチェックするのが大変。
在庫が少なくなったり、在庫が切れたりしたら、自動で通知を送ってくれる機能はないかなぁ。
こんなことを考えている方へ。
この記事のポイントは以下です。
Shopifyのページネーションのカスタマイズ方法を紹介
（x件ごとにページネーションを設定する、ページネーションをなくして全商品を1ページに表示させる…etc）
この記事を書いている私は大阪在住のweb制作フリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。
【Shopify】ページネーションをカスタマイズして表示件数を変える方法
Shopifyのページネーション（ページ送り）をカスタマイズする方法を解説します。
手順は以下です。
- １まずテーマのバックアップを取得する
- ２編集対象のファイルを見つける（search.liquid、collection.liquidなど）
- ３{% paginate search.results by 20 %} などの記述を見つける
- ４上記でいうと「20」の部分が1ページでの表示件数なので、ここの数字を変える
- ５完了
以下では上記の手順を詳しく解説します。
ページネーションはどの画面に表示される？
ページネーションとは以下のようなものです。
これはShopifyの無料テーマ「Supply」のサイト内検索結果のページです。
「1」「2」「3」と数字がありますが、上記の例では1ページに5件ごとの表示でページネーションが構成されています。
Shopifyでページネーションは色々な画面で表示されます。コレクションページ（商品一覧ページ）やサイト内の検索結果、アカウント管理画面の注文履歴など・・・。
こんな感じで色々あるのですが、ユーザーにとって重要なのは、
・商品一覧ページ（コレクションに紐づく商品が一覧表示されるページ）
・サイト内検索結果ページ
の2つです。
正直、スマホの操作性を考えたらページネーションなんてない方が良くて。
たとえばZOZOTOWN（アプリ）の商品一覧はページネーションなしで、スクロールするたび商品が出現します。ZOZOTOWN（アプリ）の場合は、1ページに130件程度の商品が表示されます。
商品を一度にたくさん見たい画面（商品一覧or検索結果）で、わざわざページネーションをクリックして、ページを切り替えるのが面倒なんですよね。
Shopifyでのページネーションを考える際、商品数が500や1,000あるサイトの場合は、さすがにページネーションを挟まないと1ページの読み込み量が大きくなっちゃいますが、MAX50〜100商品程度のサイトでしたら、ページネーションなしでも良いと考えています。
実際の案件もページネーションをカスタマイズして、デフォルトより多めの商品をページ内に表示させることが多いです。
テーマのバックアップを取る
サイトを編集する前にはテーマのバックアップを取りましょう。面倒かもしれませんが、万が一、操作を誤った際に復元ができます。
数十秒で終わります。
管理画面＞オンラインストア＞テーマ＞アクション＞テーマを複製する を押下します。
するとページ下部の「テーマライブラリー」というエリアに「○○（テーマ名が入る）のコピー」という形で保存されます。
このままだと分かりにくいので、アクション＞名前の変更 からテーマ名を編集します。
私の場合はいつも「yyyymmddまで_○○（サイト名やテーマ名）」にしています。
緑色の「名前の変更」を押下したら、複製したテーマが保存されます。これでバックアップの完了です。
編集対象のファイルを見つける
続いて編集対象のファイルを探します。
管理画面＞オンラインストア＞テーマ＞アクション＞コードを編集する から、Shopifyのファイル一覧画面にアクセスできます。
「コードを編集する」をクリックすると、以下のような画面が表示されます。
今回は例として、サイト内検索結果のページのページネーションをカスタマイズします。編集対象のファイルである「search.liquid」を探します。
テンプレートのファイル名は、導入しているテーマによって変わります。今回例として使用している無料テーマの「Supply」では、検索結果ページのテンプレートファイル名は「search.liquid」です。
左上の検索窓に「search」といれると、ヒットします。
で、「search.liquid」をクリックして開いてみると何やらコード量が少ない。。
よく見ると「search.liquid」は「search-template.liquid」を読み込んでいることがわかります。
メインのコードは「search-template.liquid」の方に記載されているのですね。ということで「search-template.liquid」を探します。
先ほどのように検索窓から探してもいいのですが「search-template.liquid」にカーソルを合わせて「→」が出た状態でクリックすると、そのテンプレートファイルを開くことができます。
「search-template.liquid」を開いた状態がこちら。いよいよコードを編集して、ページネーションをカスタマイズします。
{% paginate search.results by XXX %}のXXX部分を変える
1ページあたりの表示件数を変えるには、
{% paginate search.results by 5 %}のコードの「5」の部分を変更すればOKです。
設定例は以下です。
例：10件ごとにページ送りしたい場合
{% paginate search.results by 10 %}
例：30件ごとにページ送りしたい場合
{% paginate search.results by 30 %}
例：（実質的に）ページネーションを無くしたい場合は途方もなく大きい数を設定
{% paginate search.results by 9999 %}
表示確認する
設定を変更した後は表示確認を行います。
実際にサイト内検索からキーワードを入れ、設定通りの表示件数でページネーションが機能していれば完了です。
今回は試しに1ページに【8件】のアイテムを表示にしてみました。
実際にサイト内検索をしてみましたが、問題なく8件でページネーションが機能しました。
Shopifyでのサイト構築を学ぶおすすめの方法
Shopifyのリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。
- オンラインスクールで学ぶ
TechAcademy（テックアカデミー）に、専属のパーソナルメンターがマンツーマンでサポートする「Shopifyコース」が誕生しました。
安い買い物ではないので、TechAcdemyの講座を無料体験で試してみるのがおすすめです。
- 本で学ぶ
「商品売るならShopify 世界標準かつ最先端のECサイト構築入門」がおすすめです。shopifyとは？という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
実際に読んだ私のレビューはこちらの記事をご覧ください。
- 動画で学ぶ
Udemyの「Shopifyでクライアントのストアを作る人のための講座
」がオススメです！ 私も買いましたがShopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
実際に購入した私のレビューはこちらの記事をご覧ください。
【Udemyがセール中（2021年7月30日（金）まで）】
対象コースが ￥1,730から。
2021年7月30日（金）まで！【Udemy】セール中のShopifyの講座一覧を見る >>
まとめ
この記事のポイントをまとめます。
Shopifyの商品一覧ページやサイト内検索結果のページネーション（ページ送り）をカスタマイズして、30件ごとのページ送りに変えたり、そもそもページネーションを無くして、すべてを1ページで表示させる方法は以下です。
- １．まずテーマのバックアップを取得する
- ２．編集対象のファイルを見つける（search.liquid、collection.liquidなど）
- ３．{% paginate search.results by 20 %} などの記述を見つける
- ４．上記でいうと「20」の部分が1ページでの表示件数なので、ここの数字を変える
- ５．完了
なお、Shopifyの検索結果をカスタマイズする方法は以下で詳しく解説しています。
kopa-diary.com今回の記事はここまです。